Page MenuHomePhabricator
Create Task
Maniphest T325020

Ensure focus returns to appropriate when pinnable elements are pinned/unpinned
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
bwang
Dec 12 2022, 8:35 PM
Tags
Referenced Files
F36819990: Screen Recording 2023-02-10 at 4.38.33 PM.mov.gif
Feb 11 2023, 12:40 AM
F36819989: Screen Recording 2023-02-10 at 4.38.55 PM.mov.gif
Feb 11 2023, 12:40 AM
F36819988: Screen Recording 2023-02-10 at 4.38.06 PM.mov.gif
Feb 11 2023, 12:40 AM
F36706666: Screen Recording 2023-02-03 at 6.20.17 PM.mov.gif
Feb 4 2023, 2:22 AM
F36706665: Screen Recording 2023-02-03 at 6.19.05 PM.mov.gif
Feb 4 2023, 2:22 AM
F36706664: Screen Recording 2023-02-03 at 6.19.26 PM.mov.gif
Feb 4 2023, 2:22 AM
Subscribers
Aklapper
bwang
Edtadros
Jdlrobson
Jdrewniak

Description

Description

Created as a result of AFB accessibility testing results T323634

HIGH When activating the Hide button, JAWS focus is taken to the top of the page.
Recommendation: JAWS focus should land on the "Show Contents" toggle
WCAG 2.1 References 
[[ https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html | 2.4.3 Focus Order (Level A) ]]

AC

  • When "move to sidebar" is clicked, focus should be placed on that pinnable element's pin/unpin toggle button
  • When "hide" is clicked, focus should be placed on either the pinnable element's dropdown trigger button, or the dropdown should be open and focus is on the pinnable element's pin/unpin toggle buttons

QA Results - Beta

ACStatusDetails
1✅T325020#8586889
2✅T325020#8586889

QA Results - Prod

ACStatusDetails
1✅T325020#8606743
2✅T325020#8606743

Details

SubjectRepoBranchLines +/-
Add setFocusToToggleButton function to pinnableElement.jsmediawiki/skins/Vectormaster+64 -6
Add setFocusToToggleButton function to pinnableElement.jsmediawiki/skins/Vectormaster+35 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

bwang created this task.Dec 12 2022, 8:35 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 12 2022, 8:35 PM
bwang mentioned this in T323634: Track AFB accessibility testing results in phab.Dec 12 2022, 10:08 PM
Jdlrobson added a project: Web-Team-Backlog.Dec 13 2022, 5:13 PM
Jdlrobson moved this task from Incoming to A11Y on the Desktop Improvements (Vector 2022) board.
ovasileva moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Dec 13 2022, 5:31 PM
ovasileva triaged this task as High priority.Dec 15 2022, 4:25 PM
ovasileva moved this task from Not ready to estimate to Current Fiscal Year on the Web-Team-Backlog board.
ovasileva added a parent task: T302073: [GOAL] Page Tools available on all wikis.
bwang added a parent task: T318373: [GOAL] Improve accessibility in Vector 2022.Dec 15 2022, 5:01 PM
ovasileva added a project: Web-Team FY2022-23 Q3 Sprint 1.Dec 19 2022, 5:28 PM
ovasileva edited projects, added Web-Team FY2022-23 Q3 Sprint 2; removed Web-Team FY2022-23 Q3 Sprint 1.Jan 9 2023, 5:35 PM
Jdlrobson subscribed.EditedJan 12 2023, 6:21 PM

Estimation summary: This will likely be a JavaScript fix which focuses the relevant elements. May require adding HTML element IDs to support this work. Jan said this pattern is called "focus trapping". However Nick and Bernard say it isn't and this is more to do with the initial focus.

LGoto set the point value for this task to 3.Jan 12 2023, 6:24 PM
LGoto moved this task from Incoming to Ready for Development on the Web-Team FY2022-23 Q3 Sprint 2 board.
Jdlrobson moved this task from Current Fiscal Year to Q3 Sprint 2 (non milestone) on the Web-Team-Backlog board.Jan 18 2023, 9:20 PM
ovasileva edited projects, added Web-Team FY2022-23 Q3 Sprint 1; removed Web-Team FY2022-23 Q3 Sprint 2.Jan 23 2023, 7:28 PM
ovasileva moved this task from Incoming to Ready for Development on the Web-Team FY2022-23 Q3 Sprint 1 board.
bwang claimed this task.Jan 25 2023, 5:51 PM
bwang moved this task from Ready for Development to Doing on the Web-Team FY2022-23 Q3 Sprint 1 board.
bwang moved this task from Doing to Ready for Signoff on the Web-Team FY2022-23 Q3 Sprint 1 board.Jan 25 2023, 10:32 PM
bwang moved this task from Ready for Signoff to Doing on the Web-Team FY2022-23 Q3 Sprint 1 board.
gerritbot added a comment.Jan 27 2023, 7:25 PM

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

[mediawiki/skins/Vector@master] Add setFocusToToggleButton function to pinnableElement.js

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

gerritbot added a project: Patch-For-Review.Jan 27 2023, 7:25 PM
bwang removed bwang as the assignee of this task.Jan 27 2023, 7:28 PM
bwang moved this task from Doing to Code Review on the Web-Team FY2022-23 Q3 Sprint 1 board.
ovasileva assigned this task to Jdrewniak.Jan 30 2023, 6:49 PM
ovasileva edited projects, added Web-Team FY2022-23 Q3 Sprint 2; removed Web-Team FY2022-23 Q3 Sprint 1.
Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team FY2022-23 Q3 Sprint 2 board.Jan 30 2023, 7:05 PM
Jdrewniak reassigned this task from Jdrewniak to Edtadros.Jan 31 2023, 4:43 PM
Jdrewniak moved this task from Code Review to QA on the Web-Team FY2022-23 Q3 Sprint 2 board.
Jdrewniak subscribed.
gerritbot added a comment.Jan 31 2023, 4:59 PM

Change 884366 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add setFocusToToggleButton function to pinnableElement.js

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.22; 2023-02-06).Jan 31 2023, 5:00 PM
Maintenance_bot removed a project: Patch-For-Review.Jan 31 2023, 5:31 PM
bwang reassigned this task from Edtadros to Jdrewniak.Feb 1 2023, 7:42 PM
bwang moved this task from QA to Code Review on the Web-Team FY2022-23 Q3 Sprint 2 board.
bwang added a subscriber: Edtadros.
gerritbot added a comment.Feb 1 2023, 8:33 PM

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

[mediawiki/skins/Vector@master] Add setFocusToToggleButton function to pinnableElement.js

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

gerritbot added a project: Patch-For-Review.Feb 1 2023, 8:33 PM
gerritbot added a comment.Feb 2 2023, 3:23 PM

Change 885878 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add setFocusToToggleButton function to pinnableElement.js

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

Maintenance_bot removed a project: Patch-For-Review.Feb 2 2023, 3:30 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team FY2022-23 Q3 Sprint 2 board.Feb 2 2023, 4:09 PM
Jdrewniak reassigned this task from Jdrewniak to Edtadros.Feb 2 2023, 5:08 PM
Edtadros moved this task from QA to QA in Production on the Web-Team FY2022-23 Q3 Sprint 2 board.Feb 4 2023, 2:22 AM

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: When "move to sidebar" is clicked, focus should be placed on that pinnable element's pin/unpin toggle button
✅ AC2:When "hide" is clicked, focus should be placed on either the pinnable element's dropdown trigger button, or the dropdown should be open and focus is on the pinnable element's pin/unpin toggle buttons

Screen Recording 2023-02-03 at 6.19.26 PM.mov.gif (972×1 px, 830 KB)

Screen Recording 2023-02-03 at 6.19.05 PM.mov.gif (972×1 px, 873 KB)

Screen Recording 2023-02-03 at 6.20.17 PM.mov.gif (972×1 px, 982 KB)

• nray mentioned this in T328053: Verify impact of Design Systems Team's Codex Update on Web properties.Feb 6 2023, 8:44 PM
Edtadros reassigned this task from Edtadros to ovasileva.Feb 11 2023, 12:40 AM
Edtadros moved this task from QA in Production to Ready for Signoff on the Web-Team FY2022-23 Q3 Sprint 2 board.

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: When "move to sidebar" is clicked, focus should be placed on that pinnable element's pin/unpin toggle button
✅ AC2:When "hide" is clicked, focus should be placed on either the pinnable element's dropdown trigger button, or the dropdown should be open and focus is on the pinnable element's pin/unpin toggle buttons

Screen Recording 2023-02-10 at 4.38.06 PM.mov.gif (986×1 px, 883 KB)

Screen Recording 2023-02-10 at 4.38.55 PM.mov.gif (986×1 px, 1005 KB)

Screen Recording 2023-02-10 at 4.38.33 PM.mov.gif (986×1 px, 1 MB)

Edtadros updated the task description. (Show Details)Feb 11 2023, 12:42 AM
ovasileva closed this task as Resolved.Feb 17 2023, 6:19 PM
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