Open JCreedon91 opened 4 months ago
REF #4565 REF #3985
Moving this back to design since the behavior to truncate automatically is based on the initial page header usage docs.
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
@carbon/react
tag overflow
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 withclass="c4p--page-header__title c4p--page-header__title--fades"
in order to make these headers tabbable and remove the accessibility violationWCAG 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
After accessing the codesandbox code with the link above, navigate to the URL the Page Header example is hosted on.
The header should end in ellipses, if it doesn't adjust the size of the browser window to make it smaller.
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
StringFormatter
orTag
with truncation from@carbon/react