[Accessibility] [Global] [Datagrid] Selectable and Sortable> 'Sort Rows' button is unnecessarily marked-up as column header

[silvalaura]

A11Y-533

Environment: Windows 11/Chrome 137/JAWS 2025 Windows 11/Edge 136/NVDA 2025 Mac 15/Safari/VoiceOver

Steps to Reproduce:

1. Open the URL – https://react-magma.cengage.com/version/4.9.1/api/datagrid/#selectable_and_sortable
2. Turn on the screen reader (JAWS/NVDA/VoiceOver).
3. Navigate to the Datagrid component page from the left navigation.
4. Go to the Selectable and Sortable section.
5. Navigate to the data table and use table navigation keys (Ctrl + Alt + Arrow keys) to move from the second column (Name) to the first column (checkbox) in any row.
6. Observe the screen reader announcement for the cell in the first column.

Actual Result: While navigating from the second column to the first column within any data row, the screen reader unnecessarily announces the “Sort Rows” button as the column header for the Select Row checkbox cells. This happens because the Sort Rows control is incorrectly marked up using a

element or with role="columnheader", which semantically defines it as a header for that column.

Since the Sort Rows button is placed in the first column and is not meant to describe the contents of that column (i.e., checkboxes), the incorrect use of a column header role leads to semantic confusion. Screen readers interpret this button as the header for the checkbox cells, which is misleading and not meaningful for users.

Refer to screencast: https://app.screencast.com/znprf2bRRf7Zu

Note: This issue is reproducible for all data rows in the Selectable and Sortable variant of the Datagrid component.

Expected Result: The Sort Rows button should not be marked up as a column header if it does not semantically describe or relate to the contents of the first column.

User Impact: Incorrect use of column headers leads to semantic inaccuracy and confusion for screen reader users. They may misunderstand the purpose of the checkbox column or incorrectly assume that the “Sort Rows” button applies to checkbox selection, which it does not. This breaks the table’s logical structure and disrupts navigation and comprehension.

WCAG Guideline: 1.3.1 Info and Relationships (A)

Bug Fix Recommendation: a) Remove the th element or role="columnheader" from the Sort Rows button if it is not intended to be a column header. b) Mark the button as a standard element within a or equivalent cell context. c) Ensure all data table headers accurately reflect the column content they represent, especially for users navigating with assistive technologies.