Clicking shows the focus state - focus state is for keyboard navigation
Reported by
c...@canvaspixels.com,
Nov 11
|
||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
Steps to reproduce the problem:
1. add a border to a button or anything with role="button" or a tabindex set
2. click that button
3. see the blue outline
What is the expected behavior?
You should only see that blue outline on tab like every other browser (outside the Chrome family)
What went wrong?
I'm not sure how this ever happened. It has been the case for years. What it means is that you see the blue outline more regularly and designers and devs put *:focus { outline: none; } (as it is easier than adding the JS solution https://github.com/wicg/focus-visible ) disadvantaging those who cannot use mice.
Did this work before? No
Does this work in other browsers? Yes
Chrome version: 69.0.3497.100 Channel: n/a
OS Version: OS X 10.13.6
Flash Version:
https://codepen.io/anon/pen/Jedvwj
,
Nov 12
:focus-visible works differently, indeed.
,
Nov 12
Able to reproduce the issue on chrome reported version# 69.0.3497.100, #70.0.3538.102 and on latest chrome# 72.0.3608.0 using the URL and steps mentioned in comment#0 using Windows-10, Ubuntu 14.04 and Mac 10.12.6. As this issue is seen from M-60(60.0.3112.0), hence considering this issue as Non-Regression and marking it as Untriaged. Thanks!
,
Nov 12
Looks like this has been triaged in comment# 2. So, making this issue back to status as per comment# 2. As this issue is Non-Regression and same behaviour is seen from M-60 builds. Thanks!
,
Nov 21
Was able to reproduce on Chromium (72.0.3608.0), Safari (14606.1.36.1.9) - MacOS (10.14) Firefox (63.0) - Ubuntu (16.04.3 LTS), and can mention the following: -The bug also applies to the <select> tag. -Safari doesn't set the element with "button" role to the :focus state after the button is tapped and therefore bug doesn't exist in this browser. -The same problem exists in Firefox, but because of the :focus state style is not so noticeable. Should it work like it does in Safari?
,
Nov 25
Interestingly Safari's focus ring goes more transparent/lighter after you set a border on the select or button (see attached). I wonder why. But, yes. In terms of not persisting the focus ring on click (on a button/select that has a border set), it should work like Safari on MacOS... or Firefox on MacOS. See updated pen with select and inputs (note inputs aren't an issue) https://codepen.io/anon/pen/Pxazew
,
Nov 25
The easiest solution to this problem is to make HTMLElement so that the click on it doesn't lead to the focus state (like it is in Safari). Thus I have a question: Is it acceptable for Chrome? By the way I noticed that the blue ring disappears when I click on another window on my desktop and returns back when I click on current window (even on the tab bar or a "header"). Thats why I guess that the problem is more related to the "focus state".
,
Nov 25
I think it's acceptable. |
||||
►
Sign in to add a comment |
||||
Comment 1 by swarnasree.mukkala@chromium.org
, Nov 12