Page MenuHomePhabricator

Table: Improve keyboard navigation to row selection checkboxes in Firefox
Closed, ResolvedPublic

Description

When row selection is enabled, a series of Checkboxes is added to the first column in the table, one for selecting all rows and one per row.

When using VoiceOver in Firefox, it takes several presses of the modifier keys + right arrow (7 in total in case of the heading checkbox) to move from cells with checkboxes to their adjacent cells. The issue can also be reproduced in Safari and Chrome, but there only up to 2 extra steps are needed.

check-nav-ff.gif (456×784 px, 67 KB)


Acceptance criteria

  • Navigation in VoiceOver in Firefox of the row selection checkboxes is improved.
  • Update the value of the select row label prop to something like "select row X of Y".

Follow-up task

T365756

Findings

A. In Safari and Chrome, when you use the modifier keys + right arrow on the Table demo with selection (and with selection and sort), it takes two presses to move from a table cell with a checkbox input to the next table cell or table header.

  1. “Select all rows, unchecked, checkbox, column 1 of 4.”
  2. “Select all rows” ... “You are currently in a text element inside a cell"

B. In Firefox, when you use the modifier keys + right arrow on the Table demo with selection (and with selection and sort), it takes many presses to move from a table cell with a checkbox input to the next table cell or table header.

  1. “Select all rows, unchecked, checkbox, column 1 of 4.”
  2. “Select all rows, unchecked, checkbox.”
  3. “Select all rows, group.”
  4. “Select all rows, clickable.”
  5. “end of, Select all rows, group.”

Findings unrelated to this task:
C. In Safari and Chrome, when you use the modifier keys + left arrow from a table cell with a link to a table cell with a checkbox input, the screen reader provides redundant information.

  • “Select all rows and Select all rows Select row, column 1 of 4.”

D. In Firefox, when you use the modifier keys + right arrow on the Table demo with selection (and with selection and sort), it takes two presses to move from the "Disconnect" button to the next table cell. The screen reader reads aloud:

  1. “Disconnect button”
  2. “Disconnect”

E. In Safari, when you use the modifier keys + right arrow or down arrow on the Table demo with selection and sort, the screen reader omits the <td> elements in the last table row (<tr>).

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@Sarai-WMDE This seems to be how it works for any checkbox group in Firefox...try using VO+arrow to navigate this APG example. I'm not sure there's anything we can do about the number of keystrokes it takes to move past the checkboxes.

One thing I did notice is that if you're in the row selection column and use the up/down arrows, the fact that the labels for all the row checkboxes are the same is confusing ("select row"). Should we change it to "select row x of y" or something else?

It seems that the extra keystrokes are required due to the presence of the checkbox label div and nested content, which is visually hidden but detectable by screen readers. I wonder if we could apply aria-hidden to the cdx-label cdx-label--visually-hidden cdx-checkbox__label div in the context of the table. Could there be any unwanted side effects of doing this? It would improve keyboard navigation significantly (keystrokes are reduced to two in case of the bulk selection checkbox). Here's a short clip, using VO on Firefox:

aria-hidden-nav.gif (666×1 px, 233 KB)

One thing I did notice is that if you're in the row selection column and use the up/down arrows, the fact that the labels for all the row checkboxes are the same is confusing ("select row"). Should we change it to "select row x of y" or something else?

That's a great idea. Indicating "select row n of n" would be really helpful and reduce having to move back and forth between column to verify the position.

Thanks @Sarai-WMDE! It does look like what you're suggesting would work well - the input is already tied to the label via its for attribute, so the label gets read, but the visible label is ignored. Might be worth checking in with @Volker_E to see if AFB did any testing with the Checkbox component - did they mention anything like what Sarai has identified in this task when testing Checkbox groups?

If we all agree that this change is helpful, we'll want to update it in the Checkbox component (and possibly the Radio and ToggleSwitch components as well). IMO, that should be a separate task since it is not related to the Table component.

Perhaps we can make adding "select row X of Y" the single acceptance criteria for this task then?

lwatson changed the task status from Open to In Progress.May 22 2024, 4:42 PM
lwatson updated the task description. (Show Details)

Change #1035048 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Table: Improve keyboard navigation to row selection checkboxes

https://gerrit.wikimedia.org/r/1035048

Change #1035539 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Table: update checkbox label in CSS-only version

https://gerrit.wikimedia.org/r/1035539

Change #1035048 merged by jenkins-bot:

[design/codex@main] Table: update select row label

https://gerrit.wikimedia.org/r/1035048

Change #1035539 merged by jenkins-bot:

[design/codex@main] Table: update checkbox label in CSS-only version

https://gerrit.wikimedia.org/r/1035539

Change #1037103 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v1.6.0 to v1.6.1

https://gerrit.wikimedia.org/r/1037103

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/ce0a74a0e6/w

Change #1037103 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.6.0 to v1.6.1

https://gerrit.wikimedia.org/r/1037103

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/ce0a74a0e6/w/