[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/NetworkDataGridNode.ts b/front_end/panels/network/NetworkDataGridNode.ts
index 67189f3..039dfc7 100644
--- a/front_end/panels/network/NetworkDataGridNode.ts
+++ b/front_end/panels/network/NetworkDataGridNode.ts
@@ -1231,9 +1231,11 @@
cell.appendChild(document.createTextNode(i18nString(UIStrings.preflight)));
if (initiator.initiatorRequest) {
const icon = UI.Icon.Icon.create('mediumicon-network-panel');
- cell.appendChild(Components.Linkifier.Linkifier.linkifyRevealable(
+ const link = Components.Linkifier.Linkifier.linkifyRevealable(
initiator.initiatorRequest, icon, undefined, i18nString(UIStrings.selectTheRequestThatTriggered),
- 'trailing-link-icon'));
+ 'trailing-link-icon');
+ UI.ARIAUtils.setAccessibleName(link, i18nString(UIStrings.selectTheRequestThatTriggered));
+ cell.appendChild(link);
}
break;
}
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);
