[Accessibility] [Global] [Datagrid] Basic Usage> Screen reader automatically starts reading updated table content upon changing the value of 'Rows per page' combo-box

[silvalaura]

A11Y-528

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/tooltip/
2. Turn on the screen reader (JAWS/NVDA/VoiceOver).
3. Navigate to the Datagrid component page from the left navigation.
4. Navigate to the Basic Usage section.
5. Use TAB to move to the Rows per page combo-box and change its value (e.g., from 10 to 20).
6. Observe the screen reader behavior after the update.

Actual Result: Upon changing the value of the Rows per page combo-box, the screen reader automatically begins reading the entire updated table content without any user-initiated navigation. This unexpected and verbose behavior occurs immediately after the value is changed, even though focus remains on the combo-box. The screen reader starts reading row-by-row, often mid-sentence, disrupting the user’s flow and causing cognitive overload. This behavior is especially problematic when the table contains a large number of rows, making it difficult for screen reader users to understand the structure or regain control of navigation.

Refer to screencast: https://app.screencast.com/95HSUzEslgK8H

Note: This issue is reproducible for all Datagrid variants that use the Rows per page combo-box.

Expected Result: Screen readers should not automatically read the updated table content. Instead, the updated pagination status such as "Showing 1 - 20 of 25" should be automatically announced, allowing users to manually explore the table as needed.

User Impact: Uncontrolled verbosity can disorient screen reader users and disrupt their navigation flow. Users may miss important structural context or find it difficult to regain their place in the page.

WCAG Guideline: 3.2.2 On Input (A)

Bug Fix Recommendation:

a) Prevent automatic reading of the entire table by avoiding programmatic DOM focus shifts or use of live regions that contain the full table content. b) Use an aria-live="polite" region to automatically announce the updated pagination status i.e. "Showing 1 - 20 of 25" after the change. c) Allow users to explore the updated content at their own pace.