[Network Requests Table] Accessibility improvements for initiatior links
- The initiator link on a selected row can be accessed by pressing the
right arrow key
- When a preflight initiator link is in focus, the screen reader will
read the help text associated with it
Bug: 1212144
Change-Id: I8599267c9f74a8ae99f0ce3e1657a51229d5beef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2913102
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Olivia Flynn <[email protected]>
diff --git a/front_end/panels/network/NetworkLogView.ts b/front_end/panels/network/NetworkLogView.ts
index 7a24e85..a612e16 100644
--- a/front_end/panels/network/NetworkLogView.ts
+++ b/front_end/panels/network/NetworkLogView.ts
@@ -915,6 +915,12 @@
this._dataGrid.element.addEventListener('mousemove', this._dataGridMouseMove.bind(this), true);
this._dataGrid.element.addEventListener('mouseleave', () => this._setHoveredNode(null), true);
this._dataGrid.element.addEventListener('keydown', event => {
+ if (event.key === 'ArrowRight' && this._dataGrid.selectedNode) {
+ const initiatorLink = this._dataGrid.selectedNode.element().querySelector('span.devtools-link');
+ if (initiatorLink) {
+ (initiatorLink as HTMLElement).focus();
+ }
+ }
if (isEnterOrSpaceKey(event)) {
this.dispatchEventToListeners(Events.RequestActivated, {showPanel: true, takeFocus: true});
event.consume(true);
