feat: SidebarMenu and Accordion components accesibility, (#175)

* added SidebarMenu accesibility

* fix added import onEnterOrSpace

* feat: make accordion component accesible for keyboard navigation

* removed unused parameter

* bugfix: eslint errors

Co-authored-by: Andrei Besleaga <andrei.besleaga@tonica.ro>

Author: andreibesleaga

src/components/accordion/accordion.js

@@ -3,17 +3,19 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import ArrowDown from "../../images/icons/arrow-down.svg";
 import "./accordion.scss";
+import { onEnterOrSpace } from "../../a11y";
 
 export const Accordion = ({ title, content, children }) => {
   const [showContent, setShowContent] = useState(false);
 
   return (
-    <div className="message __accordion">
+    <div className="message __accordion" tabIndex="0">
       <div
         className={classNames("message-header __accordion-header", {
           "__accordion-header--expanded": showContent
         })}
         onClick={() => setShowContent(!showContent)}
+        onKeyPress={onEnterOrSpace(setShowContent(!showContent))}
       >
         <span className="__accordion-title">{title}</span>
         <div className="__accordion-arrow">

src/components/sidebar-menu-item/sidebar-menu-item.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import "./sidebar-menu-item.scss";
 import classNames from "classnames";
+import { onEnterOrSpace } from "../../a11y";
 
 export const SidebarMenuItem = ({ active, isTitle, children, onClick }) => {
   const onClickCb = () => {
@@ -12,11 +13,14 @@ export const SidebarMenuItem = ({ active, isTitle, children, onClick }) => {
 
   return (
     <li
+      role="menuitem"
+      tabIndex="0"
       className={classNames("__sidebar-menu-item", {
         isTitle,
         active
       })}
       onClick={onClickCb}
+      onKeyPress={onEnterOrSpace(onClickCb)}
     >
       {children}
     </li>

src/components/sidebar-menu/sidebar-menu.js

@@ -5,7 +5,7 @@ import "./sidebar-menu.scss";
 
 export const SidebarMenu = ({ title, children }) => {
   return (
-    <div className="__sidebar-menu-container">
+    <div className="__sidebar-menu-container" role="navigation">
       <Hero title={title} useFallbackIcon={true} />
       <ul className="menu-list">{children}</ul>
     </div>