feat(tabs): traverse tabs with arrow keys (#8116)

elastic · Nov 21, 2024 · df7a98f · df7a98f
1 parent 9b1b461
commit df7a98f
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 5 deletions.
diff --git a/packages/eui/changelogs/upcoming/8116.md b/packages/eui/changelogs/upcoming/8116.md
@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab group is a tab stop and tabs can be traversed with arrow keys.
+
diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -342,6 +342,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           aria-selected="true"
           class="euiTab euiTab-isSelected emotion-euiTab-selected"
           role="tab"
+          tabindex="0"
           type="button"
         >
           <span
@@ -354,6 +355,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           aria-selected="false"
           class="euiTab emotion-euiTab"
           role="tab"
+          tabindex="-1"
           type="button"
         >
           <span

diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -300,6 +300,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         aria-selected="true"
         class="euiTab euiTab-isSelected emotion-euiTab-selected"
         role="tab"
+        tabindex="0"
         type="button"
       >
         <span
@@ -312,6 +313,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         aria-selected="false"
         class="euiTab emotion-euiTab"
         role="tab"
+        tabindex="-1"
         type="button"
       >
         <span
@@ -557,6 +559,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           aria-selected="true"
           class="euiTab euiTab-isSelected emotion-euiTab-selected"
           role="tab"
+          tabindex="0"
           type="button"
         >
           <span
@@ -569,6 +572,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           aria-selected="false"
           class="euiTab emotion-euiTab"
           role="tab"
+          tabindex="-1"
           type="button"
         >
           <span
@@ -608,6 +612,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           aria-selected="true"
           class="euiTab euiTab-isSelected emotion-euiTab-selected"
           role="tab"
+          tabindex="0"
           type="button"
         >
           <span
@@ -620,6 +625,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           aria-selected="false"
           class="euiTab emotion-euiTab"
           role="tab"
+          tabindex="-1"
           type="button"
         >
           <span

diff --git a/packages/eui/src/components/tabs/__snapshots__/tab.test.tsx.snap b/packages/eui/src/components/tabs/__snapshots__/tab.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`EuiTab props append is rendered 1`] = `
   aria-selected="false"
   class="euiTab emotion-euiTab"
   role="tab"
+  tabindex="-1"
   type="button"
 >
   <span
@@ -26,6 +27,7 @@ exports[`EuiTab props disabled and selected 1`] = `
   class="euiTab euiTab-isSelected emotion-euiTab-disabled-selected"
   disabled=""
   role="tab"
+  tabindex="0"
   type="button"
 >
   <span
@@ -42,6 +44,7 @@ exports[`EuiTab props disabled is rendered 1`] = `
   class="euiTab emotion-euiTab-disabled"
   disabled=""
   role="tab"
+  tabindex="-1"
   type="button"
 >
   <span
@@ -61,6 +64,7 @@ exports[`EuiTab props href renders anchor 1`] = `
   href="/baz/bing"
   rel="noreferrer"
   role="tab"
+  tabindex="-1"
 >
   <span
     class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
@@ -75,6 +79,7 @@ exports[`EuiTab props isSelected is rendered 1`] = `
   aria-selected="true"
   class="euiTab euiTab-isSelected emotion-euiTab-selected"
   role="tab"
+  tabindex="0"
   type="button"
 >
   <span
@@ -92,6 +97,7 @@ exports[`EuiTab props onClick renders button 1`] = `
   class="euiTab testClass1 testClass2 emotion-euiTab-euiTestCss"
   data-test-subj="test subject string"
   role="tab"
+  tabindex="-1"
   type="button"
 >
   <span
@@ -107,6 +113,7 @@ exports[`EuiTab props prepend is rendered 1`] = `
   aria-selected="false"
   class="euiTab emotion-euiTab"
   role="tab"
+  tabindex="-1"
   type="button"
 >
   <span

diff --git a/packages/eui/src/components/tabs/__snapshots__/tabs.test.tsx.snap b/packages/eui/src/components/tabs/__snapshots__/tabs.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`EuiTabs props expand passes down to EuiTab children 1`] = `
     aria-selected="false"
     class="euiTab emotion-euiTab-expanded"
     role="tab"
+    tabindex="-1"
     type="button"
   >
     <span
@@ -29,6 +30,7 @@ exports[`EuiTabs props size l renders and passes down to EuiTab children 1`] = `
     aria-selected="false"
     class="euiTab emotion-euiTab"
     role="tab"
+    tabindex="-1"
     type="button"
   >
     <span
@@ -49,6 +51,7 @@ exports[`EuiTabs props size m renders and passes down to EuiTab children 1`] = `
     aria-selected="false"
     class="euiTab emotion-euiTab"
     role="tab"
+    tabindex="-1"
     type="button"
   >
     <span
@@ -69,6 +72,7 @@ exports[`EuiTabs props size s renders and passes down to EuiTab children 1`] = `
     aria-selected="false"
     class="euiTab emotion-euiTab"
     role="tab"
+    tabindex="-1"
     type="button"
   >
     <span
@@ -89,6 +93,7 @@ exports[`EuiTabs props size xl renders and passes down to EuiTab children 1`] =
     aria-selected="false"
     class="euiTab emotion-euiTab"
     role="tab"
+    tabindex="-1"
     type="button"
   >
     <span

diff --git a/packages/eui/src/components/tabs/tab.tsx b/packages/eui/src/components/tabs/tab.tsx
@@ -100,6 +100,7 @@ export const EuiTab: FunctionComponent<Props> = ({
       <a
         role="tab"
         aria-selected={!!isSelected}
+        tabIndex={isSelected ? 0 : -1}
         className={classes}
         css={cssTabStyles}
         href={href}
@@ -123,6 +124,7 @@ export const EuiTab: FunctionComponent<Props> = ({
     <button
       role="tab"
       aria-selected={!!isSelected}
+      tabIndex={isSelected ? 0 : -1}
       type="button"
       className={classes}
       css={cssTabStyles}

diff --git a/packages/eui/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap b/packages/eui/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       class="euiTab euiTab-isSelected emotion-euiTab-selected"
       id="es"
       role="tab"
+      tabindex="0"
       type="button"
     >
       <span
@@ -31,6 +32,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
+      tabindex="-1"
       type="button"
     >
       <span
@@ -76,6 +78,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
       class="euiTab euiTab-isSelected emotion-euiTab-selected"
       id="es"
       role="tab"
+      tabindex="0"
       type="button"
     >
       <span
@@ -91,6 +94,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
+      tabindex="-1"
       type="button"
     >
       <span
@@ -136,6 +140,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
       class="euiTab euiTab-isSelected emotion-euiTab-selected"
       id="es"
       role="tab"
+      tabindex="0"
       type="button"
     >
       <span
@@ -151,6 +156,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
+      tabindex="-1"
       type="button"
     >
       <span
@@ -196,6 +202,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       class="euiTab emotion-euiTab"
       id="es"
       role="tab"
+      tabindex="-1"
       type="button"
     >
       <span
@@ -211,6 +218,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
+      tabindex="0"
       type="button"
     >
       <span
@@ -256,6 +264,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       class="euiTab emotion-euiTab"
       id="es"
       role="tab"
+      tabindex="-1"
       type="button"
     >
       <span
@@ -271,6 +280,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
+      tabindex="0"
       type="button"
     >
       <span
@@ -316,6 +326,7 @@ exports[`EuiTabbedContent props size can be small 1`] = `
       class="euiTab euiTab-isSelected emotion-euiTab-selected"
       id="es"
       role="tab"
+      tabindex="0"
       type="button"
     >
       <span
@@ -331,6 +342,7 @@ exports[`EuiTabbedContent props size can be small 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
+      tabindex="-1"
       type="button"
     >
       <span
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		Accessibility

		- Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab group is a tab stop and tabs can be traversed with arrow keys.