[a11y]: Screen reader identifies hidden controls in Tearsheet

[elycheea]

Package

@carbon/ibm-products

Browser

Firefox

Operating System

Windows

Package version

v2.44.0-rc.1

React version

No response

Automated testing tool and ruleset

manual

Assistive technology

JAWS

Description

Reported by Raghu during screen reader testing.

Screen reader identifies “a focus sentinel button" on both top and bottom of the modal which is not visible

1. On Arrow key navigation this Element identified both on top as well as bottom part of the modal.
2. In the page top, this control received Tab focus.
3. “Focus sentinel” button is not keyboard operable.
4. Existing label of this control is not descriptive enough to understand the purpose of this Element.

Recommended fix

Please confirm the functional purpose of this “focus sentinel button”:

1. If there is a functional objective, make this element visually available and operable by keyboard/mouse. Provide a descriptive label to explain its purpose.
2. If not, remove tab focus and hide it from screen reader detection on both Tab and Arrow key navigation.

REF# carbon-design-system/carbon#14203

WCAG 2.1 Violation

1.3.1. Info & Relationships

Reproduction/example

https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-tearsheet--tearsheet&globals=viewport:basic

Steps to reproduce

This was reported in all variants of the tearsheet.

Navigate tearsheet using either (or both) Arrow or Tab keys.

Code of Conduct

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