[Control Center] After clicking into & out of subpanel, the rightarrow button is left with a dotted focus outline

NEW
Unassigned

Status

()

Firefox
Security
3 years ago
3 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

Trunk
All
Linux
Points:
---

Firefox Tracking Flags

(firefox42 affected)

Details

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
STR:
 1. Visit any URL, e.g. https://www.mozilla.org/
 2. Click the site-id button at the left end of the URL bar
 3. In the panel that appears, click the right-arrow (at the upper-right), and then click the blue arrow to go back to the main panel.

ACTUAL RESULTS:
The rightarrow on the site id panel ends up with a dotted focus-outline around it.

EXPECTED RESULTS:
No focus rect.

I think there's a CSS hack that can be used to disable this, though I don't recall what it is at the moment.
(Reporter)

Comment 1

3 years ago
Created attachment 8632220 [details]
screenshot of button with focus rect at end of STR
(Reporter)

Updated

3 years ago
Component: Location Bar → Security
(Reporter)

Updated

3 years ago
Summary: In new Site ID panel, after clicking into & out of "more info" (rightarrow) button, the button is left with a dotted focus outline → In new Site ID panel, after clicking into & out of rightarrow section, the rightarrow button is left with a dotted focus outline
Tim, is this a duplicate of Bug 1180841 or a separate issue?
Flags: needinfo?(ttaubert)
(Reporter)

Comment 3

3 years ago
I'm seeing this in current Nightly 42.0a1 (2015-07-10) btw.

Bug 1180841 hit mozilla-central yesterday afternoon, so I'd expect today's Nightly to have its fix. (So I don't think this is a dupe, in the sense that Bug 1180841 doesn't seem to have fixed this)
(In reply to Daniel Holbert [:dholbert] from comment #3)
> I'm seeing this in current Nightly 42.0a1 (2015-07-10) btw.
> 
> Bug 1180841 hit mozilla-central yesterday afternoon, so I'd expect today's
> Nightly to have its fix. (So I don't think this is a dupe, in the sense that
> Bug 1180841 doesn't seem to have fixed this)

Yeah, looks like it's not the same issue.  In fact, I'm seeing this in a recent local build in windows so must be a different problem.  Leaving the ni? just in case Tim is tracking this somewhere else.
Summary: In new Site ID panel, after clicking into & out of rightarrow section, the rightarrow button is left with a dotted focus outline → [Control Center] After clicking into & out of subpanel, the rightarrow button is left with a dotted focus outline
Will take a look, seems to be specific to Linux.
Flags: needinfo?(ttaubert)
OS: Unspecified → Linux
Hardware: Unspecified → All
(In reply to Tim Taubert [:ttaubert] from comment #5)
> Will take a look, seems to be specific to Linux.

I believe I'm seeing the same thing in a Win7 build FWIW
Looks like we can prevent those buttons from taking the focus with onmousedown="return false;". Should we do that though? Other buttons usually take focus when clicked.
(Reporter)

Comment 8

3 years ago
(In reply to Tim Taubert [:ttaubert] from comment #7)
> Other buttons usually
> take focus when clicked.

This is probably above my UX/aesthetics knowledge-grade, but FWIW: the reason the focus-ring stood out to me as "looking wrong" is that this button otherwise blends in so nicely/sleekly. It's only separated from the rest of the panel by a subtle bar and a subtle color-change hover effect. There's no border / rounded edges / button-theme like a standard <button>.

So, the old-school dotted focus-ring looks out of place, to me at least. (where it doesn't look out of place on something that's more clearly a <button>)
I think it's a good thing that the button keeps focus after clicking.  This way you can just press space bar / enter to go back to the expanded view again.

I've looked through some of the other navbar popups and see that it's fairly inconsistent how this is handled:

* The downloads 'show all downloads' link can receive the dotted focus border (although it's just around the text, not the whole clickable region)
* The hamburger menu controls seem to intentionally not receive focus - even after clicking on one of the buttons pressing tab continues to navigate through the page
* The 'edit this bookmark' popup seems to use normal form focus styles and tab ordering to navigate through the controls
* Pocket seems to allow you to focus the container element that contains a couple of buttons, and shows the dotted border around that.  But focusing it seems useless since pressing enter / space once it's focused doesn't to anything
* The awesomebar + search popups use some system color as the background color for focus state as you tab through results / search providers (orange on ubuntu)

So, what should the focus state should look like for the subpanel arrow in the control center (and also the 'more information' button). i.e. should it be invisible, stay the same, have some background change, or do something else?  Maybe we could keep the hover background color in combination with the dotted border so it doesn't stand out so much..  Aislinn, what do you think?
Flags: needinfo?(agrigas)

Comment 10

3 years ago
(In reply to Brian Grinstead [:bgrins] from comment #9)
> I think it's a good thing that the button keeps focus after clicking.  This
> way you can just press space bar / enter to go back to the expanded view
> again.
> 
> I've looked through some of the other navbar popups and see that it's fairly
> inconsistent how this is handled:
> 
> * The downloads 'show all downloads' link can receive the dotted focus
> border (although it's just around the text, not the whole clickable region)
> * The hamburger menu controls seem to intentionally not receive focus - even
> after clicking on one of the buttons pressing tab continues to navigate
> through the page
> * The 'edit this bookmark' popup seems to use normal form focus styles and
> tab ordering to navigate through the controls
> * Pocket seems to allow you to focus the container element that contains a
> couple of buttons, and shows the dotted border around that.  But focusing it
> seems useless since pressing enter / space once it's focused doesn't to
> anything
> * The awesomebar + search popups use some system color as the background
> color for focus state as you tab through results / search providers (orange
> on ubuntu)
> 
> So, what should the focus state should look like for the subpanel arrow in
> the control center (and also the 'more information' button). i.e. should it
> be invisible, stay the same, have some background change, or do something
> else?  Maybe we could keep the hover background color in combination with
> the dotted border so it doesn't stand out so much..  Aislinn, what do you
> think?

Can we just use the hover background color for both?
Flags: needinfo?(agrigas)
You need to log in before you can comment on or make changes to this bug.