Page MenuHomePhabricator

Watchlist Expiry: tab to dropdown after tab on watchstar
Closed, ResolvedPublic3 Estimated Story PointsOct 7 2020

Description

As a Watchlist Expiry user, I want to be able to select a temporary watch period via tab, so that the feature is accessible to users who may use the tab functionality for various reasons (including physical & mobility impairment).

Acceptance Criteria:

  • If the user has tabbed to the watch star (Vector, Timeless) or "watch" link (Monobook), the next tab should go to the dropdown once the pop-up is open.
  • The next tab (after the dropdown) will follow the previous order. In other words, the dropdown will be inserted between the star and whatever came next in the tabbing order.
  • Notes:
    • This work does not include the ability to select a specific time period via tabbing, as this functionality should be included in the browser itself.
    • If the user hits tab backward (shift-tab) while the dropdown is focused, they will select the watchlist link, according to current behavior. This is fine.
    • We should test for the ability to select a specific watch period via tabbing when the work is in QA.

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptAug 27 2020, 4:33 PM
ARamirez_WMF set the point value for this task to 3.Aug 27 2020, 5:53 PM
ARamirez_WMF moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.

Change 627373 had a related patch set uploaded (by MusikAnimal; owner: MusikAnimal):
[mediawiki/core@master] WatchlistExpiryWidget: Move focus to expiry dropdown after hitting Tab

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

ARamirez_WMF changed the subtype of this task from "Task" to "Deadline".Sep 25 2020, 9:32 PM

Change 627373 merged by jenkins-bot:
[mediawiki/core@master] WatchlistExpiryWidget: Move focus to expiry dropdown after hitting Tab

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

Change 630422 had a related patch set uploaded (by Samwilson; owner: MusikAnimal):
[mediawiki/core@REL1_35] WatchlistExpiryWidget: Move focus to expiry dropdown after hitting Tab

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

Change 630422 merged by jenkins-bot:
[mediawiki/core@REL1_35] WatchlistExpiryWidget: Move focus to expiry dropdown after hitting Tab

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

@ifried @MusikAnimal The basic use-case, being able to select an expiry period via tab, is achievable on all skins except Minerva and Mobile.

After selecting an expiry period pressing tab will return you to the watch star, as noted in the code commit: "This is because we can't be certain what elements follow #ca-unwatch [the watch star] across all skins..."

If you don't follow this use-case exactly, there is some weird behaviour:

  • If, after selecting the watch star, you don't tab to the dropdown but let the dropdown disappear, you end up in a state where the focus is "stuck" on the watch star and pressing tab does not change it. You have to press shift+tab (or click somewhere) to unstick it.
  • If, after selecting an expiry option, you don't tab back to the watch star and let the dropdown disappear, the focus remains with the expiry options. Tabbing does not return to the watch star, but continues further down the page like it did before.

On StructuredDiscussion pages, after selecting the watch star the focus also becomes "stuck" on the watch star and you cannot tab away from it.

The tabbing behaviour has not changed when using VisualEditor.

I could not get this to work on Safari or Edge. But, I was using emulators and we know there are issues with tab behaviour in emulators.

Pinging @Prtksxna because I would also like his opinion on these issues brought up.

Thanks for sharing this information, @dom_walden! I'll respond to some of the information from your comment below.

  • If we now have tab support in all skins except Minerva and mobile, I think that can be approached in a separate ticket. I have created a placeholder ticket for this work: T264485. This way, we can release the tab support accomplished in this ticket, which will help many users by providing tab support in many skins.
  • The "getting stuck" scenario (i.e., the first bulletpoint) sounds like a potentially frustrating experience for users. Maybe this should also be a separate ticket? What do you think, @MusikAnimal?
  • The scenario described in the second bulletpoint sounds okay, if I understand it correctly, since the user has completed the watch selection and can then can at least continue tabbing through the page. Curious to hear Prateek's opinion.
  • StructuredDiscussions issue: Can the "stuck" state be fixed by shift+tab, or no?

@dom_walden, is the 'tab-stuck' behaviour happening on all skins?


  • The scenario described in the second bulletpoint sounds okay, if I understand it correctly, since the user has completed the watch selection and can then can at least continue tabbing through the page. Curious to hear Prateek's opinion.

Yep, I agree, being able to tab through the page is better than the tab being 'stuck'. I am curious to know where does the next tab takes you to? Whatever comes after the star or is it based on the where the pages is scrolled to at that moment?

  • StructuredDiscussions issue: Can the "stuck" state be fixed by shift+tab, or no?

Yes, it can.

Yep, I agree, being able to tab through the page is better than the tab being 'stuck'. I am curious to know where does the next tab takes you to? Whatever comes after the star or is it based on the where the pages is scrolled to at that moment?

On beta, it takes you to the first interactable element in <div id="content">. The watch star is in <div id="mw-navigation">, and you effectively skip over the rest of the interactable elements in that div and the <footer>.

This is on Vector. Possibly other skins might be different.

I don't think scroll has an effect (not when I experiment briefly with it anyway).

@dom_walden, is the 'tab-stuck' behaviour happening on all skins?

Yes it does, apart from Minerva.

  • If we now have tab support in all skins except Minerva and mobile, I think that can be approached in a separate ticket. I have created a placeholder ticket for this work: T264485. This way, we can release the tab support accomplished in this ticket, which will help many users by providing tab support in many skins.

Thanks!

  • The "getting stuck" scenario (i.e., the first bulletpoint) sounds like a potentially frustrating experience for users. Maybe this should also be a separate ticket? What do you think, @MusikAnimal?
  • StructuredDiscussions issue: Can the "stuck" state be fixed by shift+tab, or no?

I have raised T264769, so we can move this ticket on.

  • The scenario described in the second bulletpoint sounds okay, if I understand it correctly, since the user has completed the watch selection and can then can at least continue tabbing through the page. Curious to hear Prateek's opinion.

I guess we can raise a separate ticket if needs be.

This work is now on production. As we documented related issues in separate tickets, I am closing this ticket and marking it as Done.