[terra-application-header-layout, terra-layout] Fix for the "Skip to …

…content" button accessibility issue (#2105)
cerner · Mar 27, 2024 · 0ef2aad · 0ef2aad
1 parent 9035f5e
commit 0ef2aad
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 3 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -51,6 +51,7 @@ Cerner Corporation
 - Kol Kheang [@kolkheang]
 - Aaron Johnson [@zxeleven]
 - Serhii Pavlov [@sPavl0v]
+- Dmytro Smoliakov [@user099]
 
 [@tbiethman]: https://github.com/tbiethman
 [@mjhenkes]: https://github.com/mjhenkes
@@ -103,3 +104,4 @@ Cerner Corporation
 [@kolkheang]: https://github.com/kolkheang
 [@zxeleven]: https://github.com/zxeleven
 [@sPavl0v]: https://github.com/sPavl0v
+[@user099]: https://github.com/user099
diff --git a/packages/terra-application-header-layout/CHANGELOG.md b/packages/terra-application-header-layout/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * "Skip to content" button's logic that adds and removes `tabindex` attribute for the main element was removed to fix unexpected focus behavior for users using screen readers.
+
 ## 3.40.0 - (December 18, 2023)
 
 * Changed

diff --git a/packages/terra-application-header-layout/src/ApplicationHeaderLayout.jsx b/packages/terra-application-header-layout/src/ApplicationHeaderLayout.jsx
@@ -88,9 +88,7 @@ const ApplicationHeaderLayout = ({
     const mainContainer = document.querySelector(['[data-terra-layout-main]']);
 
     if (mainContainer) {
-      mainContainer.setAttribute('tabindex', '-1');
       mainContainer.focus();
-      mainContainer.removeAttribute('tabindex');
     }
   };
 

diff --git a/packages/terra-layout/CHANGELOG.md b/packages/terra-layout/CHANGELOG.md
@@ -1,6 +1,8 @@
 # Changelog
 
 ## Unreleased
+* Changed
+  * `tabindex` attribute with value `-1` was added to the main element (`data-terra-layout-main`) to fix unexpected focus behavior for users using screen readers.
 
 ## 4.39.0 - (December 18, 2023)
 

diff --git a/packages/terra-layout/src/_LayoutSlidePanel.jsx b/packages/terra-layout/src/_LayoutSlidePanel.jsx
@@ -165,7 +165,7 @@ class LayoutSlidePanel extends React.Component {
         </div>
         <OverlayContainer className={cx('content')}>
           <Overlay isRelativeToContainer onRequestClose={onToggle} isOpen={isOverlayOpen} backgroundStyle={overlayBackground} zIndex="6000" />
-          <main role="main" data-terra-layout-main className={cx('main-container')}>
+          <main role="main" tabIndex="-1" data-terra-layout-main className={cx('main-container')}>
             {children}
           </main>
         </OverlayContainer>

diff --git a/packages/terra-layout/tests/jest/__snapshots__/LayoutSlidePanel.test.jsx.snap b/packages/terra-layout/tests/jest/__snapshots__/LayoutSlidePanel.test.jsx.snap
@@ -45,6 +45,7 @@ exports[`LayoutSlidePanel correctly applies the theme context className 1`] = `
               className="main-container"
               data-terra-layout-main={true}
               role="main"
+              tabIndex="-1"
             />
           </div>
         </div>
@@ -83,6 +84,7 @@ exports[`LayoutSlidePanel should render when small 1`] = `
       className="main-container"
       data-terra-layout-main={true}
       role="main"
+      tabIndex="-1"
     >
       <div>
         Child
@@ -121,6 +123,7 @@ exports[`LayoutSlidePanel should render when tiny 1`] = `
       className="main-container"
       data-terra-layout-main={true}
       role="main"
+      tabIndex="-1"
     >
       <div>
         Child
@@ -159,6 +162,7 @@ exports[`LayoutSlidePanel should render with provided props 1`] = `
       className="main-container"
       data-terra-layout-main={true}
       role="main"
+      tabIndex="-1"
     >
       <div>
         Child
@@ -192,6 +196,7 @@ exports[`LayoutSlidePanel should render without optional props 1`] = `
       className="main-container"
       data-terra-layout-main={true}
       role="main"
+      tabIndex="-1"
     />
   </OverlayContainer>
 </div>