Package

@carbon/react

Browser

Chrome

Operating System

Windows

Package version

Latest

React version

v17

Automated testing tool and ruleset

manual testing

Assistive technology

No response

Description

When you go https://react.carbondesignsystem.com/?path=/story/components-modal--danger-modal for danger modal, and tab to the delete button, the screen reader announces “danger delete.” even though the text is just "delete" the extra word Danger confuses the user.

see screenshot of problematic "danger" text in HTML:

Full report:

Issue description: While navigating to the delete dialog, when the user focuses on the delete option, the screen reader reads “danger delete.” The extra word “danger” may confuse users, as it does not clearly describe the action and can be misleading for screen reader users.

Recommended fix: Update the button’s accessible name so that the screen reader announces only “Delete.” Ensure that any hidden text used for styling does not interfere with the screen reader announcement.

User impact: Screen reader users may be confused or misled by the announcement “danger delete,” which could affect their understanding of the action they are about to perform.

WCAG Mapping: 3.3.2 Labels or Instruction

Level of Compliance: A

WCAG 2.1 Violation

WCAG Mapping: 3.3.2 Labels or Instruction

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-modal--danger-modal

Steps to reproduce

Tab to the delete button using screen reader. or see this danger text inside of the HTML:

Suggested Severity

None

Code of Conduct

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