⚓ T261431 Watchlist Expiry: add support for status role & aria controls
- ️Thu Aug 27 2020
Watchlist Expiry: add support for status role & aria controls
Closed, ResolvedPublic3 Estimated Story PointsOct 7 2020
Watchlist Expiry: add support for status role & aria controls
Closed, ResolvedPublic3 Estimated Story PointsOct 7 2020
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:
- The popup needs to have the role of “status ”
- The star icon needs to have an aria-control attribute that points to the popup
- Due Date
- Oct 7 2020, 4:00 AM
Event Timeline
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."
@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: nvda_win10_firefox.mkv2 MBDownloadI 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.
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.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits