cengage
[Accessibility] [Dropdown Menu]: miscellaneous wrong aria properties
Issue 1: [Accessibility] [Dropdown Menu] [DropdownMenuNavItem] > role="menuitem" used without a parent element with role="menu"
Environment: Windows 11 / Chrome 137 / JAWS 2025 Windows 11 / Edge 136 / NVDA 2025 MacOS 15 / Safari / VoiceOver
Steps to Reproduce:
- Open the URL - https://react-magma.cengage.com/version/4.9.1/api/dropdown/.
- Navigate to the page containing the DropdownMenuNavItem subcomponent.
- Inspect the DOM structure and ARIA roles applied to the dropdown menu and its items.
- Observe the parent-child role relationship.
Actual Result: The DropdownMenuNavItem elements are assigned role="menuitem", but their parent container does not have role="menu". This breaks the expected ARIA role hierarchy.
Refer to Screencast: https://app.screencast.com/WWhuLUt2zpp6g
Instance: This applies to Breaking a Menu Into Groups subcomponent as well
Expected Result: Each element with role="menuitem" should be contained within a parent element that has role="menu". This ensures that assistive technologies can correctly interpret the structure and behavior of the dropdown menu.
User Impact: Screen reader users may not receive the correct context or navigation cues when interacting with the dropdown menu, leading to confusion or difficulty in understanding the menu structure.
WCAG Guidelines: 1.3.1 Info and Relationships (Level A)
Bug Fix Recommendation: Wrap all DropdownMenuNavItem elements inside a container element with role="menu". Ensure that the menu container is properly associated with the dropdown trigger using aria-controls and aria-expanded.
Issue 2: [Accessibility] [Dropdown] [Custom button] > Accessible name should match the visual label "Extra Props Split"
Environment: Windows 11 / Chrome 137 / JAWS 2025 Windows 11 / Edge 136 / NVDA 2025 MacOS 15 / Safari / VoiceOver
Steps to Reproduce:
- Open the URL - https://react-magma.cengage.com/version/4.9.1/api/dropdown/
- Navigate to the custom button sub component containing the "Extra Props Split" button.
- Turn on a screen reader (JAWS/NVDA/VoiceOver).
- Navigate to the menu button using keyboard or screen reader navigation.
- Listen to the accessible name announced for the button.
Actual Result: The screen reader announces the button as "Custom button example", which does not match the visible label "Extra Props Split".
Refer to Screencast: https://app.screencast.com/mdXlS81Nrjzkh
Expected Result: The accessible name of the button should match its visible label. In this case, it should be announced as "Extra Props Split" to ensure consistency between visual and non-visual users.
User Impact: Screen reader users may be confused or misled by the mismatch between the visual label and the accessible name. This can reduce trust in the interface and hinder usability.
WCAG Guidelines: 2.5.3 Label in Name (Level A)
Bug Fix Recommendation: Ensure the accessible name is derived from the visible label using native HTML elements or by setting aria-label="Extra Props Split" if necessary. Avoid hardcoding unrelated or generic labels that do not reflect the visible text.
Issue 3: Accessibility] [Dropdown] [Active Item Index] > Selected menu item is redundantly announced as both "selected" and "current" due to aria-label="selected" on tickmark icon
Environment: Windows 11 / Chrome 137 / JAWS 2025 Windows 11 / Edge 136 / NVDA 2025 MacOS 15 / Safari / VoiceOver
Steps to Reproduce:
- Open the URL - https://react-magma.cengage.com/version/4.9.1/api/dropdown/
- Navigate to the Active Item Index sub component.
- Turn on a screen reader (JAWS/NVDA/VoiceOver).
- Open the dropdown and navigate to the selected menu item.
- Listen to the screen reader announcement.
Actual Result: The selected menu item is announced as both "selected" and "current". This is due to the
Refer to Screencast: https://app.screencast.com/tWLF5KiDh0dpN
Expected Result: The aria-current attribute alone is sufficient to indicate the current selection. The tickmark icon should not have an aria-label, as it introduces redundant and potentially confusing announcements.
User Impact: Screen reader users may hear duplicate or conflicting information, which can reduce clarity and lead to confusion about the current selection.
WCAG Guidelines: 1.1.1 Non-text Content (Level A)
Bug Fix Recommendation:
Remove aria-label="selected" from the
