[AOM] Element Reflection for the Accessibility Pane
This is a small change for supporting aria relationships set via the IDL
interface on element. This requires special casing because we can't rely
on the value of the content attribute, as depending on the scope of the
set elements, the content attribute may be set to the empty string. In
this case we can just also check if any related nodes were supplied via
the protocol and construct the list from these.
Spec:https://whatpr.org/html/3917/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes:element
Bug:981423
Change-Id: I81130ae5be94f74c0ba82b9f6709011b137f610f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1966871
Reviewed-by: Mathias Bynens <[email protected]>
Reviewed-by: Alice Boxhall <[email protected]>
Commit-Queue: Meredith Lane <[email protected]>
diff --git a/front_end/accessibility/AccessibilityNodeView.js b/front_end/accessibility/AccessibilityNodeView.js
index 8f88d26..ec53b37 100644
--- a/front_end/accessibility/AccessibilityNodeView.js
+++ b/front_end/accessibility/AccessibilityNodeView.js
@@ -339,10 +339,9 @@
/**
* @param {!Protocol.Accessibility.AXRelatedNode} relatedNode
- * @param {number} index
* @param {string} idref
*/
- appendRelatedNodeWithIdref(relatedNode, index, idref) {
+ appendRelatedNodeWithIdref(relatedNode, idref) {
const deferredNode =
new SDK.DeferredDOMNode(this._axNode.accessibilityModel().target(), relatedNode.backendDOMNodeId);
const nodeTreeElement = new AXRelatedNodeSourceTreeElement({deferredNode: deferredNode, idref: idref}, relatedNode);
@@ -353,28 +352,36 @@
* @param {!Protocol.Accessibility.AXValue} value
*/
appendIDRefValueElement(value) {
- const relatedNodes = value.relatedNodes;
+ if (value.value === null) {
+ return;
+ }
+
+ const relatedNodes = value.relatedNodes || [];
+
+ // Content attribute is empty, but if the relationship was set via the IDL
+ // then there may be related nodes.
+ if (value.value === '') {
+ for (const node of relatedNodes) {
+ const idref = node.idref || '';
+ this.appendRelatedNodeWithIdref(node, idref);
+ }
+ return;
+ }
const idrefs = value.value.trim().split(/\s+/);
- if (idrefs.length === 1) {
- const idref = idrefs[0];
+ for (const idref of idrefs) {
const matchingNode = relatedNodes.find(node => node.idref === idref);
- if (matchingNode) {
- this.appendRelatedNodeWithIdref(matchingNode, 0, idref);
- } else {
- this.listItemElement.appendChild(new AXRelatedNodeElement({idref: idref}).render());
- }
- } else {
+ // If there is exactly one related node, it is rendered on the same line
+ // of the label. If there are more, they are each rendered on their own
+ // line below the label.
// TODO(aboxhall): exclamation mark if not idreflist type
- for (let i = 0; i < idrefs.length; ++i) {
- const idref = idrefs[i];
- const matchingNode = relatedNodes.find(node => node.idref === idref);
- if (matchingNode) {
- this.appendRelatedNodeWithIdref(matchingNode, i, idref);
- } else {
- this.appendChild(new AXRelatedNodeSourceTreeElement({idref: idref}));
- }
+ if (matchingNode) {
+ this.appendRelatedNodeWithIdref(matchingNode, idref);
+ } else if (idrefs.length === 1) {
+ this.listItemElement.appendChild(new Accessibility.AXRelatedNodeElement({idref: idref}).render());
+ } else {
+ this.appendChild(new Accessibility.AXRelatedNodeSourceTreeElement({idref: idref}));
}
}
}
