1424404 - Photon polish: Remove dotted-line focus ring from Console logs window

Status: RESOLVED WORKSFORME

(DevTools :: Console, enhancement, P3)

Description

[Victoria Wang [:victoria]]

Attachment: Screen Shot 2017-12-08 at 2.35.17 PM.png

The dotted-line focus ring that appears around objects in the Console logs looks distracting/buggy and does not seem necessary.

This is similar to this Network bug (#1406320) which was closed due to the accessibility-related need for the focus ring; however, it doesn't seem like the focus ring helps with navigation in the Console log window. The Console logs don't seem to support tab navigation at all. I may be wrong on this - CCing Yura in case he can share info on this.

When we do support tab navigation, it should look like the Photon focused-link: https://design.firefox.com/photon/components/links.html#behaviors

Comment 1

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

(In reply to Victoria Wang [:victoria] from comment #0)
> Created attachment 8935928 [details]
> Screen Shot 2017-12-08 at 2.35.17 PM.png
> 
> The dotted-line focus ring that appears around objects in the Console logs
> looks distracting/buggy and does not seem necessary.
> 
> This is similar to this Network bug (#1406320) which was closed due to the
> accessibility-related need for the focus ring; however, it doesn't seem like
> the focus ring helps with navigation in the Console log window. The Console
> logs don't seem to support tab navigation at all. I may be wrong on this -
> CCing Yura in case he can share info on this.
> 
> When we do support tab navigation, it should look like the Photon
> focused-link:
> https://design.firefox.com/photon/components/links.html#behaviors

Yes from the looks of it the console log. is pretty inaccessible for the keyboard user. I would still vote for fixing the focus styling instead of just removing it.

Comment 2

[Sagar Bharadwaj]

Attachment: Unnecessary dotted lines around Take Snapshot button

Even I think there are many extra dotted lines in the Nightly built from mozilla-central. It makes the UI look buggy. I've attached an example.

Comment 3

[Victoria Wang [:victoria]]

I guess I see removing the current dotted line in console as an intermediate step, since it just adds confusion at the moment - making the Console actually keyboard-accessible seems like a much bigger task that should be its own project.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Proper keyboard navigation in console will be done in Bug 1456060

Comment 5

[Florens Verschelde :fvsch]

> The Console logs don't seem to support tab navigation at all

They do for some bits. I would rather add keyboard support to more elements in console logs than remove them, when possible.

For the object tree, it seems there is already some accessibility work done, I’m seeing things like <div role="tree"> and <div role="treeitem" aria-expanded="true">. It looks like we should add keyboard support (maybe with tabindex="0" on treeitem elements and listening to Enter and Space keys), unless that’s not recommended by the ARIA tree pattern (I’d have to check).

We may still be able to avoid the dotted outline when clicking with a pointer, by using :-moz-focusring instead of :focus for focus styles: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring

(It might be standardized as :focus-visible in the future, see bug 1437901).

Comment 6

[Victoria Wang [:victoria]]

Ah! This :-moz-focusring sounds like the solution to all my dotted-line box angst :'D. Thanks Florens, Yura will probably have more to say about your comment.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

we don't have the dotted-border anymore (probably removed when we introduced the focused style on OI nodes)