[a11y]: Scrollable headers are not tabbable and cause an Accessibility Requirement 2.1.1 violation

[JCreedon91]

Package

@carbon/ibm-products

Browser

Chrome

Operating System

MacOS

Package version

2.14.0

React version

No response

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

I have seen many headers throughout both the IBM Cloud Manager and API Manager UI that allow users to scroll through the text if the browser window is too small to display the header text in full.

If I change the browser windows size to make the header scrollable and then use the accessibility checker, it results in the Accessibility Requirement 2.1.1 violation "The scrollable element <h1> with non-interactive content is not tabbable"

The relevant headers all have the same value for their class attribute, class="c4p--page-header__title c4p--page-header__title--fades"

I request that a tabindex attribute that equals 0 or higher be added to <h1> elements with class="c4p--page-header__title c4p--page-header__title--fades" in order to make these headers tabbable and remove the accessibility violation

WCAG 2.1 Violation

Success Criterion 2.1.1 Keyboard

Reproduction/example

https://codesandbox.io/p/devbox/accessibility-2-1-1-violation-2ys8p6?file=%2Fsrc%2FExample%2FExample.jsx%3A9%2C3-14%2C9

Steps to reproduce

1. After accessing the codesandbox code with the link above, navigate to the URL the Page Header example is hosted on.

2. The header should end in ellipses, if it doesn't adjust the size of the browser window to make it smaller.

3. Run an Accessibility Checker on the webpage. The Acessibility Checker used to find this issue was the IBM Equal Access Accessibility Checker running on a Chrome browser: https://chromewebstore.google.com/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Tasks

Preview Give feedback

1. Add Tooltip, similar to how StringFormatter or Tag with truncation from @carbon/react

[davidmenendez]

REF #4565
REF #3985

[elycheea]

Moving this back to design since the behavior to truncate automatically is based on the initial page header usage docs.

[oliviaflory]

Utilize the same logic as the tag overflow to address Header truncation.

@davidmenendez will add notes to Page Header v2 about text wrap / text overflow

[matthewgallo]

@carbon/react tag overflow