Page MenuHomePhabricator
Create Task
Maniphest T318013

[M] [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
bwang
Sep 16 2022, 7:39 PM
Tags
Referenced Files
F35874793: Screen Recording 2022-12-18 at 2.45.19 PM.mov.gif
Dec 18 2022, 10:46 PM
F35874791: Screen Recording 2022-12-18 at 2.43.09 PM.mov.gif
Dec 18 2022, 10:46 PM
F35874789: Screen Recording 2022-12-18 at 2.41.24 PM.mov.gif
Dec 18 2022, 10:46 PM
F35874785: Screen Recording 2022-12-18 at 2.22.46 PM.mov.gif
Dec 18 2022, 10:46 PM
F35874783: Screenshot 2022-12-18 at 2.23.37 PM.png
Dec 18 2022, 10:46 PM
F35874780: Screen Recording 2022-12-18 at 2.33.35 PM.mov.gif
Dec 18 2022, 10:34 PM
F35874778: Screen Recording 2022-12-18 at 2.32.57 PM.mov.gif
Dec 18 2022, 10:34 PM
F35874774: Screen Recording 2022-12-18 at 2.31.33 PM.mov.gif
Dec 18 2022, 10:34 PM
View All 9 Files
Subscribers
Aklapper
bwang
Edtadros
Jdlrobson
• nray
ovasileva

Description

Background

Currently the collapsed TOC in the header and floating icon cases rely only on CSS. This is because the collapsing behavior on narrow viewports must work for no JS users (T307900).

In order to improve the screenreader experience for the collapsed TOC (T313447 & T314176), we can use JS to move the ToC in the DOM to the header, similar to the approach taken with the sticky header.

AC

  • No visual changes
  • The ToC is immediately accessible from the collapsed ToC button and is next to it in the DOM
  • Collapsed ToC behaves like all the other dropdowns, (i.e. can be opened via Enter or Space)
  • The existing no-js solution is preserved for no-js users below tablet viewports (i.e. the ToC automatically collapses into the page title)

[] When the TOC is collapsed (not into the sticky header) the TOC landmark is in the page header and includes the TOC button and TOC menu

Testing steps

  1. When JS is disabled, The TOC should work as it does in production across all viewports

Each of the following cases should pass the 2nd and 3rd AC above

  1. When JS is enabled, test the TOC when collapsed into the page title above tablet viewports by pressing "hide".
  2. When JS is enabled, test the TOC when collapsed automatically into the page title below tablet viewports.
  3. When JS is enabled, test the TOC when collapsed into the sticky header by pressing "hide" when the sticky header is visible.

QA Results - Beta

ACStatusDetails
1✅T318013#8476735
2✅T318013#8476735
3✅T318013#8476735
4✅T318013#8476735
5✅T318013#8476735

QA Results - Prod

ACStatusDetails
1⬜T318013#8476757
2✅T318013#8476757
3✅T318013#8476757
4✅T318013#8476757
5✅T318013#8476757

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Clean up code handling cached HTML for 3 patchesmediawiki/skins/Vectormaster+2 -84
Simplify grid styles now that grid is no longer needed to position ToCmediawiki/skins/Vectormaster+17 -29
Use JS to move the ToC into page title to fix a11y issues and simplify stylesmediawiki/skins/Vectormaster+260 -246
Page tools: Hide dropdown when not pinnedmediawiki/skins/Vectormaster+1 -1
Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composablemediawiki/skins/Vectormaster+146 -111
Use PinnableHeader in the TOC all the timemediawiki/skins/Vectormaster+68 -165
Customize query in gerrit

Related Objects
Search...

Event Timeline

bwang created this task.Sep 16 2022, 7:39 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 16 2022, 7:39 PM
bwang moved this task from Backlog to Accessibility on the Web-Team-Backlog-Archived (Needs Prioritization (Tech)) board.Sep 16 2022, 7:39 PM
Jdlrobson triaged this task as Medium priority.Sep 20 2022, 5:29 PM
bwang updated the task description. (Show Details)Sep 20 2022, 5:33 PM
bwang renamed this task from [Screenreader UX] Improve accessibility of collapsed TOC in header/floating cases for JS users to [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users .Sep 20 2022, 5:38 PM
LGoto set the point value for this task to 3.Sep 20 2022, 5:38 PM
bwang mentioned this in T314176: Landmarks in main menu and collapsed TOC are hidden when closed.Sep 20 2022, 5:41 PM
Jdlrobson moved this task from Needs triage to Triaged on the Vector (legacy skin) board.Sep 27 2022, 10:37 PM
Jdlrobson removed a project: Vector (legacy skin).Sep 27 2022, 10:43 PM
Jdlrobson moved this task from Incoming to A11Y on the Vector 2022 board.Sep 28 2022, 5:14 PM
bwang updated the task description. (Show Details)Oct 17 2022, 2:50 PM
Jdlrobson edited projects, added Web-Team-Backlog-Archived; removed Web-Team-Backlog-Archived (Needs Prioritization (Tech)).Nov 7 2022, 9:40 PM
Jdlrobson subscribed.

Scheduled for week of 14th November

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog-Archived board.Nov 9 2022, 10:20 PM
Jdlrobson edited projects, added Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2); removed Web-Team-Backlog-Archived.Nov 15 2022, 7:30 PM
Jdlrobson renamed this task from [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users to [medium] [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users .Nov 16 2022, 11:18 PM
Jdlrobson renamed this task from [medium] [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users to [M] [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users .
Jdlrobson changed the point value for this task from 3 to 1.
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 21 2022, 6:43 PM
bwang claimed this task.Nov 21 2022, 6:50 PM
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
gerritbot added a comment.Nov 22 2022, 9:58 PM

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

[mediawiki/skins/Vector@master] POC: Move ToC into page title when JS is enabled

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

gerritbot added a project: Patch-For-Review.Nov 22 2022, 9:58 PM
gerritbot added a comment.Nov 22 2022, 11:05 PM

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

[mediawiki/skins/Vector@master] POC: Move ToC into page title when JS is enabled

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

gerritbot added a comment.Nov 28 2022, 8:31 PM

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

[mediawiki/skins/Vector@master] Remove old JS and CSS relying on vector-toc-collapsed and vector-toc-not-collapsed, remove page tools feature flag from TOC

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

bwang moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 29 2022, 3:35 PM
bwang added a comment.Nov 29 2022, 3:45 PM

This is ready to review with 3 main patches,

  1. https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/859135
  2. https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/861488
  3. https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/859143
bwang removed bwang as the assignee of this task.Nov 29 2022, 6:33 PM
LGoto assigned this task to • nray.Nov 29 2022, 6:37 PM
gerritbot added a comment.Nov 30 2022, 1:25 AM

Change 859135 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use PinnableHeader in the TOC all the time

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Nov 30 2022, 2:00 AM
gerritbot added a comment.Nov 30 2022, 3:50 AM

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

[mediawiki/skins/Vector@master] Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable

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

gerritbot added a comment.Dec 1 2022, 12:17 AM

Change 862388 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Page tools: Hide dropdown when not pinned

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

gerritbot added a comment.Dec 1 2022, 12:20 AM

Change 861488 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable

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

• nray reassigned this task from • nray to bwang.Dec 2 2022, 4:11 PM
• nray moved this task from Code Review to Needs More Work on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
• nray subscribed.
bwang added a subscriber: ovasileva.EditedDec 2 2022, 4:16 PM

@ovasileva @Jdlrobson Because this patch involves several cached HTML changes, I found its to be extremely difficult to maintain complete backwards compatibility with cached HTML users without introducing a lot of additional complexity and technical debt.

Instead, I chose to handle cached HTML by essentially mirroring the behavior for no-js users. So cached HTML users will have the collapsible ToC feature disabled above the tablet viewport, and below the tablet viewport the ToC will continues to automatically collapse into the page title. All collapsed ToC cases work normally for non cached HTML users and JS users.

Considering this would be temporary (for 5 days after this patch is merged), are you ok with this?

bwang updated the task description. (Show Details)Dec 2 2022, 6:25 PM
bwang added a comment.EditedDec 2 2022, 6:27 PM
  • When the TOC is collapsed (not into the sticky header) the TOC landmark is in the page header and includes the TOC button and TOC menu

@ovasileva I also wanted to suggest that we break out this AC into a separate followup task. It would be easiest to handle that AC after all the cached HTML implications are resolved roughly on the week of 12/12 (patch). Does that work for you?

ovasileva added a comment.Dec 2 2022, 8:30 PM
In T318013#8439424, @bwang wrote:

@ovasileva @Jdlrobson Because this patch involves several cached HTML changes, I found its to be extremely difficult to maintain complete backwards compatibility with cached HTML users without introducing a lot of additional complexity and technical debt.

Instead, I chose to handle cached HTML by essentially mirroring the behavior for no-js users. So cached HTML users will have the collapsible ToC feature disabled above the tablet viewport, and below the tablet viewport the ToC will continues to automatically collapse into the page title. All collapsed ToC cases work normally for non cached HTML users and JS users.

Considering this would be temporary (for 5 days after this patch is merged), are you ok with this?

Discussed further with @bwang. This seems fine, let's go ahead. Let's make sure we QA once the regular collapsing behavior returns as well.

ovasileva added a comment.Dec 2 2022, 8:30 PM
In T318013#8439720, @bwang wrote:
  • When the TOC is collapsed (not into the sticky header) the TOC landmark is in the page header and includes the TOC button and TOC menu

@ovasileva I also wanted to suggest that we break out this AC into a separate followup task. It would be easiest to handle that AC after all the cached HTML implications are resolved roughly on the week of 12/12 (patch). Does that work for you?

Sounds good

gerritbot added a comment.Dec 2 2022, 9:12 PM

Change 862388 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Page tools: Hide dropdown when not pinned

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

bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Dec 5 2022, 7:56 PM
bwang mentioned this in T324505: Ensure ToC is always accessible via landmark region (<nav>).Dec 5 2022, 8:03 PM
bwang added a subtask: T324505: Ensure ToC is always accessible via landmark region (<nav>).
gerritbot added a comment.Dec 5 2022, 11:52 PM

Change 859143 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use JS to move the ToC into page title to fix a11y issues and simplify styles

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

• nray added a comment.Dec 6 2022, 8:07 PM

@bwang Can this be moved to QA? Is there anything more to review here?

gerritbot added a comment.Dec 6 2022, 11:41 PM

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

[mediawiki/skins/Vector@master] Simplify grid styles now that grid is no longer needed to position ToC

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

bwang removed bwang as the assignee of this task.Dec 7 2022, 12:54 AM

@nray Sorry there's this follow up task too, but if its too much I could break it out into a separate task

bwang assigned this task to • nray.Dec 7 2022, 5:38 PM
gerritbot added a comment.Dec 9 2022, 8:22 PM

Change 865185 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Simplify grid styles now that grid is no longer needed to position ToC

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.14; 2022-12-12); removed MW-1.40-notes (1.40.0-wmf.13; 2022-12-05).Dec 9 2022, 9:00 PM
gerritbot added a comment.Dec 9 2022, 10:56 PM

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

[mediawiki/skins/Vector@master] Clean up code handling cached HTML for 3 patches

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

• nray added a comment.Dec 12 2022, 9:47 PM

@bwang I just merged https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/861454. Is there anything else that needs review on this?

gerritbot added a comment.Dec 12 2022, 10:02 PM

Change 861454 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Clean up code handling cached HTML for 3 patches

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

• nray removed • nray as the assignee of this task.Dec 13 2022, 11:34 PM
• nray assigned this task to Edtadros.Dec 14 2022, 7:28 PM
• nray moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
bwang mentioned this in T323634: Track AFB accessibility testing results in phab.Dec 15 2022, 4:27 PM
bwang merged a task: T313447: [Keyboard UX] Ensure users can tab from the menu button to the menu content, for the main menu and collapsed TOC.Dec 15 2022, 4:49 PM
bwang added a parent task: T318373: [GOAL] Improve accessibility in Vector 2022.Dec 15 2022, 4:58 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Dec 15 2022, 5:59 PM
Edtadros added a comment.Dec 18 2022, 10:34 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Testing steps
✅ AC1: When JS is disabled, The TOC should work as it does in production across all viewports
✅ AC2: When JS is enabled, test the TOC when collapsed into the page title above tablet viewports by pressing "hide".

Screen Recording 2022-12-18 at 2.31.09 PM.mov.gif (818×2 px, 854 KB)

Screen Recording 2022-12-18 at 2.31.33 PM.mov.gif (818×2 px, 1 MB)

✅ AC4: When JS is enabled, test the TOC when collapsed automatically into the page title below tablet viewports.
Screen Recording 2022-12-18 at 2.32.57 PM.mov.gif (938×748 px, 772 KB)

✅ AC5: When JS is enabled, test the TOC when collapsed into the sticky header by pressing "hide" when the sticky header is visible.
Screen Recording 2022-12-18 at 2.33.35 PM.mov.gif (938×1 px, 1 MB)

Edtadros reassigned this task from Edtadros to ovasileva.Dec 18 2022, 10:46 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Testing steps
⬜ AC1: When JS is disabled, The TOC should work as it does in production across all viewports
@ovasileva, I looked at this even though it wasn't testable. With JS off, if you click on the TOC button when collapsed, and then click out to un-highlight it, the button overlaps the border of the TOC.

Screenshot 2022-12-18 at 2.23.37 PM.png (321×331 px, 35 KB)

Screen Recording 2022-12-18 at 2.22.46 PM.mov.gif (940×896 px, 2 MB)

✅ AC2: When JS is enabled, test the TOC when collapsed into the page title above tablet viewports by pressing "hide".

Screen Recording 2022-12-18 at 2.41.24 PM.mov.gif (976×1 px, 3 MB)

✅ AC4: When JS is enabled, test the TOC when collapsed automatically into the page title below tablet viewports.
Screen Recording 2022-12-18 at 2.43.09 PM.mov.gif (976×960 px, 1 MB)

✅ AC5: When JS is enabled, test the TOC when collapsed into the sticky header by pressing "hide" when the sticky header is visible.
Screen Recording 2022-12-18 at 2.45.19 PM.mov.gif (584×1 px, 1 MB)

Edtadros updated the task description. (Show Details)Dec 18 2022, 10:50 PM
ovasileva closed this task as Resolved.Dec 19 2022, 5:33 PM

The border overlap is okay! This is good to resolve.

bwang reopened subtask T324505: Ensure ToC is always accessible via landmark region (<nav>) as Open.Feb 7 2023, 4:02 PM
ovasileva closed subtask T324505: Ensure ToC is always accessible via landmark region (<nav>) as Resolved.Mar 7 2023, 12:09 AM
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