DevTools: Make Preview Pane Accessible
This is a reland of 58040a832bb68a52529638518de36be17c65547f
The failing aXe tests were removed and will be added again after
invesigation
Original change's description:
> DevTools: Make Preview Pane Accessible
>
> The preview pane previously lacked keyboard controls for navigating
> through the JSON and XML views, the Font view unnecessarily read out the
> content of the view (the alphabet) when accessed via screen reader, and
> the Image view did not allow a screen reader user to access the size and
> mime type of the image.
>
> This patch fixes these issues by making the JSON and XML treeOutlines
> selectable so they can be accessed via keyboard and by displaying
> keyboard focus within the treeOutline. In the Font view, the element
> containing the sample text is marked so that a screen reader will not
> read the contents, but rather will read the source url of the font. In
> the Image view, a tab stop was moved from a parent element to the image
> itself and a label was added that reads the source url of the image.
>
> JSON view before: https://imgur.com/BWczsAL
> JSON view after, without keyboard focus: (same as before)
> JSON view after, with keyboard focus: https://imgur.com/gD0rNSB
>
> XML view before: https://imgur.com/Ec9b5kf
> XML view after, without focus: https://imgur.com/NEqUgpt
> XML view after, with focus: https://imgur.com/0csIpQ3
>
> Change-Id: Id8bacdc593a5b562069fddb70452902ebad934e0
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1551384
> Commit-Queue: Amanda Baker <[email protected]>
> Reviewed-by: Erik Luo <[email protected]>
> Cr-Commit-Position: refs/heads/master@{#663263}
Change-Id: If544cc7a83d031c42cb538f6e89b9df9d3ec1dc0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1633989
Reviewed-by: Erik Luo <[email protected]>
Commit-Queue: Amanda Baker <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#666949}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: ffc8de5717812a6e5803c9f005a4159a58ff0824
diff --git a/front_end/source_frame/FontView.js b/front_end/source_frame/FontView.js
index d9030c6..2278603 100644
--- a/front_end/source_frame/FontView.js
+++ b/front_end/source_frame/FontView.js
@@ -39,6 +39,7 @@
this.registerRequiredCSS('source_frame/fontView.css');
this.element.classList.add('font-view');
this._url = contentProvider.contentURL();
+ UI.ARIAUtils.setAccessibleName(this.element, ls`Preview of font from ${this._url}`);
this._mimeType = mimeType;
this._contentProvider = contentProvider;
this._mimeTypeLabel = new UI.ToolbarText(mimeType);
@@ -79,6 +80,7 @@
fontPreview.createTextChild(SourceFrame.FontView._fontPreviewLines[i]);
}
this.fontPreviewElement = fontPreview.cloneNode(true);
+ UI.ARIAUtils.markAsHidden(this.fontPreviewElement);
this.fontPreviewElement.style.overflow = 'hidden';
this.fontPreviewElement.style.setProperty('font-family', uniqueFontName);
this.fontPreviewElement.style.setProperty('visibility', 'hidden');
