[#2130] Changed the keyboard navigation for the Accordion component t… (

#2198)

* [#2130] Changed the keyboard navigation for the Accordion component to enter key

* Update index.jsx

* [#2130] Added the Test case for Opening the Accordion by pressing Enter

* Removed Extra spaces

* Update Accordion.spec.jsx

* Changed the Event on accordion button

* Update Accordion.spec.jsx

client/app/components/Accordion/__tests__/Accordion.spec.jsx

@@ -6,6 +6,9 @@ import { Accordion } from 'components/Accordion';
 const id = 'some-id';
 const title = 'Accordions have pianos';
 const children = <strong>Hello</strong>;
+const openToggle = (e: SyntheticKeyboardEvent<HTMLDivElement>) => {
+  window.alert('Key pressed', e);
+};
 
 describe('Accordion', () => {
   describe('open props is undefined', () => {
@@ -45,4 +48,25 @@ describe('Accordion', () => {
       expect(accordionContent).toHaveClass('accordionContent');
     });
   });
+
+  describe('open when enter key is pressed', () => {
+    it('toggles correctly', () => {
+      const component = (
+        <Accordion id={id} title={title} onKeyDown={openToggle}>
+          {children}
+        </Accordion>
+      );
+      const { getByRole } = render(component);
+
+      const accordionContent = getByRole('region');
+      const accordionBtn = getByRole('button');
+      fireEvent.keyDown(accordionBtn, {
+        key: 'Enter',
+      });
+
+      expect(accordionContent).toHaveClass('accordionContent');
+      fireEvent.click(accordionBtn);
+      expect(accordionContent).toHaveClass('accordionClose');
+    });
+  });
 });

client/app/components/Accordion/index.jsx

@@ -43,14 +43,19 @@ export const Accordion = ({
     setOpen(!open);
   };
 
+  const openToggle = (event: SyntheticKeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter') {
+      setOpen(!open);
+    }
+  };
   const inputClassNames = () => `${dark ? css.dark : ''} ${large ? css.large : ''}`;
 
   return (
     <div id={`${id}_accordion`} className={inputClassNames()}>
       <div
         className={`accordion ${globalCss.gridRowSpaceBetween} ${css.accordion}`}
         onClick={toggleOpen}
-        onKeyDown={toggleOpen}
+        onKeyDown={openToggle}
         role="button"
         tabIndex="0"
         aria-expanded={open}