Skip to content

Commit

Permalink
Implement dialog initial focus proposal
Browse files Browse the repository at this point in the history
This has been discussed here:
whatwg/html#4184
whatwg/html#8199

The gist of the changes are:
1. Make the dialog focusing steps look at keyboard focusable elements
   instead of any focusable element.
2. Make the dialog element itself get focus if it has the autofocus
   attribute set.
3. Make the dialog element itself get focus as a fallback instead of
   focus being "reset" to the body element.

Fixed: 1193482
Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea
  • Loading branch information
josepharhar authored and chromium-wpt-export-bot committed Jan 11, 2023
1 parent aef5bfe commit ab75cf8
Show file tree
Hide file tree
Showing 40 changed files with 226 additions and 66 deletions.
1 change: 1 addition & 0 deletions css/css-anchor-position/anchor-position-top-layer-001.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
outline: none;
}

body {
Expand Down
1 change: 1 addition & 0 deletions css/css-anchor-position/anchor-position-top-layer-002.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
outline: none;
}

body {
Expand Down
1 change: 1 addition & 0 deletions css/css-anchor-position/anchor-position-top-layer-003.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
outline: none;
}

body {
Expand Down
1 change: 1 addition & 0 deletions css/css-anchor-position/anchor-position-top-layer-004.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
height: 100px;
background: lime;
anchor-scroll: --a;
outline: none;
}

body {
Expand Down
1 change: 1 addition & 0 deletions css/css-anchor-position/anchor-position-top-layer-005.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
border: 0;
padding: 0;
inset: auto;
outline: none;
}

dialog::backdrop {
Expand Down
1 change: 1 addition & 0 deletions css/css-anchor-position/anchor-position-top-layer-006.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
margin: 0;
border: 0;
padding: 0;
outline: none;
}

dialog::backdrop {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<style>
.box { width: 100px; height: 100px; border: 1px solid black; }
.hidden { content-visibility: hidden }
#dialog { outline: none; }
</style>

<div id=container class=box>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

<style>
.box { width: 100px; height: 100px; border: 1px solid black; }
dialog { outline: none; }
</style>

<div id=container class=box>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@

view-transition-name: dialog;
contain: layout;

outline: none;
}

#target::backdrop {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@

view-transition-name: dialog;
contain: layout;

outline: none;
}

#target::backdrop {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
padding: 0px;
border: none;
margin: 0px;
outline: none;
}

#bottom::backdrop {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/pull/8199">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<dialog autofocus id=autofocusdialog>
<button>focusable button</button>
<button autofocus class=target>autofocusable button</button>
</dialog>

<dialog id=keyboardfocusdialog>
<button tabindex="-1">mouse focusable button</button>
<button class=target>keyboard focusable button</button>
</dialog>

<dialog id=autofocuswithoutkeyboarddialog>
<button>keyboard focusable button</button>
<button tabindex="-1" autofocus class=target>mouse focusable autofocus button</button>
</dialog>

<dialog id=subtree>
<div>
<button tabindex="-1">mouse focusable button</button>
<button class=target>keyboard focusable button</button>
</div>
</dialog>

<dialog id=nestedbuttons>
<button tabindex="-1">
<span>mouse focusable button</span>
<button tabindex="-1">nested mouse focusable button</button>
</button>
<button class=target>keyboard focusable button</button>
</dialog>

<script>
test(t => {
const dialog = document.getElementById('autofocusdialog');
const target = dialog.querySelector('.target');
t.add_cleanup(() => {
if (dialog.open)
dialog.close();
});

dialog.showModal();
assert_equals(document.activeElement, dialog, 'showModal: autofocus dialog should get initial focus.');
dialog.close();

dialog.show();
assert_equals(document.activeElement, target, 'show: autofocus dialog should get initial focus.');
dialog.close();
}, 'dialog element with autofocus should get initial focus.');

test(t => {
const dialog = document.getElementById('keyboardfocusdialog');
const target = dialog.querySelector('.target');
t.add_cleanup(() => {
if (dialog.open)
dialog.close();
});

dialog.showModal();
assert_equals(document.activeElement, target, 'showModal: keyboard focusable button should have been focused.');
dialog.close();

dialog.show();
assert_equals(document.activeElement, target, 'show: keyboard focusable button should have been focused.');
dialog.close();
}, 'Only keyboard-focusable elements should get dialog initial focus.');

test(() => {
const dialog = document.getElementById('autofocuswithoutkeyboarddialog');
const target = dialog.querySelector('.target');

dialog.showModal();
assert_equals(document.activeElement, target, 'showModal: autofocus button should have been focused.');
dialog.close();

dialog.show();
assert_equals(document.activeElement, target, 'show: autofocus button should have been focused.');
dialog.close();
}, 'Autofocus takes precedence over keyboard-focusable requirement.');

test(() => {
const dialog = document.getElementById('subtree');
const target = dialog.querySelector('.target');

dialog.showModal();
assert_equals(document.activeElement, target, 'showModal: keyboard focusable button should have been focused.');
dialog.close();

dialog.show();
assert_equals(document.activeElement, target, 'show: keyboard focusable button should have been focused.');
dialog.close();
}, 'Only keyboard-focusable elements should get dialog initial focus including in subtrees.');

test(() => {
const dialog = document.getElementById('nestedbuttons');
const target = dialog.querySelector('.target');

dialog.showModal();
assert_equals(document.activeElement, target, 'showModal: keyboard focusable button should have been focused.');
dialog.close();

dialog.show();
assert_equals(document.activeElement, target, 'show: keyboard focusable button should have been focused.');
dialog.close();
}, 'Only keyboard-focusable elements should get dialog initial focus including in nested buttons.');
</script>
Loading

0 comments on commit ab75cf8

Please sign in to comment.