Add functionality to display tabbing order overlay.
Categories
(DevTools :: Accessibility Tools, enhancement)
Tracking
(firefox84 fixed)
Tracking | Status | |
---|---|---|
firefox84 | --- | fixed |
People
(Reporter: yzen, Assigned: yzen)
References
(Depends on 2 open bugs, Blocks 1 open bug)
Details
(Keywords: dev-doc-complete)
Attachments
(7 files)
5.19 MB,
video/quicktime
|
Details | |
5.00 MB,
video/quicktime
|
Details | |
350.00 KB,
image/png
|
Details | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review |
We would like to provide a UX for displaying elements in their tabbing order. This would help users visualize which elements are focusable when tabbing and in what sequence.
Assignee | ||
Comment 1•4 years ago
|
||
Hi Victoria, I'm attaching a first version of a prototype of a new feature in the accessibility panel that shows a keyboard tabbing order overlay on the page. In other words, we are displaying all elements that are tabbable with the keyboard and their order index in the infobar. This is an early prototype but I would love to hear some feedback thoughts, ideas you might have about it. Thanks!
Assignee | ||
Comment 2•4 years ago
|
||
This is how Accessibility Insights from Microsoft do this for example. The tool is interactive, where the user gets the current focused element visualized as they Tab.
Assignee | ||
Comment 3•4 years ago
|
||
(In reply to Yura Zenevich [:yzen] from comment #1)
Created attachment 9168547 [details]
Prototype v1Hi Victoria, I'm attaching a first version of a prototype of a new feature in the accessibility panel that shows a keyboard tabbing order overlay on the page. In other words, we are displaying all elements that are tabbable with the keyboard and their order index in the infobar. This is an early prototype but I would love to hear some feedback thoughts, ideas you might have about it. Thanks!
Duh, forgot to CC:
Assignee | ||
Comment 4•4 years ago
|
||
This is how another add-on is doing it, similar to what this preview does.
Assignee | ||
Comment 5•4 years ago
|
||
Some feedback gathered on a11y slack:
-
What a great idea! It may be that I'm looking at the video at a smaller size, but I found the pointer direction not to be very obvious when it is clustered around other pointers
-
This is so good! Wondering if it’d be helpful to show the stylesheet’s :focus styles, instead of a generic black outline? Maybe that’s beside the point of this feature though. Nice work
-
Neat, what happens if there's a dynamic update that changes the tab order, such as if the waffle icon on Google was clicked?
-
Other questions: What does it look like if an element in the tab order is behind another element (for example, a body link temporarily covered by a navigation drawer or even two buttons the same size and position layered on top of each other)? What does it look like when an element in the tab order is outside the viewport?
Comment 6•4 years ago
|
||
Hi Yura, what you came up with is looking great!! I like that the numbered tooltips don't cover up the click targets.
I think I actually like the black focus outline since normal :focus styles can be pretty subtle. This just provides BLAMO-immediate-100% clarity as to where the focus areas are.
Regarding these questions:
What does it look like if an element in the tab order is behind another element
What does it look like when an element in the tab order is outside the viewport?
I think grid has solved these, at least the second one, so we can borrow some ideas :)
Would you like to tweet this demo so that @firefoxdevtools can RT for more feedback?
Comment 7•4 years ago
•
|
||
What does it look like when an element in the tab order is outside the viewport?
I think grid has solved these, at least the second one, so we can borrow some ideas :)
CCing gl who might remember one of the examples of a grid that was flush with the page. The labels were inset but pointed outwards.
Assignee | ||
Comment 8•4 years ago
|
||
Hi Victoria, I added a bit more polish to the tool, I have not done the grid enhancement just yet, but perhaps you would have some time to give ux feedback for the tool? I have the try build here: https://treeherder.mozilla.org/#/jobs?repo=try&revision=326a59b7fc5157dfb2604a1b162e33dba313e5c6
Assignee | ||
Comment 9•4 years ago
|
||
(In reply to Yura Zenevich [:yzen] from comment #8)
Hi Victoria, I added a bit more polish to the tool, I have not done the grid enhancement just yet, but perhaps you would have some time to give ux feedback for the tool? I have the try build here: https://treeherder.mozilla.org/#/jobs?repo=try&revision=326a59b7fc5157dfb2604a1b162e33dba313e5c6
In this version, the inforbar is similar to the box model infobar, except that it gets rendered on the edge only for the out of view-port elements.
Updated•4 years ago
|
Assignee | ||
Comment 10•4 years ago
|
||
Assignee | ||
Comment 11•4 years ago
|
||
Depends on D94923
Assignee | ||
Comment 12•4 years ago
|
||
Depends on D94924
Assignee | ||
Comment 13•4 years ago
|
||
Depends on D94925
Comment 14•4 years ago
|
||
Comment 16•4 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/0597c1b90731
https://hg.mozilla.org/mozilla-central/rev/31ab1181b082
https://hg.mozilla.org/mozilla-central/rev/9112e35d9dd4
https://hg.mozilla.org/mozilla-central/rev/19610d9a0b86
Assignee | ||
Updated•4 years ago
|
Comment 17•4 years ago
|
||
I'm just testing this feature to document for FF84 release (on FF85 nightly). Two questions:
- To left of the the Show Tabbing Order checkbox there is a little blue "beta" icon. Will that be present on FF84 when this is released?
- Is it a known issue that the tool does not redraw/regenerate the tab order icons when you open and close twisties/toggles on the page? i.e. The https://www.mozilla.org/en-US/privacy/firefox/ has expander toggles with titles like "Measure and support our marketing". If you open the toggle when the checkbox is selected the view does not draw the new tabbing order - you have to check and uncheck the checkbox. Ditto when you close the toggle.
Comment 18•4 years ago
|
||
PS Will this also be aware of the tab behaviour of Keyboard-navigable JavaScript widgets?
Assignee | ||
Comment 19•4 years ago
|
||
(In reply to Hamish Willee from comment #17)
I'm just testing this feature to document for FF84 release (on FF85 nightly). Two questions:
- To left of the the Show Tabbing Order checkbox there is a little blue "beta" icon. Will that be present on FF84 when this is released?
Yes Beta flag will be there. We generally have it for a while (multiple releases) to make sure we address as many potential issues that might get reported as possible.
- Is it a known issue that the tool does not redraw/regenerate the tab order icons when you open and close twisties/toggles on the page? i.e. The https://www.mozilla.org/en-US/privacy/firefox/ has expander toggles with titles like "Measure and support our marketing". If you open the toggle when the checkbox is selected the view does not draw the new tabbing order - you have to check and uncheck the checkbox. Ditto when you close the toggle.
Yes, the tool is not dynamic, It will report all focusable elements at the time when it is activated.
Assignee | ||
Comment 20•4 years ago
|
||
(In reply to Hamish Willee from comment #18)
PS Will this also be aware of the tab behaviour of Keyboard-navigable JavaScript widgets?
Somewhat related to point 2 in comment 17, if keyboard navigation is done where focus switches as it would typically when tabbing, then yes, if the widget implements custom keyboard handling then likely no. I think there would be not as much overlap between users that want to know tabbing order on a page vs users that are testing keyboard implementation of a particular widget.
Assignee | ||
Updated•4 years ago
|
Comment 21•4 years ago
|
||
FYI only:
- Docs for this feature have been added (in preparation for FF84 release) in: Firefox Developer Tools > Accessibility Inspector > Show tabbing order.
- More info on what was done here: https://github.com/mdn/sprints/issues/3908#issuecomment-728565606
Assignee | ||
Comment 22•4 years ago
•
|
||
(In reply to Hamish Willee from comment #21)
FYI only:
- Docs for this feature have been added (in preparation for FF84 release) in: Firefox Developer Tools > Accessibility Inspector > Show tabbing order.
- More info on what was done here: https://github.com/mdn/sprints/issues/3908#issuecomment-728565606
Hi Hamish, thanks a lot for the docs. I only have one observation: we have a sentence that says All selectable items have a numbered marker and the currently selected item is highlighted in a different colour.
where I think selectable
and selected
might be misleading since we really mean focusable
and focused
(for example users of assistive technology differentiate between selected/selectable states and focused/focusable).
Comment 23•4 years ago
|
||
Thanks very much Yura. I have modified that text to say focusable/focussed (I hadn't considered the difference).
Updated•4 years ago
|
Description
•