Skip to content

Commit 49a7120

Browse files
chromium-wpt-export-botjosepharhar
chromium-wpt-export-bot
and
josepharhar
authored
Fix focus ring for anchor elements (#57845)
Anchor elements have special behavior to prevent a focus ring from being rendered when the last user focus was done via keyboard and it was then focused via script, which was (probably) added here: https://issues.chromium.org/issues/40383506 This inconsistency with other keyboard focusable elements is not a good thing, and I don't agree with the justification from the bug report which added the inconsistency, so this patch removes the special behavior by removing HTMLAnchorElementBase::ShouldHaveFocusAppearance. Fixed: 40848191 Bug: 40383506, 40911863 Change-Id: Ifa80ca5596c4eec4a4ddd31338525668a77137d1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6354078 Reviewed-by: David Baron <dbaron@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1586082} Co-authored-by: Joey Arhar <jarhar@chromium.org>
1 parent cf7b570 commit 49a7120

2 files changed

Lines changed: 37 additions & 0 deletions

File tree

‎html/interaction/focus/anchor-element-focus-ring-ref.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!DOCTYPE html>
2+
<div>button</div>
3+
<a href="#">anchor</a>

‎html/interaction/focus/anchor-element-focus-ring.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<link rel=author href="mailto:jarhar@chromium.org">
4+
<link rel=help href="https://issues.chromium.org/issues/40848191">
5+
<link rel=mismatch href="anchor-element-focus-ring-ref.html">
6+
<script src="/resources/testdriver.js"></script>
7+
<script src="/resources/testdriver-vendor.js"></script>
8+
9+
<!--
10+
This test verifies that focusing via script after using the keyboard shows a
11+
focus ring on the <a> element. Since using testdriver doesn't seem to be
12+
working in the ref file, we mismatch with a ref which doesn't have a focus
13+
ring.
14+
-->
15+
16+
<div tabindex=0>button</div>
17+
<a href="#">anchor</a>
18+
19+
<script>
20+
const anchor = document.querySelector('a');
21+
const button = document.querySelector('div');
22+
const tabKey = '\uE004';
23+
document.body.addEventListener('keydown', event => {
24+
if (event.key == 'Tab') {
25+
event.preventDefault();
26+
anchor.focus();
27+
}
28+
});
29+
(async () => {
30+
await test_driver.click(button);
31+
await test_driver.send_keys(document.body, tabKey);
32+
document.documentElement.classList.remove('reftest-wait');
33+
})();
34+
</script>

0 commit comments

Comments
 (0)