[a11y]: OverflowMenuItem does not set aria-disabled attribute when disabled prop is used

[MITHUNibm]

Package

@carbon/react

Browser

Firefox

Operating System

MacOS

Package version

v1.81.0 (also affects earlier versions)

React version

v18.x

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

JAWS, MacOS VoiceOver

Description

The OverflowMenuItem component does not properly announce its disabled state to screen readers. When the disabled prop is set to true, the component only sets the HTML disabled attribute on the button element but does not set the aria-disabled attribute. This violates WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A).

Current behavior:
When disabled={true} is set, only the HTML disabled attribute is applied
Screen readers (JAWS, NVDA, VoiceOver) do not consistently announce the disabled state
The button becomes non-focusable, making it difficult for keyboard users to discover

Expected behavior:
The component should set aria-disabled="true" when disabled={true}
Screen readers should announce "disabled" or "unavailable" when the item is focused
The item should remain in the accessibility tree for discovery

WCAG 2.1 Violation

Success Criterion: 4.1.2 Name, Role, Value (Level A)

Reproduction/example

Screen reader users cannot determine that certain menu items are disabled, leading to confusion about why actions cannot be performed.

Steps to reproduce

Create an OverflowMenu with an OverflowMenuItem that has disabled={true}
Enable a screen reader (JAWS with Firefox, or NVDA with Chrome)
Navigate to the overflow menu and open it
Tab to or hover over the disabled menu item
Observe that the screen reader does not announce the disabled state

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Code of Conduct

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