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

Issue 817199 link

Starred by 19 users
Status: Assigned
Owner:
aboxhall@chromium.org
Cc:
█ kochi@chromium.org
robdodson@chromium.org
futhark@chromium.org
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocked on:
issue 920458
Blocking:
issue 747818



Sign in to add a comment

Chrome does not support CSS Selectors 4 :focus-visible

Project Member Reported by robdodson@chromium.org, Feb 28 2018 
Chrome Version: 64.0.3282.167 (Official Build) (64-bit)
OS: Mac OS X

What steps will reproduce the problem?
(1) Visit https://jsbin.com/mewozet/edit?html,output
(2) Click on the input field with a mouse
(3) Tab to the input field using a keyboard

What is the expected result?

Clicking on the input field with a mouse should not show an outline.
Tabbing to the input field with a keyboard should show a 2px dashed red outline.

Spec for :focus-visible - https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

What happens instead?

Clicking or tabbing to the input field always shows the default outline because neither style is applied.

Comment 1 by robdodson@chromium.org, Feb 28 2018

Description: Show this description

Comment 2 by robdodson@chromium.org, Feb 28 2018

Description: Show this description
Project Member

Comment 3 by bugdroid1@chromium.org, Mar 2 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2664fa01732b86620585c9bd0e7c9c1652641b7c

commit 2664fa01732b86620585c9bd0e7c9c1652641b7c
Author: Rob Dodson <robdodson@chromium.org>
Date: Fri Mar 02 17:02:51 2018

Implement :focus-visible pseudo class.

Spec: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
Intent to Implement: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/-wN72ESFsyo

Adds :focus-visible to the list of known CSS pseudo classes. This change also adds a flag,
WasFocusedByMouse(), to UserActionElementSet which is exposed as Node.WasFocusedByMouse().
SelectorChecker will use this flag to check if a node matching :focus should also match
:focus-visible. By default, any node focused by mouse will NOT match :focus-visible. Any
node focused by keyboard will match :focus-visible.

Bug: 817199
R=aboxhall@chromium.org

Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I1a0aadc8ea653afc964865a277b2d4d2ccabe540
Reviewed-on: https://chromium-review.googlesource.com/897002
Commit-Queue: Rob Dodson <robdodson@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#540537}
[add] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-001-manual.html
[add] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/LayoutTests/external/wpt_automation/css/selectors/focus-visible-001-manual-automation.js
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/CSSSelector.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/CSSSelector.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/RuleFeatureSet.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/SelectorChecker.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/SelectorChecker.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/StyleChangeReason.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/StyleChangeReason.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/css/parser/CSSSelectorParser.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/dom/ContainerNode.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/dom/ContainerNode.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/dom/Document.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/dom/Node.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/dom/Node.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/dom/UserActionElementSet.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/html/forms/HTMLFormControlElement.h
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/core/inspector/InspectorTraceEvents.cpp
[modify] https://crrev.com/2664fa01732b86620585c9bd0e7c9c1652641b7c/third_party/WebKit/Source/platform/runtime_enabled_features.json5

Comment 4 by yio...@gmail.com, Mar 6 2018 

Why does the mouse click on the input also appear outline?
focus.gif
51.5 KB View Download

Comment 5 Deleted

Comment 6 by robdodson@chromium.org, Mar 7 2018 

Sorry, I mistyped my earlier reply and deleted it :P

The input field is just relying on the UA stylesheet, which says any element that matches :focus should have a focus style. It doesn't do any checking to determine the user's input method.

For some elements, like button, Chrome decides, under the hood, that mouse clicking on the element should not draw a focus indicator—since the user knows what they just clicked. However, if you mouse click the button, and then press a keyboard key, like Shift, it will start displaying a focus indicator. It's one of the elements that actually does take the user's input method into account.

Because it's a little weird having these two systems, it may be desirable in the future to replace the :focus style in the UA stylesheet with :focus-visible. Then we can decide which elements should always display a focus indicator, and which should only do so if they were focused via keyboard.

Comment 7 by yio...@gmail.com, Mar 8 2018 

@robdodson Thanks!
Project Member

Comment 8 by bugdroid1@chromium.org, Mar 9 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/88bf2a739b789c92d624d2c61799e1bcfc20228b

commit 88bf2a739b789c92d624d2c61799e1bcfc20228b
Author: Rob Dodson <robdodson@chromium.org>
Date: Fri Mar 09 23:40:06 2018

Add use counters for :focus and :focus-visible.

The goal of this change is to track developer uptake of :focus-visible,
once it ships from behind a flag. We also want to monitor the usage
of :focus. This data will help us explore possibly switching the UA stylesheet
over to using :focus-visible someday.


R=aboxhall@chromium.org

Bug: 817199
Change-Id: I257ab590f03d28831ec517b67f42e6f86a156ee9
Reviewed-on: https://chromium-review.googlesource.com/954102
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Takayoshi Kochi <kochi@chromium.org>
Reviewed-by: Luna Lu <loonybear@chromium.org>
Reviewed-by: Rick Byers <rbyers@chromium.org>
Commit-Queue: Rob Dodson <robdodson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542279}
[modify] https://crrev.com/88bf2a739b789c92d624d2c61799e1bcfc20228b/third_party/WebKit/Source/core/css/parser/CSSSelectorParser.cpp
[modify] https://crrev.com/88bf2a739b789c92d624d2c61799e1bcfc20228b/third_party/WebKit/Source/core/frame/UseCounterTest.cpp
[modify] https://crrev.com/88bf2a739b789c92d624d2c61799e1bcfc20228b/third_party/WebKit/public/platform/web_feature.mojom
[modify] https://crrev.com/88bf2a739b789c92d624d2c61799e1bcfc20228b/tools/metrics/histograms/enums.xml
Project Member

Comment 10 by bugdroid1@chromium.org, Apr 4 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5f93b7aed5ce7245ac02b2283dac6661844cb763

commit 5f93b7aed5ce7245ac02b2283dac6661844cb763
Author: Rob Dodson <robdodson@chromium.org>
Date: Wed Apr 04 22:44:14 2018

Replace was_focused_by_mouse_ flag.

Removes the was_focused_by_mouse_ flag implemented by a number of form elements,
and replaces it with a check for Node::WasFocusedByMouse().

R=tkent@chromium.org

Bug: 817199
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: Ibd8477732d5646f928c010a5c1cef853bafc38ee
Reviewed-on: https://chromium-review.googlesource.com/988352
Commit-Queue: Rob Dodson <robdodson@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548223}
[modify] https://crrev.com/5f93b7aed5ce7245ac02b2283dac6661844cb763/third_party/WebKit/Source/core/html/HTMLAnchorElement.cpp
[modify] https://crrev.com/5f93b7aed5ce7245ac02b2283dac6661844cb763/third_party/WebKit/Source/core/html/HTMLAnchorElement.h
[modify] https://crrev.com/5f93b7aed5ce7245ac02b2283dac6661844cb763/third_party/WebKit/Source/core/html/forms/HTMLFormControlElement.cpp
[modify] https://crrev.com/5f93b7aed5ce7245ac02b2283dac6661844cb763/third_party/WebKit/Source/core/html/forms/HTMLFormControlElement.h
[modify] https://crrev.com/5f93b7aed5ce7245ac02b2283dac6661844cb763/third_party/WebKit/Source/core/svg/SVGAElement.cpp
[modify] https://crrev.com/5f93b7aed5ce7245ac02b2283dac6661844cb763/third_party/WebKit/Source/core/svg/SVGAElement.h

Comment 11 by robdodson@chromium.org, May 21 2018

Cc: -aboxhall@chromium.org robdodson@chromium.org
Owner: aboxhall@chromium.org
Project Member

Comment 12 by bugdroid1@chromium.org, Jun 14 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/06cb0abadeaa3ba3f383845ccdbf0038a89019e0

commit 06cb0abadeaa3ba3f383845ccdbf0038a89019e0
Author: Alice Boxhall <aboxhall@chromium.org>
Date: Thu Jun 14 14:58:48 2018

Improve :focus-visible tests

- Add explanatory text to each one
- Make the manual test path accessible to color blind testers
- Bring headers up to date
- Create a consistent style for :focus-visible and :focus:not(:focus-visible) for easier understanding of test results

Bug: 817199
Change-Id: I97191d5c8395576a42c923a025d05d2d61e79552
Reviewed-on: https://chromium-review.googlesource.com/1093697
Commit-Queue: Alice Boxhall <aboxhall@chromium.org>
Reviewed-by: Jonathon Kereliuk <kereliuk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567266}
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-001-manual.html
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-002-manual.html
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-003-manual.html
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-004-manual.html
[delete] https://crrev.com/4b5158183adb0a1eaf1381f3fec7b16e636f1f83/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-005-manual.html
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-005.html
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-006-manual.html
[modify] https://crrev.com/06cb0abadeaa3ba3f383845ccdbf0038a89019e0/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-007.html
Project Member

Comment 13 by bugdroid1@chromium.org, Jul 5 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/30651505c541f0d9b87d998eb5bdad59e3609991

commit 30651505c541f0d9b87d998eb5bdad59e3609991
Author: Alice Boxhall <aboxhall@chromium.org>
Date: Thu Jul 05 00:17:33 2018

Make focus-visible tests easier to eyeball

Bug: 817199
Change-Id: Iea196f7b7679c2edee47e5d17b0cab39d28c2aeb
Reviewed-on: https://chromium-review.googlesource.com/1125552
Commit-Queue: Alice Boxhall <aboxhall@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#572681}
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-001-manual.html
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-002-manual.html
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-003-manual.html
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-004-manual.html
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-005.html
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-006-manual.html
[modify] https://crrev.com/30651505c541f0d9b87d998eb5bdad59e3609991/third_party/WebKit/LayoutTests/external/wpt/css/selectors/focus-visible-007.html

Comment 15 by gwhi...@gmail.com, Jan 9 

Hey everyone, I wanted to touch base and see where the work for this currently is and what's actively blocking it from being removed from behind a flag (if anything). Thanks.

Comment 16 by futhark@chromium.org, Jan 10 

Alice, Rob, do you know the status? Are we ready for an intent to ship?

Comment 17 by robdodson@chromium.org, Jan 14

Blockedon: 920458

Comment 18 by robdodson@chromium.org, Jan 15 

I think we'd like to make the meta keys changed mentioned in crbug.com/920458 before doing an intent to ship. Alice are there other things you'd like to wait on as well?
►

Sign in to add a comment