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

Issue 388666 link

Starred by 30 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 2014
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

Focus anchor (A) elements on mousedown

Reported by oliverj...@gmail.com, Jun 25 2014

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2066.5 Safari/537.36

Steps to reproduce the problem:
1. Mousedown on an anchor element

What is the expected behavior?
The anchor element should have focus.

What went wrong?
The anchor element is not given focus.

When you mousedown on a BUTTON, it is given focus.

What was the reason for only applying this behaviour to BUTTONs?

Links are often used instead of BUTTONs, but styled to look like them, because of their semantics (right click, open in new tab, etc.).

It is quite common to use BUTTON and A elements interchangeably in a user interface.

Did this work before? N/A 

Chrome version: 38.0.2066.5  Channel: n/a
OS Version: OS X 10.9.3
Flash Version: Shockwave Flash 14.0 r0
 

Comment 1 by meh...@chromium.org, Jun 25 2014

Labels: Cr-Blink

Comment 2 by tkent@chromium.org, Jun 27 2014

Labels: -Cr-UI -Cr-Blink Cr-Blink-Events Cr-Blink-HTML Cr-Blink-HTML-A
Labels: Needs-Feedback
Inorder to further investigate the issue, please provide a sample html file with above test cases.

Comment 4 by rob@robwu.nl, Aug 9 2014

Here is a simple test case: http://jsfiddle.net/ydv5abdx/show

<style>
a:focus {
    background: red;
}
</style>
<a href="javascript://">Anchor</a><br>
<a href="javascript://" tabindex="0">Anchor with tabindex</a>

Press the first anchor, and observe that it does not get the focus.
Press the second anchor, and observe that it turns red (i.e. it got the focus).

Firefox (31) gives the element focus in both cases.
This is a non-regression, I've managed to reproduce it in 5.0.307.1 (though it works correctly in 4.0.223.11).
behavior is very strange and it seems intentional. the <a> element is focusable (.tabIndex is set to 0) and so is via keyboard navigation. the focusability is instead not available via mouse cursor. this is wrong because one should be able to style :active and :focus separately

a similar issue is found also on :active state. when the link (or the button) is activated via Enter or Spacebar, the :active state is not always set

http://jsfiddle.net/wsjw21j7/

Comment 6 by rob@robwu.nl, Aug 9 2014

Labels: -OS-Mac -Needs-Feedback OS-All
Status: Untriaged

Comment 7 by rob@robwu.nl, Aug 9 2014

 Issue 70477  has been merged into this issue.

Comment 8 by rob@robwu.nl, Aug 9 2014

 Issue 335143  has been merged into this issue.

Comment 9 by rob@robwu.nl, Aug 9 2014

Cc: progame@chromium.org
 Issue 18018  has been merged into this issue.

Comment 10 by rob@robwu.nl, Aug 9 2014

Firefox (1 - 31), Internet Explorer (8 - 11) and Opera Presto (12) all behave consistent, and focus the anchor when clicked.

Chrome (5 - 38) and Safari (5 - 7) don't focus the anchor on click. Searching for "chrome anchor focus bug" yields several results from web developers who complain about the lack of focus on click. This error originates from WebKit: https://bugs.webkit.org/show_bug.cgi?id=28646

Comment 11 by rob@robwu.nl, Aug 10 2014

Owner: rob@robwu.nl
Status: Started
Patch is up for review at: https://codereview.chromium.org/455223002

The patch implements mouse-focusable anchors. As before, the default focus ring is not displayed when an anchor is focused by mouse. For comparison, here is what happens in other browsers (Yes = Shows focus ring, no = does not show a focus ring):

- IE 8 - 10: Yes
- IE 11: No
- Opera 12: No
- Firefox 11 - 34 (Windows): No
- Firefox 31 (Linux): Yes
- Safari 5: No
- Chrome 36: No
Project Member

Comment 12 by bugdroid1@chromium.org, Aug 30 2014

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=181127

------------------------------------------------------------------
r181127 | rob@robwu.nl | 2014-08-30T02:03:25.119719Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLAnchorElement.h?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-svganchor-has-ring-expected.html?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-svganchor-no-ring-expected.html?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-svganchor-has-ring.html?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-svganchor-no-ring.html?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/resources/focus-anchor-by-mouse.js?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-anchor.html?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLFormControlElement.cpp?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/Element.cpp?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/SVGAElement.cpp?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-anchor-has-ring-expected.html?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-anchor-has-ring.html?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-anchor-no-ring-expected.html?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLFormControlElement.h?r1=181127&r2=181126&pathrev=181127
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-anchor-no-ring.html?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/dom/Element.h?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/html/HTMLAnchorElement.cpp?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/svg/SVGAElement.h?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/events/click-focus-anchor-expected.txt?r1=181127&r2=181126&pathrev=181127
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderTheme.cpp?r1=181127&r2=181126&pathrev=181127

Make anchors mouse-focusable

Anchors are now also mouse-focusable, to be consistent with Gecko,
Trident and Presto. When an anchor is focused by mouse, the default
focus ring is not shown (unless tabindex is set), as before.

The expectation of fast/events/click-focus-anchor has changed as follows:
- a3 is also focusable by mouse, because it is a link.
- a7 is focused instead of p7 because a7 is focusable, and therefore get
  the focus instead of the parent <p> element.

BUG= 388666 

Review URL: https://codereview.chromium.org/455223002
-----------------------------------------------------------------

Comment 13 by rob@robwu.nl, Aug 30 2014

Status: Fixed
I don't understand why Chrome does show the focus ring on BUTTONs but not on As (unless tabindex is set)? I understand this behaviour is consistent with Gecko et al, but then why does BUTTON have this behaviour?

Comment 15 by rob@robwu.nl, Sep 3 2014

 Issue 312478  has been merged into this issue.

Comment 16 by Deleted ...@, Nov 24 2015

The decision to make mouse-activated links not have focus is a terrible one for this user, and keeps me using Firefox instead of Chrome.
I need to move vertically down 100s of links as part of my job. This is most efficiently achieved by using the mouse. However, when I come back to the page I can't tell where I stopped clicking because THERE IS NO FOCUS.

Comment 17 by rob@robwu.nl, Nov 24 2015

#16
Not showing focus for mouse-focused anchors was a decision to prevents existing sites from falling out due to the fact that :focus gets activated upon click.

If you want to always have a visible focus ring on focus, regardless of what the website wants, install https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe and add a CSS selector to set something like

:link:focus {
    outline: 1px dashed blue !important;
}

Sign in to add a comment