New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 599390 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Dec 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

Focus highlight appears broken in www.vivaldi.com

Reported by mni...@etouch.net, Mar 31 2016

Issue description

Version: 51.0.2695.0 723dfe66b1985ff2178590b15d1cc63911300737-refs/heads/master@{#384157} (32/64-bit)
OS: All (Win 7-Aero enabled)
Url : https://vivaldi.com/?lang=en

What steps will reproduce the problem?
1) Launch chrome, go to above url.
2) Now press 'Tab' key from keyboard and observe the focus highlight(Blue highlight) on Menu header (i.e 'story';'Team' etc.)

Actual : Focus highlight appears broken
Expected : Focus highlight should be seen properly

This is a Non-Regression issue seen from M-30 series (Chrome version: 30.0.1549.0)

Note : Issue is not seen on other browsers like Mozilla Firefox and Internet Explorer.
 
Actual_video.mp4
464 KB Download
Expected_video.mp4
522 KB Download
Actual_screenshot.png
211 KB View Download
Expected_screenshot.png
191 KB View Download
Status: Untriaged (was: Unconfirmed)
Untriaging it so that it gets addressed.

Comment 2 by kochi@chromium.org, Apr 4 2016

Components: -Blink>Focus Blink>Paint
Moving focus ring paint issue to Blink>Paint component.
Labels: Needs-Bisect

Comment 4 by mni...@etouch.net, Apr 7 2016

Labels: -Needs-Bisect
With response to comment #3 :
This is a Non-Regression issue seen from M-30 series (Chrome version: 30.0.1549.0)hence unable to bisect.
Cc: e...@chromium.org
Components: Blink>Layout>BackgroundBorder
Labels: -OS-Linux -OS-Windows -Pri-2 -M-51 -OS-Mac OS-All Pri-3
Downgrading to P3 as this is a minor non-regression issue.

Okay, so what's going on here is that the divider is actually the ::before pseudo-element of the following link. So when a link is focused, the pseudo-element is included in that focus.

Behaviour seems to differ between vendors:
Chrome: draws two focus rings around the two rectangles
Safari: does not draw a focus ring around the pseudo-element
Firefox: draws one ring surrounding both

The spec is pretty vague about what's supposed to happen in this case, and I think all three behaviours are probably defensible.

The content could avoid this vendor-specific behaviour by not using a::before in this way (e.g. by writing the dividers some other way, or by wrapping the link in a span that had the ::before on it).

eae, do you know what we should do here?

Comment 6 by pdr@chromium.org, Apr 9 2016

Cc: dmazz...@chromium.org rbyers@chromium.org
Labels: -Pri-3 Pri-2
Status: Available (was: Untriaged)
Safari does draw a focus ring around the pseudo-element. You need to enable accessibility feature ("press tab to highlight each element") that highlight links, whereas Chrome does this it default.

@dmazzoni, it's visually pleasing to not highlight links by default (like Safari) and have an option to enable this accessibility feature. Switching the default here would also encourage authors to not intentionally disable accessibility features for aesthetic reasons. Could we change this?
Components: -Blink>Layout>BackgroundBorder Blink>Layout

Comment 8 by e...@chromium.org, Dec 9 2016

Status: WontFix (was: Available)
No longer reproduces.

Sign in to add a comment