DetailsList: Accessibility - Narrator doesn't read checkmark column header in single-select mode in Edge

[eveleens]

Bug Report

• Package version(s): (fill this out) at least 6.4
• Browser and OS versions: (fill this out if relevant) Edge

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) High

Products/sites affected: (if applicable) Flow

Describe the issue:

When using Scan mode in Narrator, the Narrator doesn't read the 'select all' checkbox or any column header that has no title.
So in compact - https://developer.microsoft.com/en-us/fabric#/components/detailslist/compact , it'll skip to "Name", instead of stopping at the 'select all' header, which is technically the first column. It'll read "Name" as the second column correctly though.
In Grouped custom - https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns , it'll skip to "key" (skipping the 'select all' checkbox and the icon column).

Funnily, it does the correct thing in Chrome.

Actual behavior:

It doesn't read the columns with no text visible.

Expected behavior:

It should read something for all columns.

[eveleens]

The "select all" should be fixed in #6682, according to #6646 (number 7)

I'm not sure about what happens if you don't have a label - what the fix actually does.

[eveleens]

This bug still exists when you're in the "single" select mode in the DetailsList. A user can't take any action there, but it should still read the column header (checkboxes).

[natalieethell]

Hey @eveleens thanks for reporting this issue! I believe that this behavior is related to changes I made here: #5190. We had two options for single selection mode: make the "select all" checkbox focusable and not selectable or just make the "select all" checkbox non-focusable. We decided to make the "select all" checkbox non-focusable in single selection mode.

@betrue-final-final what do you think? Should we still keep the "select all" checkbox non-focusable? Or should we make it a new "selection" header when in single select mode?

[betrue-final-final]

The check box could be disabled, which makes it non-navigable, or hidden, which is also non-navigable.

[natalieethell]

Spoke to Ben offline and it seems like making the "select all" checkbox disabled in single selection mode is the way to go. It shouldn't be tab navigable, but you should be able to arrow to it via table navigation in scan mode.

With a fix, the screen reader (for the example here) should read out something like the following if a user arrows to the "select all" checkbox in scan mode in single selection mode:

Column 1, Toggle selection for all items, disabled

[natalieethell]

Okay, update! So it seems like the main issue you brought up (not being able to focus on the "select all" checkbox in multi-select mode) is fixed.

As for the "select all" checkbox acting as the column header for checkboxes in single selection mode:

I just confirmed that the "select all" checkbox is actually already using the disabled styling for DetailsList checks, which actually prevents the checkbox from being focused. I spoke to Ben about this more offline and it sounds like we'd like to keep it this way.

That does mean that in single selection mode, the checkboxes still have column index 1, but no focusable column header. @cschlechty what do you think, is this alright? We probably still want the checkboxes to have a column index, right?

[natalieethell]

Okay so! I spoke with @cschlechty offline and it sounds like we want the checkboxes to have a column index. In single selection mode, the "select all" checkbox should not exist. Instead, we can render something simple as the column header for those checkboxes. I should be able to get to this next week, thank you for your patience!