1850953 - Help to visualize relationship between elements when some aria attributes are hovered

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Calixte Denizet (:calixte)]

In the pdf.js context, we're trying to improve accessibility.
Some aria attributes like aria-owns or aria-controls should contain some element ids in order to create a relationship between elements.
So it'd be nice to help to visualize those relationships.
A basic thing could be to just highlight the elements corresponding to the ids contained in aria-owns when the attribute is hovered in the DOM tree.
An other possibility could be to highlight the source element and the target ones with different colors or in drawing some arrows between them.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Bug 1546003 added a link on those attribute, so you should be able to ctrl+click (maybe cmd+click on OSX) to select the corresponding element.
I agree that this is not very discoverable and we could do something to make it more usable.

Comment 2

[Calixte Denizet (:calixte)]

For example, it'd be helpful to help to debug: bug 1850860.
We've a structure tree which represents the structure of the pdf (search for .structTree) and the leafs point on some elements in the text layer (.textLayer). The text layer is useful for screen readers or to highlight some text or to search some text.
So it'd be helpful to have an easy way to see the link between elements in the structTree and the mapped ones in the text layer.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

We have Bug 1159519 to implement some kind of node-selection history, which would be helpful in a lot of ways.
We also discussed maybe having a "go back" badge/button next to the newly selected element to quickly go back to the node we jumped from (similar to what footnotes often offers on the web)
Calixte was also interested in having an highlighter for the "target" element when hovering the attribute, although it might not be helpful if the target element is outside the visible viewport.

Comment 4

[Julian Descottes [:jdescottes]]

We could add the "crosshair" icon next to the links to help with the discovery of the "jump" feature, and which would also highlight the node when hovering.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1850953 - [devtools] Add icon to select node next to idref idreflist attributes in markup view. r=#devtools-reviewers.

This will make the underlying feature more discoverable
and should help people doing accessibility work.
We take this as an opportunity to export attribute types
from node-attribute-parser.js so we can do proper check.
Since we're adding a click event listener in markup container,
to handle keyboard activation, we take care of all the
event listeners lifecycle with an abort controller.
The existing test on aria attributes is updated to also
test the button. This should be enough as this cover both
idref and idreflist cases.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/374222e4595c
[devtools] Add icon to select node next to idref idreflist attributes in markup view. r=devtools-reviewers,bomsy.

Comment 7

[Norisz Fay [:noriszfay]]

Backed out for causing dt failures on browser_markup_links_aria_attributes.js

Backout link

Push with failures

Failure log

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a222d43042fc
[devtools] Add icon to select node next to idref idreflist attributes in markup view. r=devtools-reviewers,bomsy.

Comment 9

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/a222d43042fc