[a11y]: Tear sheet hidden-visually reported as tabable by a11y #8669
Description
Package
@carbon/ibm-products
Browser
Chrome
Operating System
MacOS
Package version
2.75.0
React version
No response
Automated testing tool and ruleset
AxeBuilder a11y
Assistive technology
No response
Description
Accessibility scan for our product ran into an issue where it seems that there is a visually hidden element that is getting caught as a tabable field, but since it is visually hidden it is lacking any accessibility fields like label that a reader would be looking for. I'll include details in the thread.
Target:
["#bus-iframe",["c4p-tearsheet","#start-sentinel"]]
HtmlElement:
<a id="start-sentinel" href="javascript:void 0" role="navigation" class="c4p--visually-hidden"></a>
and
Target:
["#bus-iframe",["c4p-tearsheet","#end-sentinel"]]
HtmlElement:
<a id="end-sentinel" href="javascript:void 0" role="navigation" class="c4p--visually-hidden"></a>
The a11y tool has it flagged under the following:
"Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute"
WCAG 2.1 Violation
No response
Reproduction/example
Open https://ibm-products-web-components.carbondesignsystem.com/?path=/story/components-tearsheet--with-influencer and run accessibility check.
Steps to reproduce
Open https://ibm-products-web-components.carbondesignsystem.com/?path=/story/components-tearsheet--with-influencer and run accessibility check.
Code of Conduct
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate problems