diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 6418effba63..e0688978abd 100644 --- 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 index 893681517e2..7a3c697a804 100644 --- 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 index a58f87a8101..8869e2f92be 100644 --- 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 index 9198f724476..14717d89f55 100644 --- 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 index ff1ff497f40..372c6912072 100644 --- a/packages/terra-layout/src/_LayoutSlidePanel.jsx +++ b/packages/terra-layout/src/_LayoutSlidePanel.jsx @@ -165,7 +165,7 @@ class LayoutSlidePanel extends React.Component { -
+
{children}
diff --git a/packages/terra-layout/tests/jest/__snapshots__/LayoutSlidePanel.test.jsx.snap b/packages/terra-layout/tests/jest/__snapshots__/LayoutSlidePanel.test.jsx.snap index 45776351866..c48aa07c56a 100644 --- 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" /> @@ -83,6 +84,7 @@ exports[`LayoutSlidePanel should render when small 1`] = ` className="main-container" data-terra-layout-main={true} role="main" + tabIndex="-1" >
Child @@ -121,6 +123,7 @@ exports[`LayoutSlidePanel should render when tiny 1`] = ` className="main-container" data-terra-layout-main={true} role="main" + tabIndex="-1" >
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" >
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" />