[reading-flow] Display: contents elements can be focusable

CSSWG has resolved that reading-flow does not affect whether an element is focusable. Given this, we should remove the check in Element that forbids display: contents with reading-flow to be focusable. We update the FocusNavigation logic such that the display: contents elements are visited last, after all reading flow items found within the layout box. Change-Id: Iadd9636166628361b001df7b63b2ee98072a89d5 Bug: 346979043 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5656691 Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Di Zhang <dizhangg@chromium.org> Cr-Commit-Position: refs/heads/main@{#1321829}
web-platform-tests · Jul 1, 2024 · ce2cfa3 · ce2cfa3
1 parent 12e2b01
commit ce2cfa3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/shadow-dom/focus-navigation/reading-flow/tentative/grid-order-across-scopes.html b/shadow-dom/focus-navigation/reading-flow/tentative/grid-order-across-scopes.html
@@ -18,15 +18,17 @@
 }
 </style>
 
+<!-- Since C is a direct reading flow item, it is visited first. -->
+<!-- Since B,A are inside a display: contents, they are visited after. -->
 <div class="test-case" data-expect="C,B,A"
-      data-description="Grid items in shadow root that is a display contents grid item">
-  <div class=wrapper id="root">
+      data-description="Grid items in shadow host that is a display contents grid item">
+  <div class=wrapper>
     <div style="display: contents">
       <template shadowrootmode=open>
         <slot></slot>
       </template>
-      <button id="A2" style="order: 2">A</button>
-      <button id="B2" style="order: 1">B</button>
+      <button id="A" style="order: 2">A</button>
+      <button id="B" style="order: 1">B</button>
     </div>
     <button id="C" style="order: 3">C</button>
   </div>

diff --git a/shadow-dom/focus-navigation/reading-flow/tentative/grid-order-on-shadow-host.html b/shadow-dom/focus-navigation/reading-flow/tentative/grid-order-on-shadow-host.html
@@ -18,19 +18,19 @@
 }
 </style>
 
-<div class="test-case" data-expect="root/B,root/A"
+<div class="test-case" data-expect="host/B,host/A"
       data-description="Grid items in shadow host with delegatesFocus">
-  <div id="root" class="wrapper" tabindex="0">
+  <div id="host" class="wrapper" tabindex="0">
     <template shadowrootmode="open" shadowrootdelegatesfocus>
       <button id="A" style="order: 2">A</button>
       <button id="B" style="order: 1">B</button>
     </template>
   </div>
 </div>
 
-<div class="test-case" data-expect="root2,root2/B,root2/A"
+<div class="test-case" data-expect="host2,host2/B,host2/A"
       data-description="Grid items in shadow host without delegatesFocus">
-  <div id="root2" class="wrapper" tabindex="0">
+  <div id="host2" class="wrapper" tabindex="0">
     <template shadowrootmode="open">
       <button id="A" style="order: 2">A</button>
       <button id="B" style="order: 1">B</button>

diff --git a/shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-slots.html b/shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-slots.html
@@ -19,7 +19,7 @@
 }
 </style>
 
-<span id="root1" class="test-case" data-expect="b1,a1,c1"
+<span id="host1" class="test-case" data-expect="b1,a1,c1"
       data-description="Slot assigned element is a grid with reading-flow.">
   <template shadowrootmode="open">
     <style>
@@ -38,7 +38,7 @@
 </span>
 <br>
 
-<span id="root2" class="test-case" data-expect="b2,a2,c2"
+<span id="host2" class="test-case" data-expect="b2,a2,c2"
       data-description="Slot is a grid with reading-flow.">
   <template shadowrootmode="open">
     <style>
@@ -55,7 +55,7 @@
 </span>
 <br>
 
-<span id="root3" class="test-case" data-expect="root3/o2,root3/o4,o1,o3,o5"
+<span id="host3" class="test-case" data-expect="host3/o2,host3/o4,o1,o3,o5"
       data-description="Slot is inside a grid container with reading-flow.">
   <template shadowrootmode="open">
     <style>
@@ -70,14 +70,14 @@
       <button style="order: 2" id="o2">Order 2</button>
     </div>
   </template>
-  <button style="order: 5" id="o5">Order 5</button>
-  <button style="order: 1" id="o1">Order 1</button>
-  <button style="order: 3" id="o3">Order 3</button>
+  <button style="order: 5" id="o5">Slotted 5</button>
+  <button style="order: 1" id="o1">Slotted 1</button>
+  <button style="order: 3" id="o3">Slotted 3</button>
 </span>
 <br>
 
-<span id="root4" class="test-case"
-      data-expect="root4/after,root4/before,b4,a4,d42,d41,d43,c4"
+<span id="host4" class="test-case"
+      data-expect="host4/after,host4/before,b4,a4,d42,d41,d43,c4"
       data-description="Slot is a grid with reading-flow inside a grid container with reading-flow.">
   <template shadowrootmode="open">
     <style>
@@ -103,8 +103,8 @@
 </span>
 <br>
 
-<span id="root5" class="test-case" data-expect="b51,a51,c51,b52,a52,c52"
-      data-description="Slot is not inside a shadow root.">
+<span id="host5" class="test-case" data-expect="b51,a51,c51,b52,a52,c52"
+      data-description="Slot is not inside a shadow host.">
   <div class="wrapper">
     <slot name=slot1>
       <button style="order: 2" id="a51">Item A</button>
@@ -120,7 +120,7 @@
 </span>
 <br>
 
-<span id="root6" class="test-case" data-expect="root6/after,root6/before,b6,a6"
+<span id="host6" class="test-case" data-expect="host6/after,host6/before,b6,a6"
       data-description="Slot is a display contents inside a grid container.">
   <template shadowrootmode="open">
     <style>
@@ -140,7 +140,7 @@
 </span>
 <br>
 
-<span id="root7" class="test-case" data-expect="a7,b7,root7/after,root7/before"
+<span id="host7" class="test-case" data-expect="a7,b7,host7/after,host7/before"
       data-description="Slot is a display block inside a grid container.">
   <template shadowrootmode="open">
     <style>

diff --git a/shadow-dom/focus-navigation/reading-flow/tentative/grid-order.html b/shadow-dom/focus-navigation/reading-flow/tentative/grid-order.html
@@ -73,6 +73,20 @@
   </div>
 </div>
 
+<div class="test-case" data-expect="order1B,order2B,order3B,order4B,div1B,div2B"
+     data-description="Items in display contents are sorted in same grid container, with focusable display contents divs at the end of the focus sequence.">
+  <div class="wrapper">
+    <div id="div1B" style="display: contents" tabindex="0">
+      <button id="order3B" style="order: 3">Order 3</button>
+      <button id="order1B" style="order: 1">Order 1</button>
+      <div id="div2B" style="display: contents" tabindex="0">
+        <button id="order4B" style="order: 4">Order 4</button>
+        <button id="order2B" style="order: 2">Order 2</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="test-case" data-expect="d4,b4,c4,a4"
       data-description="Items in display block are not in parent grid container.">
   <div class="wrapper">