1424162 - [a11y] Console clear, filter, etc. controls should be placed before output

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[James Teh [:Jamie]]

STR (with the NVDA screen reader):
1. Start NVDA and Firefox.
2. Press control+shift+k to open the Web Console.
3. Type foobar and press enter.
4. Shift+tab to the output area.
5. Press control+end to move to the bottom.
Expected: NVDA should report the last line of the output; e.g. "debugger eval code:1:1".
Actual: NVDA reports stuff from the console controls; e.g. "Persist logs".

As far as I can tell, the console controls (clear output, filter, etc.) are visually above the console output. However, for some reason, they're rendered later in the DOM. This is tedious for screen reader users because you can't just jump to the bottom of the input easily without having to cursor up through the toolbar. Either:
1. The controls should be moved above the output in the DOM; or
2. aria-owns should be used to reposition them for accessibility. For example, if the parent contained a node with id "console-output" and another with id "console-toolbar" in that order, the parent should have aria-owns="console-toolbar console-output" to reverse the order.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Marking this as good first bug since it should be only about swapping those 2 lines : https://searchfox.org/mozilla-central/rev/b0098afaeaad24a6752aa418ca3e86eade5fab17/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js#202-203

Comment 2

[James Teh [:Jamie]]

Attachment: Bug 1424162: Put the filter bar before the console output in the web console.

The filter bar was already positioned before the console output visually.
However, accessibility clients such as screen readers rely on the semantic order, not the visual order, for positioning of content.
This makes it easier for screen reader users to quickly get to the bottom of the console output, which is important for efficiency when reading recent output.

Review commit: https://reviewboard.mozilla.org/r/207882/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/207882/

Comment 3

[James Teh [:Jamie]]

I tested the patch and verified that the order is correct with the NVDA screen reader as outlined in comment 0. I verified to the best of my ability (using NVDA's mouse audio coordinates feature) that the positioning of the output and filter bar is unchanged visually. However, I'm totally blind, so I might have missed something.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8937168 [details]
Bug 1424162: Put the filter bar before the console output in the web console.

https://reviewboard.mozilla.org/r/207882/#review213830

This is looking good visually, thanks Jamie.
Let's push this to TRY and land when everything is green.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fefc8c7584d8
Put the filter bar before the console output in the web console. r=nchevobbe

Comment 6

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/fefc8c7584d8