Fluentui: DetailsList - in SelectionMode.none - able to select row using mouse, unable to using keyboard

Created on 29 Mar 2019  路  8Comments  路  Source: microsoft/fluentui

Codepen demonstrating the issue

Turn off modal selection in: https://developer.microsoft.com/en-us/fabric#/components/detailslist

Actual behavior:

You can use your mouse to make a row selection. You can NOT push space or enter to make a row selection.

Expected behavior:

Unclear, but it should be consistent.

I have a case where I'd like to be able to select without showing the checkmarks, so what currently exists works for me for mouse users. However, it doesn't work for keyboard users.

Though, I presume the fact that mouse users can make a selection is a bug when we explicitly set the selectionMode to none.

Documentation describing expected behavior

Accessibility DetailsList Type

All 8 comments

I can confirm this behavior is occurring.

@betrue-final-final, is it a bug that DetailsList allows for item selection via "Click" while modal selection is set to "none"? The behavior is exhibited at https://developer.microsoft.com/en-us/fabric#/components/detailslist.

A keyboard user MUST be able to use space to select an item. This is definitely a bug.

After chatting with @betrue-final-final, it seems like we at least want parity with keyboard & mouse in the SelectionMode === None case.

Currently in that case, users can only "click" and select _a single_ item. Keyboard users cannot. We'll need to chat with @ThomasMichon to see do we either:

1) Disable single selection entirely in this mode

OR

2) Keep "click" behavior and allow for SPACE to perform the same interaction.

The naming makes me think we want to remove the behavior, but we'd need to see what the OneDrive / SharePoint implications are.

When SelectonMode === None, selection should not work, period.

When SelectonMode === None, selection should not work, period.

I have a fix for this, just need to add tests and communicate the change.

@eveleens, I've provided a potential solution and alternative in https://github.com/OfficeDev/office-ui-fabric-react/pull/8605. Thanks for raising awareness to this issue.

The scope of the proposed fix impacts SelectionZone across OUFR cc: @betrue-final-final @dzearing

:tada:This issue was addressed in #8605, which has now been successfully released as [email protected].:tada:

Handy links:

Was this page helpful?
0 / 5 - 0 ratings