Page MenuHomePhabricator

SelectFileInputWidget: "Close" button is not accessible through keyboard.
Closed, ResolvedPublicBUG REPORT


Steps to Reproduce:

  1. Navigate to Visual Editor
  2. Navigate till "Images and Documents " and hit enter
  3. Select a Local file from "Select a file" control and observe "Close" button present on selected file is not keyboard accessible.

Actual Results:
"Close" button is not accessible through keyboard, while navigating using Tab key.

Expected Results:
"Close" button should be accessible through keyboard.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 20 2020, 9:54 PM

It's mapped directly through Esc and intentionally out of the taborder, IIRC. Is that wrong?

Change 582224 had a related patch set uploaded (by Akinwale-microsoft; owner: Akinwale-microsoft):
[oojs/ui@master] Making close button accessible by tab key

Note that this is a "Clear" button, not "Close", this is an important distinction to me.

I think you're thinking of different buttons though. As I understand it, this bug report is about this button on the "Upload" tab:

This button is indeed not accessible and this is definitely wrong.

I think @Jdforrester-WMF / @Volker_E are thinking of this button on the "Search" tab:

It is intentionally excluded from tab navigation, since it can easily be cleared using keyboard actions on the text field already, and we thought the additional tab stop would be confusing.

@Bkudiess-msft Coming from T255318, @Akinwale-microsoft has started this discussion a few weeks ago here.
SelectFileInputWidget inherits SearchInputWidget. Nonetheless it's not wishful from my current understanding, that we want to expose the clear functionality in search to keyboard users as the text gets auto-selected as soon as I tab to the input field and we would add a step to the taborder, slowing down keyboard users there.
From my keyboard accessibility understanding, and please share if you have other insights, I'd add the clear tab-ability only to SelectFileInput and not generally to SearchInput.

For completion,

  • Google let's you tab onto the clear button
  • Bing let's you tab on any additional button on the input field, but doesn't feature a clear button
  • DuckDuckGo features a clear button, but tab ignores it

Not only the "clear" button is not accessible by keyboard it also is missing a name and control type.
The following PR focuses on resolving all those issues:

Change 605672 had a related patch set uploaded (by Bkudiess-msft; owner: Bkudiess-msft):
[oojs/ui@master] Makes search input widget indicator accessible /605672

Change 582224 abandoned by Bartosz Dziewoński:
[oojs/ui@master] Making close button accessible by tab key

Looks like /605672 is an updated version of this patch

Change 605672 merged by jenkins-bot:
[oojs/ui@master] Make search input widget's "clear" indicator accessible

I made a small change to the patch before merging it, per @Volker_E's comments, so that in SearchInputWidget the "clear" button is focusable but not tabbable (tabindex="-1"). This way it isn't present in tab order on desktop, where the text can be easily cleared using keyboard shortcuts, but it can be activated e.g. on iOS with VoiceOver, where clearing a large text input field is a slow process. In SelectFileInputWidget it is tabbable, as it's the only way to clear the file selection.

For context, these are the two widgets (as used in VisualEditor):


Thank you both for your patches @Bkudiess-msft @Akinwale-microsoft !

matmarex moved this task from Backlog to Next-up on the OOUI board.Jul 6 2020, 4:06 PM
Volker_E renamed this task from "Close" button is not accessible through keyboard. to SelectFileInputWidget: "Close" button is not accessible through keyboard..Jul 7 2020, 2:50 AM
Volker_E closed this task as Resolved.
Volker_E reassigned this task from Akinwale-microsoft to Bkudiess-msft.
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Next-up to OOUI-0.39.3 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.39.3); removed OOUI.
Volker_E removed a project: Patch-For-Review.

Change 611174 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.39.3

Change 611174 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.39.3