mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-26 12:17:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Don't indicate focus for all form associated elements

Browse source 
This was a misinterpretation of the spec; we should only indicate focus
if the form associated element supports keyboard input, for which
FormAssociatedTextControlElement is a much better match.
This commit is contained in:
Jelle Raaijmakers 2025-08-13 13:51:04 +02:00 • committed by Tim Flynn
commit 7078769ba3
Notes: github-actions[bot] 2025-08-13 13:45:49 +00:00
3 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/DOM/Element.cpp
View file

@ -4078,7 +4078,7 @@ bool Element::should_indicate_focus() const
// * If the element which supports keyboard input (such as an input element, or any other element that would // * If the element which supports keyboard input (such as an input element, or any other element that would
// triggers a virtual keyboard to be shown on focus if a physical keyboard were not present), indicate focus. // triggers a virtual keyboard to be shown on focus if a physical keyboard were not present), indicate focus.
if (is<HTML::FormAssociatedElement>(this)) if (is<HTML::FormAssociatedTextControlElement>(this))
return true; return true;
// * If the user interacts with the page via keyboard or some other non-pointing device, indicate focus. (This means // * If the user interacts with the page via keyboard or some other non-pointing device, indicate focus. (This means

2
Tests/LibWeb/Text/expected/focus-shouldIndicateFocus.txt Normal file
View file

@ -0,0 +1,2 @@
INPUT: rgb(0, 0, 0) auto 3px
BUTTON: rgb(0, 0, 0) 0px

17
Tests/LibWeb/Text/input/focus-shouldIndicateFocus.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<input value="foo"><br>
<button>bar</button>
<script src="include.js"></script>
<script>
test(() => {
const reportOutline = e => { println(`${e.target.tagName}: ${window.getComputedStyle(e.target).outline}`); }
const runOutlineTest = (selector) => {
const elm = document.querySelector(selector);
elm.addEventListener('focus', reportOutline);
internals.click(elm.offsetLeft + 5, elm.offsetTop + 5);
};
runOutlineTest('input');
runOutlineTest('button');
});
</script>