Page MenuHomePhabricator

Watchlist Expiry: add support for status role & aria controls
Closed, ResolvedPublic3 Estimated Story PointsOct 7 2020

Description

Background: The watchlist popup’s element isn’t added right after the star icon (in the DOM of the page). This means that there are several elements that the user has to tab through (in 5 seconds) to be able to reach the dropdown. This is not good for keyboard accessibility.

My first thought was that we should treat the popup as a non-modal dialog or alert. This meant we would move the focus to it as soon as the popup appears on the screen. But, this would mean that we wont close the popup till it has focus. And so, unless the user tabbed out of it, the popup would always be visible. This isn’t what we want.

It seems what we are looking for is the status role. Unlike dialogs, statuses need not be given focus, and since they inherit the aria-live and aria-flowto (see guideline) role the screen readers announce their presence to the user regardless of focus. We will however need to make sure to add aria-controls to the star and point it to the popup so that the users know that those two are related.

Acceptance Criteria:

Event Timeline

ARamirez_WMF set the point value for this task to 3.Aug 27 2020, 6:01 PM

Change 625774 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/core@master] Add ARIA attributes to watchlink and its notification

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

ARamirez_WMF changed the subtype of this task from "Task" to "Deadline".

We haven't been able to confirm that the changes in the above patch actually make the notification obvious and accessible to screen readers, but they do follow the spec and don't seem to break anything.

I've reached out to a Wikimedian I know who uses JAWS and NVDA, and asked him to test the above patch. He said it was usable, because it reads out 'watched' or 'unwatched' and that's all he wants β€” but it didn't give any indication that there was a notification of any sort, let alone that there was a dropdown field in it.

MDN says that it is "Not known if the aria-controls aspect of live regions is implemented in current ATs, or which."

Change 625774 merged by jenkins-bot:
[mediawiki/core@master] Add ARIA attributes to watchlink and its notification

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

Change 630802 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/core@REL1_35] Add ARIA attributes to watchlink and its notification

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

dom_walden added a subscriber: dom_walden.

@ifried I guess the work in the ticket has been done, so moving on.

We might want to raise follow up tasks, based on the discussion in Slack:

I managed to get the NVDA screenreader working on Windows 10 (it was pretty straight forward luckily). I think I can report what Graham reported, although it can be a little unpredictable. I attach a short example of what you might hear when using it. If I tab to the expiry dropdown it does tell me the options, but there probably isn't enough time to actually make a selection before it goes away. A similar thing happens on Orca. The sound might be a little glitchy, but hopefully not too bad.

Thanks, @dom_walden! I have raised the issues, as described in the comment above, in a separate ticket: T264773

This has been released to production, and we haven't received any reported issues. While we do not know to what extent this work fully supports screenreader users, we will be able to monitor this topic if and when future tickets come in. As this work has been released, I'm marking as Done.

Change 630802 merged by jenkins-bot:
[mediawiki/core@REL1_35] Add ARIA attributes to watchlink and its notification

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