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:
JSON view after, without keyboard focus: (same as before)
JSON view after, with keyboard focus:

XML view before:
XML view after, without focus:
XML view after, with focus:

Change-Id: Id8bacdc593a5b562069fddb70452902ebad934e0
Commit-Queue: Amanda Baker <>
Reviewed-by: Erik Luo <>
Cr-Commit-Position: refs/heads/master@{#663263}
15 files changed