Clarity: Clarity DataGrid Accessibility Issue with sortable column

[kalpeshhpatel]

Describe the bug

Hi team, looks like there is some accessibility issue with DataGrid when sorting is enabled for columns. The screen-reader, Voiceover for Mac, reads column number in-correct. For instance, if I have 4 column in data grid, and sorting is enabled on it, the column count is read as 5 in Voiceover screen-reader.
Initially it reads correct number of columns, but as you navigate between grid cells, the column count somehow increases by 1 and then it continues to read in-correct column count.

How to reproduce

Stackblitz: https://clarity-light-theme-v2-jq2vzt.stackblitz.io/

Steps to reproduce the behavior:

1. Go to 'https://clarity-light-theme-v2-jq2vzt.stackblitz.io/'
2. Use the VoiceOver screen-reader tool.
3. Use ctrl + option and arrow keys to navigate to table cells.
4. Screen-reader reads the column as 5, even though we have 4 columns in the grid.

Expected behavior

It should read column count as 4

Versions

App

• Angular: 8
• Node: 10
• Clarity: 2

Device:

• Type: MacBook
• OS: MacOs: 10.14.3
• Browser: Chrome

Additional notes

This issue breaks accessibility testing for most of the data grid.

[hippee-lee]

I tested this in Safari+VoiceOver (The primary macOS SR+Browser combination) but could not re-create it with sorting off or with sorting on for each of the columns.

Is there any more info you can provide for re-creating this behavior?

[kalpeshhpatel]

I tested this in Safari+VoiceOver (The primary macOS SR+Browser combination) but could not re-create it with sorting off or with sorting on for each of the columns.

Is there any more info you can provide for re-creating this behavior?

Can you please check it with Chrome. It is reproducible with it.

Thanks

[hippee-lee]

I'll mark this as a bug. FYI -

The following are the primary combinations that we focus on when addressing issues on the Windows and macOS platforms:

• NVDA + Firefox (Windows)
• VoiceOver + Safari (Apple)

[mathisscott]

Note that our support matrix for accessibility comes directly from our accessibility team. There are way too many combinations of screen readers and browsers for us to validate across all of them for every bug fix or feature.

So while we care about those issues that fall outside of our support matrix, we can't prioritize them.

[Jinnie]

I am unable to open the provided stackblitz example.
When testing with our website examples I only see that focus indicator may still be on the sort button, while the SR-cursor is in the adjacent column's resize handler. It is still reading the correct content for the reported column number.
Though it may be confusing when mixing both scenarios - blind and sighted user, it works correctly in separation.
Another idea is that if the grid is selectable, then the first column with the checkboxes/radios is also taken into account, though its column heading is empty.
With these notes, I'm closing as unable to reproduce.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.