From 2b4d21f2a338303e0c939ff4eeffdcc149121b61 Mon Sep 17 00:00:00 2001
From: Mohammad Aakash <64223049+MuhammadAakash@users.noreply.github.com>
Date: Sun, 6 Nov 2022 21:36:06 +0500
Subject: [PATCH] =?UTF-8?q?[#2130]=20Changed=20the=20keyboard=20navigation?=
 =?UTF-8?q?=20for=20the=20Accordion=20component=20t=E2=80=A6=20(#2198)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [#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
---
 .../Accordion/__tests__/Accordion.spec.jsx    | 24 +++++++++++++++++++
 client/app/components/Accordion/index.jsx     |  7 +++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/client/app/components/Accordion/__tests__/Accordion.spec.jsx b/client/app/components/Accordion/__tests__/Accordion.spec.jsx
index 39eb80f029..7481bf74b7 100644
--- a/client/app/components/Accordion/__tests__/Accordion.spec.jsx
+++ b/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');
+    });
+  });
 });
diff --git a/client/app/components/Accordion/index.jsx b/client/app/components/Accordion/index.jsx
index 47b9d0939f..33576d24a7 100644
--- a/client/app/components/Accordion/index.jsx
+++ b/client/app/components/Accordion/index.jsx
@@ -43,6 +43,11 @@ 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 (
@@ -50,7 +55,7 @@ export const Accordion = ({
       <div
         className={`accordion ${globalCss.gridRowSpaceBetween} ${css.accordion}`}
         onClick={toggleOpen}
-        onKeyDown={toggleOpen}
+        onKeyDown={openToggle}
         role="button"
         tabIndex="0"
         aria-expanded={open}