Implement dialog initial focus proposal

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
web-platform-tests · Jan 11, 2023 · ab75cf8 · ab75cf8
1 parent aef5bfe
commit ab75cf8
Show file tree

Hide file tree

Showing 40 changed files with 226 additions and 66 deletions.
diff --git a/css/css-anchor-position/anchor-position-top-layer-001.html b/css/css-anchor-position/anchor-position-top-layer-001.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {

diff --git a/css/css-anchor-position/anchor-position-top-layer-002.html b/css/css-anchor-position/anchor-position-top-layer-002.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {

diff --git a/css/css-anchor-position/anchor-position-top-layer-003.html b/css/css-anchor-position/anchor-position-top-layer-003.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {

diff --git a/css/css-anchor-position/anchor-position-top-layer-004.html b/css/css-anchor-position/anchor-position-top-layer-004.html
@@ -22,6 +22,7 @@
   height: 100px;
   background: lime;
   anchor-scroll: --a;
+  outline: none;
 }
 
 body {

diff --git a/css/css-anchor-position/anchor-position-top-layer-005.html b/css/css-anchor-position/anchor-position-top-layer-005.html
@@ -35,6 +35,7 @@
   border: 0;
   padding: 0;
   inset: auto;
+  outline: none;
 }
 
 dialog::backdrop {

diff --git a/css/css-anchor-position/anchor-position-top-layer-006.html b/css/css-anchor-position/anchor-position-top-layer-006.html
@@ -34,6 +34,7 @@
   margin: 0;
   border: 0;
   padding: 0;
+  outline: none;
 }
 
 dialog::backdrop {

diff --git a/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html b/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
@@ -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>

diff --git a/css/css-contain/content-visibility/content-with-top-layer-ref.html b/css/css-contain/content-visibility/content-with-top-layer-ref.html
@@ -4,6 +4,7 @@
 
 <style>
 .box { width: 100px; height: 100px; border: 1px solid black; }
+dialog { outline: none; }
 </style>
 
 <div id=container class=box>

diff --git a/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html b/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
@@ -18,6 +18,8 @@
 
   view-transition-name: dialog;
   contain: layout;
+
+  outline: none;
 }
 
 #target::backdrop {

diff --git a/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html b/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
@@ -18,6 +18,8 @@
 
   view-transition-name: dialog;
   contain: layout;
+
+  outline: none;
 }
 
 #target::backdrop {

diff --git a/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html b/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order.html
@@ -6,6 +6,7 @@
     padding: 0px;
     border: none;
     margin: 0px;
+    outline: none;
 }
 
 #bottom::backdrop {

diff --git a/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html b/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<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>