-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix edge cases of keyboard navigations around
anchor elements with …
…`TabsToLink` https://bugs.webkit.org/show_bug.cgi?id=270713 Reviewed by Ryosuke Niwa. This patch is to fix edge cases in keyboard focus navigation around `anchor` elements: Partial Merge: https://chromium.googlesource.com/chromium/blink/+/53f8eba14b6362795bae47c02236ca93303264a6 By merging above, WebKit is trying to fix case around `empty anchor` while `TabsToLinks` enabled. The test case was failing currently in WebKit, so this fixes it. Merge: https://chromium.googlesource.com/chromium/blink/+/7ef69ef071ba2b49ece747b93518b9a1218f9c45 In this merge, WebKit is aligning to allow keyboard navigation to anchors with `TabsToLinks` being disabled if the anchors have explicit tabindex. Beside following, this patch still retains `early return` if it is not focusable. > Changes: * Source/WebCore/html/HTMLAnchorElement.cpp: (HTMLAnchorElement::isKeyboardFocusable): > Test Cases & Expectations: * LayoutTests/fast/events/anchor-empty-focus-expected.txt: * LayoutTests/fast/events/anchor-empty-focus.html: * LayoutTests/fast/events/frame-tab-focus-expected.txt: * LayoutTests/fast/events/frame-tab-focus.html: * LayoutTests/fast/events/tab-focus-anchor-expected.txt: * LayoutTests/fast/events/tab-focus-anchor-tab-to-links-expected.txt: * LayoutTests/fast/events/tab-focus-anchor-tab-to-links.html: * LayoutTests/fast/events/tab-focus-anchor.html: * LayoutTests/fast/forms/focus-on-control-with-zero-size.html: * LayoutTests/fast/forms/focus-on-control-with-zero-size-expected.txt: > Platform Specific Test Expectation: * LayoutTests/platform/ios/TestExpectations: `iOS` don't have 'EventSender` keydown support Canonical link: https://commits.webkit.org/275976@main
- Loading branch information
Ahmad Saleem
committed
Mar 12, 2024
1 parent
8764804
commit e39892e
Showing
12 changed files
with
196 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,11 @@ | ||
| This tests that focus() works on an empty anchor. | ||
| This tests that focus() and sequential focus navigation work on empty anchors. | ||
|
|
||
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". | ||
|
|
||
|
|
||
| PASS document.activeElement is emptyAnchor1 | ||
| PASS document.activeElement is emptyAnchor2 | ||
| PASS successfullyParsed is true | ||
|
|
||
| TEST COMPLETE | ||
|
|
||
| TEST PASSED |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,26 @@ | ||
| <!DOCTYPE html><!-- webkit-test-runner [ TabsToLinks=true ] --> | ||
| <html> | ||
| <head> | ||
| <script> | ||
| function test() | ||
| { | ||
| document.getElementById("anch").focus(); | ||
| if (window.testRunner) { | ||
| testRunner.dumpAsText(); | ||
| eventSender.keyDown('s'); | ||
| } | ||
| } | ||
| </script> | ||
| </head> | ||
| <body onload="test()"> | ||
| This tests that focus() works on an empty anchor.<br> | ||
| <a id="anch" href="#" onkeydown="document.getElementById('console').innerText = 'TEST PASSED'"></a> | ||
| <br> | ||
| <pre id="console">TEST FAILED</pre> | ||
| </body> | ||
| <head> | ||
| <script src="../../resources/js-test.js"></script> | ||
| </head> | ||
| <body onload="test()"> | ||
| <a id="anch" href="#"></a> | ||
| <a id="anch2" href="#"></a> | ||
| <input> | ||
|
|
||
| <script> | ||
| description('This tests that focus() and sequential focus navigation work on empty anchors.'); | ||
| jsTestIsAsync = true; | ||
| var emptyAnchor1 = document.getElementById("anch"); | ||
| var emptyAnchor2 = document.getElementById("anch2"); | ||
| function test() { | ||
| emptyAnchor1.focus(); | ||
| shouldBe('document.activeElement', 'emptyAnchor1'); | ||
|
|
||
| eventSender.keyDown('\t'); | ||
| shouldBe('document.activeElement', 'emptyAnchor2'); | ||
| finishJSTest(); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
LayoutTests/fast/events/tab-focus-anchor-tab-to-links-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| This test ensures that we can tab to all anchor elements. Press tab three times to focus the elements below. | ||
|
|
||
| Focusable | ||
|
|
||
| Not focusable | ||
|
|
||
| Focusable | ||
|
|
||
| Focusable | ||
|
|
||
|
|
||
|
|
||
| Result | ||
|
|
||
| PASS gave focus to focusable element | ||
| PASS gave focus to focusable element | ||
| PASS gave focus to focusable element | ||
| PASS successfullyParsed is true | ||
|
|
||
| TEST COMPLETE | ||
|
|
40 changes: 40 additions & 0 deletions
40
LayoutTests/fast/events/tab-focus-anchor-tab-to-links.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <!DOCTYPE html><!-- webkit-test-runner [ TabsToLinks=true ] --> | ||
| <html> | ||
| <head> | ||
| <link rel="help" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-WheelEvent"> | ||
| <script src="../../resources/js-test.js"></script> | ||
| <script> | ||
| function runTest() | ||
| { | ||
| if (!window.testRunner || !window.eventSender) { | ||
| debug("FAIL: This test requires window.testRunner and window.eventSender."); | ||
| finishJSTest(); | ||
| return; | ||
| } | ||
|
|
||
| for (var i = 0; i < 3; i++) | ||
| eventSender.keyDown('\t'); | ||
|
|
||
| finishJSTest(); | ||
| }; | ||
|
|
||
| window.addEventListener('load', runTest); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p>This test ensures that we can tab to all anchor elements. Press tab three | ||
| times to focus the elements below. | ||
|
|
||
| <p><a onfocus="testPassed('gave focus to focusable element')" href="#">Focusable</a></p> | ||
| <p><a onfocus="testFailed('gave focus to unfocusable element')">Not focusable</a></p> | ||
| <p><a tabindex=0 onfocus="testPassed('gave focus to focusable element')" href="#">Focusable</a></p> | ||
| <p><a tabindex=0 onfocus="testPassed('gave focus to focusable element')">Focusable</a></p> | ||
| <p><input onfocus="testFailed('should have stopped testing before this element')"></p> | ||
|
|
||
| <p>Result | ||
|
|
||
| <div id="console"></div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
LayoutTests/fast/forms/focus-on-control-with-zero-size-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| Check if a control won't loose focus when it becomes 0-size. | ||
| PASS document.activeElement is input1 | ||
| PASS input1.value is "01" | ||
| PASS document.activeElement is input1 | ||
|
|
||
| Check if 0-size control can get focus. | ||
| PASS document.activeElement is input1 | ||
| PASS successfullyParsed is true | ||
|
|
||
| TEST COMPLETE | ||
|
|
55 changes: 55 additions & 0 deletions
55
LayoutTests/fast/forms/focus-on-control-with-zero-size.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!DOCTYPE html> | ||
| <body> | ||
| <script src="../../resources/js-test.js"></script> | ||
| <style> | ||
| input { | ||
| border: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <input id="input1"> | ||
| <script> | ||
| function handleKeydown(event) { | ||
| event.target.style.width = '0px'; | ||
| } | ||
|
|
||
| function handleBlur(event) { | ||
| testFailed('Event: blur'); | ||
| event.target.style.width = ''; | ||
| } | ||
|
|
||
| window.onload = function() { | ||
| debug('Check if a control won\'t loose focus when it becomes 0-size.'); | ||
| input1.focus(); | ||
| input1.addEventListener('keydown', handleKeydown, false); | ||
| input1.addEventListener('blur', handleBlur, false); | ||
| eventSender.keyDown('0'); | ||
| event.target.removeEventListener('keydown', handleKeydown); | ||
| setTimeout(step2, 1); | ||
| }; | ||
|
|
||
| function step2() { | ||
| // We need to check activeElement twice because | ||
| // FrameSelection::setFocusedNodeIfNeeded can change focus. | ||
| shouldBe('document.activeElement', 'input1'); | ||
| eventSender.keyDown('1'); | ||
| shouldBeEqualToString('input1.value', '01'); | ||
| shouldBe('document.activeElement', 'input1'); | ||
|
|
||
| debug(''); | ||
| debug('Check if 0-size control can get focus.'); | ||
| input1.removeEventListener('blur', handleBlur); | ||
| input1.blur(); | ||
| shouldBe('document.activeElement', 'document.body', true); | ||
| input1.style.height = '0px'; | ||
| shouldBe('input1.offsetHeight', '0', true); | ||
| input1.focus(); | ||
| shouldBe('document.activeElement', 'input1'); | ||
|
|
||
| finishJSTest(); | ||
| } | ||
|
|
||
| jsTestIsAsync = true; | ||
| </script> | ||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters