[DevTools] Add basic a11y info to the inspector overlay

This change adds the accessible name, role and whether an element is focusable using keyboard to the overlay shown when you inspect elements. The attributes show up together with the contrast information at the bottom part of the overlay in a new section called Accessibility. Screenshot: https://i.imgur.com/Ax5nkeX.png Design doc: https://goo.gle/devtools-a11y-popover Fixed: 1040025 Change-Id: I411a79d2fedd04680f2efc0237f6c8272d922893 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2149356Reviewed-by: Peter Marshall <petermarshall@chromium.org> Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Cr-Commit-Position: refs/heads/master@{#759998}

[DevTools] Add basic a11y info to the inspector overlay
This change adds the accessible name, role and whether an element is focusable using keyboard to the overlay shown when you inspect elements. The attributes show up together with the contrast information at the bottom part of the overlay in a new section called Accessibility. Screenshot: https://i.imgur.com/Ax5nkeX.png Design doc: https://goo.gle/devtools-a11y-popover Fixed: 1040025 Change-Id: I411a79d2fedd04680f2efc0237f6c8272d922893 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2149356Reviewed-by: Peter Marshall <petermarshall@chromium.org> Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Cr-Commit-Position: refs/heads/master@{#759998}
380171a4 · Alex Rudenko · Commit Bot · e8ad4f54 · 380171a4 · 380171a4
Commit 380171a4 authored Apr 17, 2020 by Alex Rudenko Committed by Commit Bot Apr 17, 2020
21 changed files
--- a/third_party/blink/renderer/core/inspector/inspect_tool_highlight.html
+++ b/third_party/blink/renderer/core/inspector/inspect_tool_highlight.html
@@ -87,6 +87,20 @@ body {
    visibility: var(--arrow-visibility);
 }
+.element-info-section {
+    margin-top: 12px;
+    margin-bottom: 6px;
+}
+.section-name {
+    color: #333;
+    font-weight: 500;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    line-height: 12px;
+}
 .element-info {
    display: flex;
    flex-direction: column;
@@ -109,13 +123,20 @@ body {
    line-height: 19px;
 }
-.element-info-contrast-row {
+.separator-container {
+    display: flex;
+    align-items: center;
+    flex: auto;
+    margin-left: 7px;
+}
+.separator {
    border-top: 1px solid #ddd;
-    padding-top: 5px;
+    width: 100%;
-    margin-top: 5px;
 }
 .element-info-name {
+    flex-shrink: 0;
    color: #666;
 }
@@ -132,11 +153,21 @@ body {
 .element-info-value-contrast {
    display: flex;
+    align-items: center;
    text-align: right;
    color: rgb(48, 57, 66);
    margin-left: 10px;
 }
+.element-info-value-contrast .a11y-icon {
+    margin-left: 8px;
+}
+.element-info-value-icon {
+    display: flex;
+    align-items: center;
+}
 .element-info-value-text {
    text-align: right;
    color: rgb(48, 57, 66);
@@ -205,16 +236,20 @@ body {
 .a11y-icon {
    width: 16px;
    height: 16px;
-    margin-left: 2px;
    background-repeat: no-repeat;
+    display: inline-block;
+}
+.a11y-icon-not-ok {
+    background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m9 1.5c-4.14 0-7.5 3.36-7.5 7.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5-3.36-7.5-7.5-7.5zm0 13.5c-3.315 0-6-2.685-6-6 0-1.3875.4725-2.6625 1.2675-3.675l8.4075 8.4075c-1.0125.795-2.2875 1.2675-3.675 1.2675zm4.7325-2.325-8.4075-8.4075c1.0125-.795 2.2875-1.2675 3.675-1.2675 3.315 0 6 2.685 6 6 0 1.3875-.4725 2.6625-1.2675 3.675z" fill="%239e9e9e"/></svg>');
 }
 .a11y-icon-warning {
-    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 18 18' fill='%23ffc107'%3e%3cpath d='M0 0h18v18H0z' fill='none'/%3e%3cpath d='M.5 16h17L9 1 .5 16zm9.5-2H8v-2h2v2zm0-3H8V7h2v4z'/%3e%3c/svg%3e ");
+    background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m8.25 11.25h1.5v1.5h-1.5zm0-6h1.5v4.5h-1.5zm.7425-3.75c-4.14 0-7.4925 3.36-7.4925 7.5s3.3525 7.5 7.4925 7.5c4.1475 0 7.5075-3.36 7.5075-7.5s-3.36-7.5-7.5075-7.5zm.0075 13.5c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z" fill="%23e37400"/></svg>');
 }
 .a11y-icon-ok {
-    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 48 48' fill='%2300a000'%3e%3cpath d='M0 0h48v48H0z' fill='none'/%3e%3cpath d='M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z'/%3e%3c/svg%3e");
+    background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m9 1.5c-4.14 0-7.5 3.36-7.5 7.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5-3.36-7.5-7.5-7.5zm0 13.5c-3.3075 0-6-2.6925-6-6s2.6925-6 6-6 6 2.6925 6 6-2.6925 6-6 6zm-1.5-4.35-1.95-1.95-1.05 1.05 3 3 6-6-1.05-1.05z" fill="%230ca40c"/></svg>');
 }
 @media (forced-colors: active) {
@@ -233,13 +268,14 @@ body {
    }
    .color-swatch-inner,
    .contrast-text,
-    .element-info-contrast-row {
+    .separator {
        border-color: Highlight;
    }
    .dimensions,
    .element-info-name,
    .element-info-value-color,
    .element-info-value-contrast,
+    .element-info-value-icon,
    .element-info-value-text,
    .material-tag-name,
    .material-class-name,
@@ -533,12 +569,34 @@ function _createElementDescription(elementInfo)
        addTextRow("Padding", padding);
    const cbgColor = elementInfo.contrast ? elementInfo.contrast.backgroundColor : null;
-    if (color && color !== "#00000000" && cbgColor && cbgColor !== "#00000000")
+    const hasContrastInfo = color && color !== "#00000000" && cbgColor && cbgColor !== "#00000000";
+    addSection("Accessibility");
+    if (hasContrastInfo)
        addContrastRow(style["color"], elementInfo.contrast);
-    function addRow(name, rowClassName, valueClassName) {
+    addTextRow("Name", elementInfo.accessibleName);
+    addTextRow("Role", elementInfo.accessibleRole);
+    addIconRow("Keyboard-focusable", elementInfo.isKeyboardFocusable ? "a11y-icon a11y-icon-ok" : "a11y-icon a11y-icon-not-ok");
+    function ensureElementInfoBody() {
        if (!elementInfoBodyElement)
            elementInfoBodyElement = elementInfoElement.createChild("div", "element-info-body")
+    }
+    function addSection(name) {
+        ensureElementInfoBody();
+        const rowElement = elementInfoBodyElement.createChild("div", "element-info-row element-info-section");
+        const nameElement = rowElement.createChild("div", "section-name");
+        nameElement.textContent = name;
+        const separatorElement = rowElement
+            .createChild("div", "separator-container")
+            .createChild("div", "separator");
+    }
+    function addRow(name, rowClassName, valueClassName) {
+        ensureElementInfoBody();
        const rowElement = elementInfoBodyElement.createChild("div", "element-info-row");
        if (rowClassName)
            rowElement.classList.add(rowClassName);
@@ -548,6 +606,10 @@ function _createElementDescription(elementInfo)
        return rowElement.createChild("div", valueClassName || "");
    }
+    function addIconRow(name, value) {
+        addRow(name, "", "element-info-value-icon").createChild('div', value);
+    }
    function addTextRow(name, value) {
        addRow(name, "", "element-info-value-text").createTextChild(value);
    }
@@ -563,7 +625,7 @@ function _createElementDescription(elementInfo)
    function addContrastRow(fgColor, contrast) {
        const ratio = contrastRatio(parseHexa(fgColor), parseHexa(contrast.backgroundColor));
        const threshold = computeIsLargeFont(contrast) ? 3.0 : 4.5;
-        const valueElement = addRow("Contrast", "element-info-contrast-row", "element-info-value-contrast");
+        const valueElement = addRow("Contrast", "", "element-info-value-contrast");
        const sampleText = valueElement.createChild("div", "contrast-text");
        sampleText.style.color = fgColor;
        sampleText.style.backgroundColor = contrast.backgroundColor;
@@ -873,7 +935,7 @@ function test() {
    drawHighlight(
        {"paths":[{"path":["M",122,133.796875,"L",822,133.796875,"L",822,208.796875,"L",122,208.796875,"Z"], "fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},
        {"path":["M",122,113.796875,"L",822,113.796875,"L",822,228.796875,"L",122,228.796875,"Z"],"fillColor":"rgba(246, 178, 107, 0.66)","name":"margin"}],"showRulers":false,"showExtensionLines":false,
-        "elementInfo":{"tagName":"button","className":"class.name", "idValue":"download-hero","nodeWidth":"700","nodeHeight":"75","style":{"color":"#FFFFFFFF","font-family":"\"Product Sans\", \"Open Sans\", Roboto, Arial, \"Product Sans\", \"Open Sans\", Roboto, Arial","font-size":"20px","line-height":"25px","padding":"0px","margin":"20px 0px","background-color":"#00000000"},"contrast":{"fontSize":"20px","fontWeight":"400","backgroundColor":"#F9B826BF"}}, showExtensionLines: true, showRulers: true});
+        "elementInfo":{"tagName":"button","className":"class.name", "idValue":"download-hero","nodeWidth":"700","nodeHeight":"75","style":{"color":"#FFFFFFFF","font-family":"\"Product Sans\", \"Open Sans\", Roboto, Arial, \"Product Sans\", \"Open Sans\", Roboto, Arial","font-size":"20px","line-height":"25px","padding":"0px","margin":"20px 0px","background-color":"#00000000"},"contrast":{"fontSize":"20px","fontWeight":"400","backgroundColor":"#F9B826BF"},"isKeyboardFocusable":false,"accessibleName":"name","accessibleRole":"role"}, showExtensionLines: true, showRulers: true});
 }
 </script>

--- a/third_party/blink/renderer/core/inspector/inspector_highlight.cc
+++ b/third_party/blink/renderer/core/inspector/inspector_highlight.cc
@@ -308,6 +308,11 @@ std::unique_ptr<protocol::DictionaryValue> BuildElementInfo(Element* element) {
  DOMRect* bounding_box = element->getBoundingClientRect();
  element_info->setString("nodeWidth", String::Number(bounding_box->width()));
  element_info->setString("nodeHeight", String::Number(bounding_box->height()));
+  element_info->setBoolean("isKeyboardFocusable",
+                           element->IsKeyboardFocusable());
+  element_info->setString("accessibleName", element->computedName());
+  element_info->setString("accessibleRole", element->computedRole());
  return element_info;
 }

--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-expected.txt
@@ -87,7 +87,10 @@ paddedGrid{
    "idValue": "paddedGrid",
    "className": ".grid.padded.fixed",
    "nodeWidth": "175",
-    "nodeHeight": "1130"
+    "nodeHeight": "1130",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  },
  "gridInfo": [
    {
@@ -239,7 +242,10 @@ nestedGrid{
    "idValue": "nestedGrid",
    "className": ".grid",
    "nodeWidth": "100",
-    "nodeHeight": "1000"
+    "nodeHeight": "1000",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  },
  "gridInfo": [
    {

--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-huge-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-huge-expected.txt
@@ -86,7 +86,10 @@ big-grid{
    "tagName": "div",
    "idValue": "big-grid",
    "nodeWidth": "769",
-    "nodeHeight": "995"
+    "nodeHeight": "995",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  },
  "gridInfo": [
    {

--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-shapes-outside-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-shapes-outside-expected.txt
@@ -185,7 +185,10 @@ circle{
    "idValue": "circle",
    "className": ".float.circle",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 insetSimpleRound{
@@ -373,7 +376,10 @@ insetSimpleRound{
    "idValue": "insetSimpleRound",
    "className": ".float.insetSimpleRound",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 insetComplexRound{
@@ -585,7 +591,10 @@ insetComplexRound{
    "idValue": "insetComplexRound",
    "className": ".float.insetComplexRound",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 ellipse{
@@ -773,7 +782,10 @@ ellipse{
    "idValue": "ellipse",
    "className": ".float.ellipse",
    "nodeWidth": "128",
-    "nodeHeight": "80"
+    "nodeHeight": "80",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 contentBox{
@@ -985,7 +997,10 @@ contentBox{
    "idValue": "contentBox",
    "className": ".float.contentBox",
    "nodeWidth": "176",
-    "nodeHeight": "160"
+    "nodeHeight": "160",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 polygon{
@@ -1090,7 +1105,10 @@ polygon{
    "idValue": "polygon",
    "className": ".float.polygon",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 raster{
@@ -1528,7 +1546,10 @@ raster{
    "idValue": "raster",
    "className": ".float.raster",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-shapes-outside-scroll-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-shapes-outside-scroll-expected.txt
@@ -185,7 +185,10 @@ circle{
    "idValue": "circle",
    "className": ".float.circle",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 circle{
@@ -373,7 +376,10 @@ circle{
    "idValue": "circle",
    "className": ".float.circle",
    "nodeWidth": "128",
-    "nodeHeight": "128"
+    "nodeHeight": "128",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-display-locked-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-display-locked-expected.txt
@@ -86,7 +86,10 @@ container{
    "tagName": "div",
    "idValue": "container",
    "nodeWidth": "784",
-    "nodeHeight": "10"
+    "nodeHeight": "10",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 child{
@@ -176,6 +179,9 @@ child{
    "idValue": "container",
    "nodeWidth": "784",
    "nodeHeight": "10",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
    "isLockedAncestor": "true"
  }
 }

--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt
+This test verifies a11y attributes for a node.
+button{
+  "paths": [
+    {
+      "path": [
+        "M",
+        16,
+        11,
+        "L",
+        41.921875,
+        11,
+        "L",
+        41.921875,
+        26,
+        "L",
+        16,
+        26,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        10,
+        10,
+        "L",
+        47.921875,
+        10,
+        "L",
+        47.921875,
+        27,
+        "L",
+        10,
+        27,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        49.921875,
+        8,
+        "L",
+        49.921875,
+        29,
+        "L",
+        8,
+        29,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        49.921875,
+        8,
+        "L",
+        49.921875,
+        29,
+        "L",
+        8,
+        29,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "button",
+    "idValue": "button",
+    "nodeWidth": "41.9219",
+    "nodeHeight": "21",
+    "isKeyboardFocusable": true,
+    "accessibleName": "click",
+    "accessibleRole": "button"
+  }
+}
+input{
+  "paths": [
+    {
+      "path": [
+        "M",
+        57.921875,
+        11,
+        "L",
+        202.921875,
+        11,
+        "L",
+        202.921875,
+        26,
+        "L",
+        57.921875,
+        26,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        55.921875,
+        10,
+        "L",
+        204.921875,
+        10,
+        "L",
+        204.921875,
+        27,
+        "L",
+        55.921875,
+        27,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        53.921875,
+        8,
+        "L",
+        206.921875,
+        8,
+        "L",
+        206.921875,
+        29,
+        "L",
+        53.921875,
+        29,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        53.921875,
+        8,
+        "L",
+        206.921875,
+        8,
+        "L",
+        206.921875,
+        29,
+        "L",
+        53.921875,
+        29,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "input",
+    "idValue": "input",
+    "nodeWidth": "153",
+    "nodeHeight": "21",
+    "isKeyboardFocusable": true,
+    "accessibleName": "",
+    "accessibleRole": "textbox"
+  }
+}
+div{
+  "paths": [
+    {
+      "path": [
+        "M",
+        8,
+        29,
+        "L",
+        792,
+        29,
+        "L",
+        792,
+        47,
+        "L",
+        8,
+        47,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        29,
+        "L",
+        792,
+        29,
+        "L",
+        792,
+        47,
+        "L",
+        8,
+        47,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        29,
+        "L",
+        792,
+        29,
+        "L",
+        792,
+        47,
+        "L",
+        8,
+        47,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        29,
+        "L",
+        792,
+        29,
+        "L",
+        792,
+        47,
+        "L",
+        8,
+        47,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "div",
+    "nodeWidth": "784",
+    "nodeHeight": "18",
+    "isKeyboardFocusable": true,
+    "accessibleName": "click",
+    "accessibleRole": "button"
+  }
+}
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-a11y.js
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-a11y.js
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+(async function() {
+    TestRunner.addResult(
+        `This test verifies a11y attributes for a node.\n`);
+    await TestRunner.loadModule('elements_test_runner');
+    await TestRunner.showPanel('elements');
+    await TestRunner.loadHTML(`
+        <!DOCTYPE html>
+        <button id="button">click</button>
+        <input id="input"></input>
+        <div id="div" tabindex="0" role="button" aria-label="click">Save</div>
+      `);
+    function dumpHighlight(id) {
+        return new Promise(resolve => ElementsTestRunner.dumpInspectorHighlightJSON(id, resolve));
+    }
+    await dumpHighlight('button');
+    await dumpHighlight('input');
+    await dumpHighlight('div');
+    TestRunner.completeTest();
+})();
\ No newline at end of file
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scaled-and-scrolled-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scaled-and-scrolled-expected.txt
@@ -86,7 +86,10 @@ div{
    "tagName": "div",
    "idValue": "div",
    "nodeWidth": "69",
-    "nodeHeight": "80"
+    "nodeHeight": "80",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scaled-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scaled-expected.txt
@@ -86,7 +86,10 @@ div{
    "tagName": "div",
    "idValue": "div",
    "nodeWidth": "69",
-    "nodeHeight": "80"
+    "nodeHeight": "80",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scroll-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-scroll-expected.txt
@@ -87,7 +87,10 @@ inspectedElement1{
    "idValue": "inspectedElement1",
    "className": ".inspected",
    "nodeWidth": "250",
-    "nodeHeight": "250"
+    "nodeHeight": "250",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 inspectedElement2{
@@ -177,7 +180,10 @@ inspectedElement2{
    "idValue": "inspectedElement2",
    "className": ".inspected",
    "nodeWidth": "250",
-    "nodeHeight": "250"
+    "nodeHeight": "250",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-transformed-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-transformed-expected.txt
@@ -86,7 +86,10 @@ div{
    "tagName": "div",
    "idValue": "div",
    "nodeWidth": "100",
-    "nodeHeight": "80"
+    "nodeHeight": "80",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-vertical-rl-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-vertical-rl-expected.txt
@@ -86,7 +86,10 @@ container{
    "tagName": "div",
    "idValue": "container",
    "nodeWidth": "300",
-    "nodeHeight": "300"
+    "nodeHeight": "300",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 child{
@@ -175,7 +178,10 @@ child{
    "tagName": "div",
    "idValue": "child",
    "nodeWidth": "240",
-    "nodeHeight": "220"
+    "nodeHeight": "220",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 span{
@@ -264,7 +270,10 @@ span{
    "tagName": "span",
    "idValue": "span",
    "nodeWidth": "10",
-    "nodeHeight": "70"
+    "nodeHeight": "70",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
 TEXT{

--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-content-inside-iframe-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-content-inside-iframe-expected.txt
@@ -28,7 +28,10 @@ svg-rect{
    "tagName": "rect",
    "idValue": "svg-rect",
    "nodeWidth": "60",
-    "nodeHeight": "80"
+    "nodeHeight": "80",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-root-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-root-expected.txt
@@ -86,7 +86,10 @@ svg-root{
    "tagName": "svg",
    "idValue": "svg-root",
    "nodeWidth": "150",
-    "nodeHeight": "150"
+    "nodeHeight": "150",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": ""
  }
 }
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-root-zoomed-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-svg-root-zoomed-expected.txt
@@ -86,7 +86,10 @@ svg-root{
    "tagName": "svg",
    "idValue": "svg-root",
    "nodeWidth": "280",
-    "nodeHeight": "380"
+    "nodeHeight": "380",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": ""
  }
 }
--- a/third_party/blink/web_tests/platform/linux/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt
+++ b/third_party/blink/web_tests/platform/linux/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt
+This test verifies a11y attributes for a node.
+button{
+  "paths": [
+    {
+      "path": [
+        "M",
+        16,
+        11,
+        "L",
+        43,
+        11,
+        "L",
+        43,
+        27,
+        "L",
+        16,
+        27,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        10,
+        10,
+        "L",
+        49,
+        10,
+        "L",
+        49,
+        28,
+        "L",
+        10,
+        28,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        51,
+        8,
+        "L",
+        51,
+        30,
+        "L",
+        8,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        51,
+        8,
+        "L",
+        51,
+        30,
+        "L",
+        8,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "button",
+    "idValue": "button",
+    "nodeWidth": "43",
+    "nodeHeight": "22",
+    "isKeyboardFocusable": true,
+    "accessibleName": "click",
+    "accessibleRole": "button"
+  }
+}
+input{
+  "paths": [
+    {
+      "path": [
+        "M",
+        59,
+        11,
+        "L",
+        236,
+        11,
+        "L",
+        236,
+        27,
+        "L",
+        59,
+        27,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        57,
+        10,
+        "L",
+        238,
+        10,
+        "L",
+        238,
+        28,
+        "L",
+        57,
+        28,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        55,
+        8,
+        "L",
+        240,
+        8,
+        "L",
+        240,
+        30,
+        "L",
+        55,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        55,
+        8,
+        "L",
+        240,
+        8,
+        "L",
+        240,
+        30,
+        "L",
+        55,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "input",
+    "idValue": "input",
+    "nodeWidth": "185",
+    "nodeHeight": "22",
+    "isKeyboardFocusable": true,
+    "accessibleName": "",
+    "accessibleRole": "textbox"
+  }
+}
+div{
+  "paths": [
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "div",
+    "nodeWidth": "784",
+    "nodeHeight": "20",
+    "isKeyboardFocusable": true,
+    "accessibleName": "click",
+    "accessibleRole": "button"
+  }
+}
--- a/third_party/blink/web_tests/platform/mac/http/tests/devtools/elements/highlight/highlight-node-expected.txt
+++ b/third_party/blink/web_tests/platform/mac/http/tests/devtools/elements/highlight/highlight-node-expected.txt
@@ -86,7 +86,10 @@ inspectedElement{
    "tagName": "div",
    "idValue": "inspectedElement",
    "nodeWidth": "250",
-    "nodeHeight": "250"
+    "nodeHeight": "250",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }

--- a/third_party/blink/web_tests/platform/win/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt
+++ b/third_party/blink/web_tests/platform/win/http/tests/devtools/elements/highlight/highlight-node-a11y-expected.txt
+This test verifies a11y attributes for a node.
+button{
+  "paths": [
+    {
+      "path": [
+        "M",
+        16,
+        11,
+        "L",
+        43,
+        11,
+        "L",
+        43,
+        27,
+        "L",
+        16,
+        27,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        10,
+        10,
+        "L",
+        49,
+        10,
+        "L",
+        49,
+        28,
+        "L",
+        10,
+        28,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        51,
+        8,
+        "L",
+        51,
+        30,
+        "L",
+        8,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        51,
+        8,
+        "L",
+        51,
+        30,
+        "L",
+        8,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "button",
+    "idValue": "button",
+    "nodeWidth": "43",
+    "nodeHeight": "22",
+    "isKeyboardFocusable": true,
+    "accessibleName": "click",
+    "accessibleRole": "button"
+  }
+}
+input{
+  "paths": [
+    {
+      "path": [
+        "M",
+        59,
+        11,
+        "L",
+        228,
+        11,
+        "L",
+        228,
+        27,
+        "L",
+        59,
+        27,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        57,
+        10,
+        "L",
+        230,
+        10,
+        "L",
+        230,
+        28,
+        "L",
+        57,
+        28,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        55,
+        8,
+        "L",
+        232,
+        8,
+        "L",
+        232,
+        30,
+        "L",
+        55,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        55,
+        8,
+        "L",
+        232,
+        8,
+        "L",
+        232,
+        30,
+        "L",
+        55,
+        30,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "input",
+    "idValue": "input",
+    "nodeWidth": "177",
+    "nodeHeight": "22",
+    "isKeyboardFocusable": true,
+    "accessibleName": "",
+    "accessibleRole": "textbox"
+  }
+}
+div{
+  "paths": [
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        30,
+        "L",
+        792,
+        30,
+        "L",
+        792,
+        50,
+        "L",
+        8,
+        50,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "div",
+    "nodeWidth": "784",
+    "nodeHeight": "20",
+    "isKeyboardFocusable": true,
+    "accessibleName": "click",
+    "accessibleRole": "button"
+  }
+}
--- a/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-expected.txt
+++ b/third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-node-expected.txt
@@ -86,7 +86,10 @@ inspectedElement{
    "tagName": "div",
    "idValue": "inspectedElement",
    "nodeWidth": "250",
-    "nodeHeight": "250"
+    "nodeHeight": "250",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic"
  }
 }