From e0d60802220122217d9b88534238a930db8e5dbb Mon Sep 17 00:00:00 2001
From: EasyBen <benjamin.valembois@axa.fr>
Date: Mon, 6 Nov 2023 22:22:48 +0100
Subject: [PATCH] feat(accessibility): add tabindex on tab for select current
 tab with keyboard

---
 packages/collapse/src/Header.tsx                     | 12 ++++++++----
 .../__tests__/__snapshots__/Accordion.spec.tsx.snap  |  3 +++
 .../__snapshots__/CollapseCard.spec.tsx.snap         |  1 +
 .../src/__tests__/__snapshots__/Header.spec.tsx.snap |  1 +
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/collapse/src/Header.tsx b/packages/collapse/src/Header.tsx
index 1e123d8ba..b620d2878 100644
--- a/packages/collapse/src/Header.tsx
+++ b/packages/collapse/src/Header.tsx
@@ -52,7 +52,7 @@ const Header = ({
   };
 
   const onKeyToggle = (e: React.KeyboardEvent) => {
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
       e.preventDefault();
       onToggle &&
         onToggle({
@@ -75,15 +75,19 @@ const Header = ({
   );
 
   return (
-    <div className={componentClassName} role="tab" id={id}>
+    <div
+      className={componentClassName}
+      tabIndex={0}
+      role="tab"
+      id={id}
+      onKeyDown={onKeyToggle}>
       <a
         className="af-accordion__item-toggle"
         data-toggle="isOpen"
         href={href}
         aria-expanded={isOpen}
         aria-controls={ariaControls}
-        onClick={onToggleEvent}
-        onKeyDown={onKeyToggle}>
+        onClick={onToggleEvent}>
         <h3 className="af-accordion__item-title">
           <span className={chevronClassName} />
           {children}
diff --git a/packages/collapse/src/__tests__/__snapshots__/Accordion.spec.tsx.snap b/packages/collapse/src/__tests__/__snapshots__/Accordion.spec.tsx.snap
index 386ff420c..f6c4bbbb0 100644
--- a/packages/collapse/src/__tests__/__snapshots__/Accordion.spec.tsx.snap
+++ b/packages/collapse/src/__tests__/__snapshots__/Accordion.spec.tsx.snap
@@ -14,6 +14,7 @@ exports[`Accordion renders Accordion correctly 1`] = `
         class="af-accordion__item-header"
         id="one"
         role="tab"
+        tabindex="0"
       >
         <a
           aria-controls="onebody"
@@ -53,6 +54,7 @@ exports[`Accordion renders Accordion correctly 1`] = `
         class="af-accordion__item-header"
         id="two"
         role="tab"
+        tabindex="0"
       >
         <a
           aria-controls="twobody"
@@ -92,6 +94,7 @@ exports[`Accordion renders Accordion correctly 1`] = `
         class="af-accordion__item-header"
         id="three"
         role="tab"
+        tabindex="0"
       >
         <a
           aria-controls="threebody"
diff --git a/packages/collapse/src/__tests__/__snapshots__/CollapseCard.spec.tsx.snap b/packages/collapse/src/__tests__/__snapshots__/CollapseCard.spec.tsx.snap
index 64d76a4f8..4400b44ac 100644
--- a/packages/collapse/src/__tests__/__snapshots__/CollapseCard.spec.tsx.snap
+++ b/packages/collapse/src/__tests__/__snapshots__/CollapseCard.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`CollapseCard renders CollapseCard correctly 1`] = `
       class="af-accordion__item-header"
       id="collapse1"
       role="tab"
+      tabindex="0"
     >
       <a
         aria-controls="collapse1body"
diff --git a/packages/collapse/src/__tests__/__snapshots__/Header.spec.tsx.snap b/packages/collapse/src/__tests__/__snapshots__/Header.spec.tsx.snap
index 9450e23f6..0ad642d6b 100644
--- a/packages/collapse/src/__tests__/__snapshots__/Header.spec.tsx.snap
+++ b/packages/collapse/src/__tests__/__snapshots__/Header.spec.tsx.snap
@@ -5,6 +5,7 @@ exports[`Accordion.Header renders Accordion.Header correctly 1`] = `
   <div
     class="af-accordion__item-header"
     role="tab"
+    tabindex="0"
   >
     <a
       aria-expanded="false"