[Accessibility] [AXE] [Select > Disabled items/Multi select] : Interactive controls are nested, causing screen reader and focus issues

[silvalaura]

A11Y-569

Platform: Windows 11 / Chrome

Steps to reproduce:

1. Open the URL: https://react-magma.cengage.com/version/4.9.1
2. Now Navigate to side navigation and expand 'Components' button.
3. Now activate 'Select' link under API
4. Now navigate to 'Disabled items' section, Inspect the page,
5. Launch Axe dev tool and verify.

Actual Result:

1. Element with tabindex="-1" and aria-hidden="true" is still exposed to assistive technologies.
2. Screen readers may still announce the hidden element.
3. Focusable elements remain in the accessibility tree, despite being marked as hidden.

Expected Result:

1. Hidden, non-interactive elements should be fully removed from the accessibility tree.
2. Screen readers and keyboard users should not be able to focus or access such elements.
3. Focusable elements within interactive containers must be explicitly excluded using proper patterns.

Instances:

1. [Accessibility] [AXE] [Charts] : Interactive controls are nested, causing screen reader and focus issues.   https://app.screencast.com/PayMEBoEAB67V

WCAG Guideline: 4.1.2 Name, Role, Value Level A

User Impact: Users may encounter unexpected or invisible focus targets. Screen readers may announce elements meant to be hidden, causing confusion and disorientation. Leads to non-deterministic navigation and interaction, especially for modal dialogs, dropdowns, and dynamic UIs.

Recommendation: To ensure hidden elements are fully removed from the accessibility tree and focus flow:

1. Do NOT use tabindex="-1" alone to hide elements from assistive technologies.
2. Remove elements entirely from the DOM if not in use, or use hidden visibility patterns correctly.

Screencast: https://app.screencast.com/xNy6b2bYRyHQN