1415410 - Add source order visualization to grid inspector

Status: NEW

(DevTools :: Inspector: Layout, enhancement, P3)

Description

[Adrian Roselli]

Attachment: Firefox-grid-inspector-reading-order.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36

Steps to reproduce:

1. Visit a page using named regions in CSS grid: https://s.codepen.io/aardrian/debug/wrYjRP
2. Inspect the grid container.
3. From the Inspector, choose the Layout tab.
4. Examine the grid elements.


Actual results:

The grid layout inspector does a great job of showing me the named regions, column and row spans, line numbers, and gutters. This is awesome. But I have a feature request.


Expected results:

This is a feature request.

I would like an option to show the source order / reading order in the layout view. I have written my ideas in a blog post (which I am happy to paste in full here):
http://adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html

I have also made a (terrible) example image that shows what I am thinking. Essentially, use numbers and arrows to show a developer how the source order appears under the layout, and as a result in what order a screen reader or keyboard-only user will experience the content.

I think there is value in bringing this to other layout methods, but I am limiting this report to CSS grid.

Comment 1

[Adrian Roselli]

There is a similar issue, though it is different than this one since it is asking for an audit feature: https://bugzilla.mozilla.org/show_bug.cgi?id=1415363

Comment 2

[Adrian Roselli]

Attachment: Shows the counters in the center of each grid area, with arrows connecting them to show reading order.

I made a couple better quality images. This is one of them. It shows the counters in the center of each grid area, with arrows connecting them to show reading order.

Comment 3

[Adrian Roselli]

Attachment: Shows the counters in the corner of each grid area, with arrows connecting them to show reading order.

I made a couple better quality images. This is one of them. It shows the counters in the corner of each grid area, with arrows connecting them to show reading order. It also shows one that is most likely breaking reading order by highlighting it in yellow.

Comment 4

[Adrian Roselli]

I created a bookmarklet that acts as both a proof of concept and a stop-gap until this feature is natively implemented in browsers and/or testing tools: http://adrianroselli.com/2019/04/reading-order-bookmarklet.html

Comment 5

[Victoria Wang [:victoria]]

Yura: I was wondering if this feature would tie into any of your plans for the Accessibility Inspector.

Comment 6

[Yura Zenevich [:yzen] (please use "needinfo")]

We were definitely considering tab/focus order visualization in the near future, similar to a11y insights, though I understand this is for all content. It's relevant for grid/flex/etc like floats so can be done in general enough way. If we could think of a meaningful way of visualizing content order (especially on massive pages) from the UX perspective, I could consider taking it on too. Adrian, I'll check out your link, though it seems like the website is offline right now.

Comment 7

[Adrian Roselli]

Database server upgrade at my host. Poorly timed, but my site is back now. To gather both of my blog posts…

Original request:
http://adrianroselli.com/2017/11/feature-request-for-firefox-grid-inspector-source-order.html

Prototype:
http://adrianroselli.com/2019/04/reading-order-bookmarklet.html

Comment 8

[Adrian Roselli]

I made a video that played at Smashing Conference NYC to try to garner broader community support: https://adrianroselli.com/2019/10/smashing-web-we-want-video-pitch.html

It is also on YouTube: https://www.youtube.com/watch?v=UjXCAuWuXdk

Comment 9

[Adrian Roselli]

Microsoft's Edge DevTools team has added this feature to Chromium and it will be in Edge 86:
https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features#enable-source-order-viewer

Comment 10

[Victoria Wang [:victoria]]

Thanks Adrian, that's awesome!

This bug is related to Yura's recent work on displaying tabbing order.