[Accessibility] [AXE] [Check boxes]: Aria attributes must be used as specified for the element role.

[silvalaura]

A11Y-556

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 'Check box' link under API .
4. Inspect the page and launch dev tool 'AXE' & verify.

Actual Result: The checkbox element (either native or custom role="checkbox") uses ARIA attributes not permitted for its role. This causes assistive technologies to misinterpret the element's purpose or behavior.

Expected Result: ARIA attributes must align with the specified role and be valid according to ARIA specifications. Each ARIA role has a list of supported attributes, and violating this leads to compatibility and accessibility issues.

Instances:

1. [Accessibility][Global] [Data Grid > Controlled Selectable Column]: Aria attributes must be used as specified for the element role. https://app.screencast.com/RARygPuzKTv1F

2. [Accessibility] [Indeterminate Checkbox >Inverse ]: Aria attributes must be used as specified for the element role. https://app.screencast.com/7KyTurSH20aYM

3. [Accessibility] [Global] [Tree view >Disabling items ]: Aria attributes must be used as specified for the element role. https://app.screencast.com/cEtJX0bpdb1z6

WCAG Guideline: 4.1.2 Name, Role, Value Level A

User Impact: Screen reader users may hear incorrect or missing information, leading to confusion, missed content, or incorrect interaction with the checkbox.

Recommendation: Remove aria-checked, or set it to "false" to match the real checkbox state.

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