New issue
Advanced search Search tips

Issue 781539 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Keyboard TAB current link position sometimes disappears due to CSS

Reported by jidanni@gmail.com, Nov 4 2017

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Example URL:
https://panel.dreamhost.com/

Steps to reproduce the problem:
1. Visit https://panel.dreamhost.com/
2. Hit the TAB key on your keyboard four times
3. What button are we on?

What is the expected behavior?
Large borders, even if just temporary, to ensure we see which link we have reached.

What went wrong?
The user cannot tell if he has reached the "Reset password" button or the "Sign in" button.

One might say this only affects disabled users who cannot use a mouse and must use the keyboard, and also perhaps this is due to a wrong use of CSS by the particular site. However ensuring TABing to links always is clear (like it is on this page before we hit the third link) would increase accessibility for all sites.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? No
 Firefox latest

Chrome version: 61.0.3163.100  Channel: n/a
OS Version: 
Flash Version:
 

Comment 1 by jidanni@gmail.com, Nov 5 2017

On https://m.facebook.com/groups/
pick a group you manage or create a group.

Now in the group pick 'create event'.

Now hit the TAB key a few times.
The border it makes disappears on some of the links.
Cc: kebalaji@chromium.org
Components: -Blink Blink>HTML>Focus
Labels: M-64 Needs-Milestone OS-Mac OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on reported version 61.0.3163.100, latest stable 62.0.3202.89 and on latest canary 64.0.3261.0 on Windows 10, Mac 10.12.6 and Ubuntu 14.04. This is a Non-Regression issue seen from M-50. Hence, marking it as untriaged.

Comment 3 by kochi@chromium.org, Nov 9 2017

Status: WontFix (was: Untriaged)
For dreamhost.com, the login page is working as expected, as I checked the style
and the "Reset password" link and the "Sign in" button are explicitly specified
"outline: none" style via CSS.

For m.facebook.com, I'm not sure I'm seeing the same screen as you see, as
it seems they show different UI for different locale/location. But as far as I tested,
only one element that doesn't show focus ring was also explicitly specified as
"outline: none" in CSS.  See the attached screenshot FYI.

They are working as expected, thus closing as WontFix.
facebook_craete_group.png
689 KB View Download

Comment 4 by kochi@chromium.org, Nov 9 2017

If you want these sites to improve UI for accessibility, please contact individual site,
not file bugs against Chrome.

Comment 5 by jidanni@gmail.com, Nov 10 2017

I was hoping that the browser should draw the line (literally and
figuratively) about how pages can manipulate things.

I was thinking a box around the current link should always be present as
the user (keyboard) tabs through the document.

That way if there was some style that somehow said put the box around
link four, while we are really on link three, we wouldn't be gullible.

Some kind of black border with a white thread inside.

I suppose the only way a site could spoof that was put identical
ones around each button.

But OK I suppose all this would only be important for an add-on for
disabled users.

(P.S., https://www.facebook.com/help/156151771119453 puts a great blue
border around the current article with the j and k keys!)

Also noted on https://bugzilla.mozilla.org/show_bug.cgi?id=1341471

Sign in to add a comment