DevTools: Make console message source links keyboard accessible

Make all console message anchor source links keyboard accessible by
adding the anchor element to the _selectableChildren array in the
ConsoleViewMessage UI component which will use _selectableChildren to
manage keyboard navigation and focus.

This is required to meet WCAG 2.1.1 Keyboard success criteria.
See: https://www.w3.org/WAI/WCAG21/quickref/#keyboard

For the tests I added an additional ArrowUp or ArrowDown to move focus
to the original desired target under test, occasionally I would include
the content of the source link in the test's expected results for
additional guards against regressions.

on the previous message, then use the up and down arrow keys to navigate
between visible links within the console messages.

Screenshot: https://i.imgur.com/ZUDFsUV.png
Gif: https://i.imgur.com/UlhVhwn.gifv
Test: Put focus in the console input, then use Shift + Tab to set focus
Bug: 963183
Change-Id: I8e094506adeed099a2b0c1b81c4b4394f83129a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1638137
Commit-Queue: John Emau <John.Emau@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702981}

third_party/blink/renderer/devtools/front_end/console/ConsoleViewMessage.js

@@ -348,6 +348,11 @@ Console.ConsoleViewMessage = class {
 
     // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
     if (anchorElement) {
+      anchorElement.tabIndex = -1;
+      this._selectableChildren.push({
+        element: anchorElement,
+        forceSelect: () => anchorElement.focus(),
+      });
       const anchorWrapperElement = createElementWithClass('span', 'console-message-anchor');
       anchorWrapperElement.appendChild(anchorElement);
       anchorWrapperElement.createTextChild(' ');

third_party/blink/web_tests/http/tests/devtools/console/viewport-testing/console-key-expand-expected.txt

@@ -57,11 +57,21 @@ Viewport virtual selection: 1
 activeElement: LI.parent.object-properties-section-root-element.selected
 active text: {y: 2}
 
+ArrowDown:
+Viewport virtual selection: 1
+activeElement: SPAN.devtools-link
+active text: console-key-expand.js:51
+
 ArrowDown:
 Viewport virtual selection: 2
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
 active text: console-key-expand.js:51 after
 
+ArrowUp:
+Viewport virtual selection: 1
+activeElement: SPAN.devtools-link
+active text: console-key-expand.js:51
+
 ArrowUp:
 Viewport virtual selection: 1
 activeElement: LI.parent.object-properties-section-root-element.selected
@@ -79,7 +89,7 @@ Message count: 3
 Force selecting index 1
 Viewport virtual selection: 1
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
-active text: console-key-expand.js:70 text {x: 1} {y: 2}
+active text: console-key-expand.js:74 text {x: 1} {y: 2}
 
 ArrowRight:
 Viewport virtual selection: 1
@@ -108,10 +118,14 @@ active text: {y: 2}
 
 ArrowDown:
 
+ArrowDown:
+
 ArrowDown:
 Viewport virtual selection: 2
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
-active text: console-key-expand.js:70 after
+active text: console-key-expand.js:74 after
+
+ArrowUp:
 
 ArrowUp:
 Viewport virtual selection: 1
@@ -126,7 +140,7 @@ active text: {y: 2}
 ArrowLeft:
 Viewport virtual selection: 1
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
-active text: console-key-expand.js:70 text {x: 1}x: 1 {y: 2}y: 2
+active text: console-key-expand.js:74 text {x: 1}x: 1 {y: 2}y: 2
 
 Running: testExpandingObjectInTrace
 Evaluating: console.log("before");console.warn("warning", obj1);console.log("after");
@@ -137,16 +151,16 @@ Viewport virtual selection: 1
 Has object: collapsed
 Is trace expanded: NO
 activeElement: DIV.console-message-wrapper.console-from-api.console-warning-level.console-selected
-active text: console-key-expand.js:112 warning {x: 1}
-(anonymous) @ console-key-expand.js:112
+active text: console-key-expand.js:117 warning {x: 1}
+(anonymous) @ console-key-expand.js:117
 
 ArrowRight:
 Viewport virtual selection: 1
 Has object: collapsed
 Is trace expanded: YES
 activeElement: DIV.console-message-wrapper.console-from-api.console-warning-level.console-selected
-active text: console-key-expand.js:112 warning {x: 1}
-(anonymous) @ console-key-expand.js:112
+active text: console-key-expand.js:117 warning {x: 1}
+(anonymous) @ console-key-expand.js:117
 
 ArrowRight:
 Viewport virtual selection: 1
@@ -171,19 +185,23 @@ active text: x: 1
 
 ArrowDown:
 
+ArrowDown:
+
 ArrowDown:
 Viewport virtual selection: 2
 Has object: expanded
 Is trace expanded: YES
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
-active text: console-key-expand.js:112 after
+active text: console-key-expand.js:117 after
+
+ArrowUp:
 
 ArrowUp:
 Viewport virtual selection: 1
 Has object: expanded
 Is trace expanded: YES
 activeElement: SPAN.devtools-link
-active text: console-key-expand.js:112
+active text: console-key-expand.js:117
 
 ArrowUp:
 Viewport virtual selection: 1
@@ -197,24 +215,24 @@ Viewport virtual selection: 1
 Has object: expanded
 Is trace expanded: YES
 activeElement: DIV.console-message-wrapper.console-from-api.console-warning-level.console-selected
-active text: console-key-expand.js:112 warning {x: 1}x: 1
-(anonymous) @ console-key-expand.js:112
+active text: console-key-expand.js:117 warning {x: 1}x: 1
+(anonymous) @ console-key-expand.js:117
 
 ArrowLeft:
 Viewport virtual selection: 1
 Has object: expanded
 Is trace expanded: NO
 activeElement: DIV.console-message-wrapper.console-from-api.console-warning-level.console-selected
-active text: console-key-expand.js:112 warning {x: 1}x: 1
-(anonymous) @ console-key-expand.js:112
+active text: console-key-expand.js:117 warning {x: 1}x: 1
+(anonymous) @ console-key-expand.js:117
 
 ArrowLeft:
 Viewport virtual selection: 1
 Has object: expanded
 Is trace expanded: NO
 activeElement: DIV.console-message-wrapper.console-from-api.console-warning-level.console-selected
-active text: console-key-expand.js:112 warning {x: 1}x: 1
-(anonymous) @ console-key-expand.js:112
+active text: console-key-expand.js:117 warning {x: 1}x: 1
+(anonymous) @ console-key-expand.js:117
 
 Running: testExpandingElement
 Evaluating: console.log("before");console.log(el);console.log("after");
@@ -223,7 +241,9 @@ Message count: 3
 Force selecting index 1
 Viewport virtual selection: 1
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
-active text: console-key-expand.js:160 <div>​…​</div>​
+active text: console-key-expand.js:167 <div>​…​</div>​
+
+ArrowDown:
 
 ArrowDown:
 Viewport virtual selection: 1
@@ -241,6 +261,8 @@ Message count: 2
 Setting focus in prompt:
 
 Shift+Tab:
+
+ArrowUp:
 Viewport virtual selection: 1
 Has object: collapsed
 activeElement: LI.parent.object-properties-section-root-element.selected
@@ -258,10 +280,14 @@ Message count: 2
 Setting focus in prompt:
 
 Shift+Tab:
+
+ArrowUp:
 Viewport virtual selection: 1
 Has object: collapsed
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
-active text: console-key-expand.js:191 after
+active text: console-key-expand.js:199 after
+
+ArrowUp:
 
 ArrowUp:
 Viewport virtual selection: 0
@@ -276,6 +302,8 @@ Setting focus in prompt:
 
 Shift+Tab:
 
+ArrowUp:
+
 ArrowRight:
 
 Tab:
@@ -284,6 +312,8 @@ Has object: expanded
 activeElement: TEXTAREA
 
 Shift+Tab:
+
+ArrowUp:
 Viewport virtual selection: 0
 Has object: expanded
 activeElement: LI.parent.object-properties-section-root-element.expanded.selected

third_party/blink/web_tests/http/tests/devtools/console/viewport-testing/console-key-expand.js

@@ -62,6 +62,10 @@
       dumpFocus(true, 1, true /* skipObjectCheck */);
       press('ArrowDown');
       dumpFocus(true, 1, true /* skipObjectCheck */);
+      press('ArrowDown');
+      dumpFocus(true, 1, true /* skipObjectCheck */);
+      press('ArrowUp');
+      dumpFocus(true, 1, true /* skipObjectCheck */);
       press('ArrowUp');
       dumpFocus(true, 1, true /* skipObjectCheck */);
       press('ArrowLeft');
@@ -70,8 +74,7 @@
       next();
     },
 
-    // Note:
-    // During this test expanded objects
+    // Note: During this test expanded objects
     // do not include the __proto__ property.
     async function testExpandingObjects(next) {
       await clearAndLog(`console.log("before");console.log("text", obj1, obj2);console.log("after");`, 3);
@@ -96,8 +99,10 @@
       await ConsoleTestRunner.waitForRemoteObjectsConsoleMessagesPromise();
       press('ArrowDown');
       press('ArrowDown');
+      press('ArrowDown');
       dumpFocus(true, 1, true /* skipObjectCheck */);
 
+      press('ArrowUp');
       press('ArrowUp');
       dumpFocus(true, 1, true /* skipObjectCheck */);
 
@@ -130,8 +135,10 @@
       dumpFocus(true, 1);
       press('ArrowDown');
       press('ArrowDown');
+      press('ArrowDown');
       dumpFocus(true, 1);
 
+      press('ArrowUp');
       press('ArrowUp');
       dumpFocus(true, 1);
       press('ArrowUp');
@@ -163,6 +170,7 @@
 
       dumpFocus(true, 1);
       press('ArrowDown');
+      press('ArrowDown');
       dumpFocus(true, 1);
 
       // Expand object.
@@ -180,7 +188,7 @@
       TestRunner.addResult(`Setting focus in prompt:`);
       prompt.focus();
       shiftPress('Tab');
-
+      press('ArrowUp');  // Move from source link to object.
       dumpFocus(true, 1);
 
       // Expand object.
@@ -191,15 +199,18 @@
       next();
     },
 
-    async function testArrowUpToFirstVisibleMessageShouldSelectLastObject(next) {
+    async function testArrowUpToFirstVisibleMessageShouldSelectLastObject(
+        next) {
       await clearAndLog(`console.log(obj1);console.log("after");`, 2);
       await ConsoleTestRunner.waitForRemoteObjectsConsoleMessagesPromise();
 
       TestRunner.addResult(`Setting focus in prompt:`);
       prompt.focus();
       shiftPress('Tab');
+      press('ArrowUp');  // Move from source link to "after".
       dumpFocus(true);
 
+      press('ArrowUp');  // Move from source link to object.
       press('ArrowUp');
       dumpFocus(true);
 
@@ -218,12 +229,14 @@
       TestRunner.addResult(`Setting focus in prompt:`);
       prompt.focus();
       shiftPress('Tab');
+      press('ArrowUp');  // Move from source link to object.
       press('ArrowRight');
       await ConsoleTestRunner.waitForRemoteObjectsConsoleMessagesPromise();
       press('Tab');
 
       dumpFocus(true);
       shiftPress('Tab');
+      press('ArrowUp');  // Move from source link to object.
 
       dumpFocus(true);
       dumpScrollInfo();

third_party/blink/web_tests/http/tests/devtools/console/viewport-testing/console-key-links-expected.txt

@@ -9,6 +9,11 @@ Setting focus in prompt:
 Shift+Tab:
 Viewport virtual selection: 2
 activeElement: SPAN.devtools-link
+active text: console-key-links.js:26
+
+ArrowUp:
+Viewport virtual selection: 2
+activeElement: SPAN.devtools-link
 active text: www.chromium.org/2
 
 ArrowUp:
@@ -16,6 +21,11 @@ Viewport virtual selection: 2
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
 active text: console-key-links.js:26 www.chromium.org/2
 
+ArrowUp:
+Viewport virtual selection: 1
+activeElement: SPAN.devtools-link
+active text: console-key-links.js:26
+
 ArrowUp:
 Viewport virtual selection: 1
 activeElement: SPAN.devtools-link
@@ -41,6 +51,11 @@ Viewport virtual selection: 1
 activeElement: SPAN.devtools-link
 active text: www.chromium.org/1b
 
+ArrowDown:
+Viewport virtual selection: 1
+activeElement: SPAN.devtools-link
+active text: console-key-links.js:26
+
 ArrowDown:
 Viewport virtual selection: 2
 activeElement: DIV.console-message-wrapper.console-from-api.console-info-level.console-selected
@@ -54,7 +69,7 @@ active text: www.chromium.org/2
 ArrowDown:
 Viewport virtual selection: 2
 activeElement: SPAN.devtools-link
-active text: www.chromium.org/2
+active text: console-key-links.js:26
 
 Running: testNavigatingLinksInStackTrace
 Evaluating: fn1()
@@ -62,12 +77,16 @@ Message count: 1
 Setting focus in prompt:
 
 Shift+Tab:
+
+ArrowUp:
 Viewport virtual selection: 0
 Is trace expanded: NO
 activeElement: SPAN.devtools-link
 active text: www.chromium.org/linkInErrMsg
 
 ArrowDown:
+
+ArrowUp:
 Viewport virtual selection: 0
 Is trace expanded: NO
 activeElement: SPAN.devtools-link
@@ -79,7 +98,7 @@ Is trace expanded: NO
 activeElement: DIV.console-message-wrapper.console-from-api.console-error-level.console-selected
 active text: foo.js:18 Custom error with link www.chromium.org/linkInErrMsg
 fn1 @ foo.js:18
-(anonymous) @ console-key-links.js:62
+(anonymous) @ console-key-links.js:71
 
 ArrowRight:
 Viewport virtual selection: 0
@@ -87,7 +106,7 @@ Is trace expanded: YES
 activeElement: DIV.console-message-wrapper.console-from-api.console-error-level.console-selected
 active text: foo.js:18 Custom error with link www.chromium.org/linkInErrMsg
 fn1 @ foo.js:18
-(anonymous) @ console-key-links.js:62
+(anonymous) @ console-key-links.js:71
 
 ArrowDown:
 Viewport virtual selection: 0
@@ -105,13 +124,19 @@ ArrowDown:
 Viewport virtual selection: 0
 Is trace expanded: YES
 activeElement: SPAN.devtools-link
-active text: console-key-links.js:62
+active text: foo.js:18
+
+ArrowDown:
+Viewport virtual selection: 0
+Is trace expanded: YES
+activeElement: SPAN.devtools-link
+active text: console-key-links.js:71
 
 ArrowDown:
 Viewport virtual selection: 0
 Is trace expanded: YES
 activeElement: SPAN.devtools-link
-active text: console-key-links.js:62
+active text: console-key-links.js:71
 
 ArrowLeft:
 Viewport virtual selection: 0
@@ -119,7 +144,7 @@ Is trace expanded: YES
 activeElement: DIV.console-message-wrapper.console-from-api.console-error-level.console-selected
 active text: foo.js:18 Custom error with link www.chromium.org/linkInErrMsg
 fn1 @ foo.js:18
-(anonymous) @ console-key-links.js:62
+(anonymous) @ console-key-links.js:71
 
 ArrowLeft:
 Viewport virtual selection: 0
@@ -127,5 +152,5 @@ Is trace expanded: NO
 activeElement: DIV.console-message-wrapper.console-from-api.console-error-level.console-selected
 active text: foo.js:18 Custom error with link www.chromium.org/linkInErrMsg
 fn1 @ foo.js:18
-(anonymous) @ console-key-links.js:62
+(anonymous) @ console-key-links.js:71
 

third_party/blink/web_tests/http/tests/devtools/console/viewport-testing/console-key-links.js

@@ -44,6 +44,15 @@
       press('ArrowUp');
       dumpFocus(true, 0, true);
 
+      press('ArrowUp');
+      dumpFocus(true, 0, true);
+
+      press('ArrowUp');
+      dumpFocus(true, 0, true);
+
+      press('ArrowDown');
+      dumpFocus(true, 0, true);
+
       press('ArrowDown');
       dumpFocus(true, 0, true);
 
@@ -69,10 +78,12 @@
       TestRunner.addResult(`Setting focus in prompt:`);
       prompt.focus();
       shiftPress('Tab');
-
+      press('ArrowUp');  // Move from source link to message link.
       dumpFocus(true, 0, true);
 
       press('ArrowDown');
+
+      press('ArrowUp');
       dumpFocus(true, 0, true);
 
       press('ArrowUp');
@@ -93,6 +104,9 @@
       press('ArrowDown');
       dumpFocus(true, 0, true);
 
+      press('ArrowDown');
+      dumpFocus(true, 0, true);
+
       press('ArrowLeft');
       dumpFocus(true, 0, true);
 

third_party/blink/web_tests/http/tests/devtools/console/viewport-testing/console-key-navigation-expected.txt

@@ -7,12 +7,18 @@ Setting focus in prompt:
 TEXTAREA:Console prompt
 
 Shift+Tab:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
+ArrowUp:
 DIV:console-key-navigation.js:20 Message #99
 
 Shift+Tab:
 DIV#console-messages.monospace
 
 Tab:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
+ArrowUp:
 DIV:console-key-navigation.js:20 Message #99
 
 Tab:
@@ -23,6 +29,9 @@ Setting focus in prompt:
 TEXTAREA:Console prompt
 
 Shift+Tab:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
+ArrowUp:
 DIV:console-key-navigation.js:20 Message #99
 
 Scrolling to top of viewport
@@ -32,12 +41,18 @@ Shift+Tab:
 DIV#console-messages.monospace
 
 Tab:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
+ArrowUp:
 DIV:console-key-navigation.js:20 Message #99
 
 Setting focus in prompt:
 TEXTAREA:Console prompt
 
 Shift+Tab:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
+ArrowUp:
 DIV:console-key-navigation.js:20 Message #99
 
 Scrolling to top of viewport
@@ -54,12 +69,18 @@ DIV.console-group.console-group-messages
 Home:
 DIV:console-key-navigation.js:20 Message #0
 
+ArrowDown:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
 ArrowDown:
 DIV:console-key-navigation.js:20 Message #1
 
 End:
 DIV:console-key-navigation.js:20 Message #99
 
+ArrowUp:
+SPAN:test://evaluations/0/console-key-navigation.js:20
+
 ArrowUp:
 DIV:console-key-navigation.js:20 Message #98
 

third_party/blink/web_tests/http/tests/devtools/console/viewport-testing/console-key-navigation.js

@@ -32,12 +32,18 @@
       shiftPress('Tab');
       dumpFocus();
 
+      press('ArrowUp');
+      dumpFocus();
+
       shiftPress('Tab');
       dumpFocus();
 
       press('Tab');
       dumpFocus();
 
+      press('ArrowUp');
+      dumpFocus();
+
       press('Tab');
       dumpFocus();
 
@@ -52,6 +58,9 @@
       shiftPress('Tab');
       dumpFocus();
 
+      press('ArrowUp');
+      dumpFocus();
+
       scrollViewportToTop();
       dumpFocus();
 
@@ -61,6 +70,9 @@
       press('Tab');
       dumpFocus();
 
+      press('ArrowUp');
+      dumpFocus();
+
       TestRunner.addResult(`\nSetting focus in prompt:`);
       prompt.focus();
       dumpFocus();
@@ -68,6 +80,9 @@
       shiftPress('Tab');
       dumpFocus();
 
+      press('ArrowUp');
+      dumpFocus();
+
       scrollViewportToTop();
       dumpFocus();
 
@@ -87,12 +102,18 @@
       press('ArrowDown');
       dumpFocus();
 
+      press('ArrowDown');
+      dumpFocus();
+
       press('End');
       dumpFocus();
 
       press('ArrowUp');
       dumpFocus();
 
+      press('ArrowUp');
+      dumpFocus();
+
       next();
     },