Page MenuHomePhabricator

WVUI Search suggestions should have `aria-selected` attribute
Open, MediumPublic3 Estimated Story Points

Description

According to the w3 combobox accessibility best practices, combobox suggestions should have a aria-selected="true" attribute on the li element when a suggestion is visually highlighted (e.g. when a user navigates through the suggestions with the up/down arrow keys).

However, WVUI search suggestions are currently missing this attribute.

Screen Shot 2021-07-30 at 11.05.30 AM.png (1×2 px, 637 KB)

Acceptance Criteria

  • When a search suggestion is highlighted by navigation with the up/down arrow keys, the aria-selected="true" appears on the li element.
  • When a search suggestion is not highlighted, aria-selected="true" should not appear on the li element. It should also not appear when the user hovers over the search suggestion using their mouse per T287775#7281906.

Event Timeline

Open question: Should the aria-selected="true" only appear when a suggestion is highlighted through keyboard navigation or should it also appear when the user hovers over the suggestion with their mouse?

I believe it should be on keyboard navigation only, or at least thats how the W3 examples work.

I did some quick testing, and I believe the current behavior in VO/Safari is that VO doesn't read the listbox options when navigating by keyboard, and I believe using aria-selected should fix that. What do you think about adding this to QA or as an AC?

@bwang Thanks for looking into it! I updated the AC

Change 721369 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[wvui@master] [TypeaheadSearch] Use aria-selected in suggestion list

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