Use slot fallback to render optgroup label attr

josepharhar · chromium-wpt-export-bot · commit ba5534a07bdd · 2026-06-18T13:03:12.000-07:00
Instead of setting display:none on the element which holds the label attribute when a legend element is present, we can put the label attribute holding element as a child of a new slot for the legend element, so it automatically gets rendered when there is no legend element. The legend element is only supposed to be the first element in the optgroup as per the content model in the HTML spec, so this patch also enforces that by only slotting the legend element in when it is the first child element. Allowing or using the legend element inside of optgroups was a new feature with customizable select, so compat risk is low. Context: whatwg/html#12201 (comment) There are a11y test expectations because the UA shadowroot is being changed, but this should not be visible to ATs because the new nodes are marked as invisible and ignored, and only appear in the internal "blink" a11y trees as opposed to real platform trees. Change-Id: I776fee963146abbad2028638479df7d3362c35ac Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7629416 Reviewed-by: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1649235}
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label-ref.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<button class=customizable-select-button popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>one</span>
+</button>
+<div id=popover popover=auto class=customizable-select-popover>
+  <div class="customizable-select-option selected">one</div>
+  <div class=customizable-select-optgroup>
+    <div class=customizable-select-legend>legend</div>
+    <div class=customizable-select-option>two</div>
+  </div>
+  <div class=customizable-select-optgroup>
+    <div class=customizable-select-legend>label</div>
+    <div class=customizable-select-option>three</div>
+    <div class=customizable-select-legend>legend after option</div>
+  </div>
+</div>
+
+<script>
+document.getElementById('popover').showPopover({ source: button });
+</script>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-optgroup-legend-and-label.html
@@ -2,7 +2,7 @@
 <html class=reftest-wait>
 <link rel=author href="mailto:jarhar@chromium.org">
 <link rel=help href="https://issues.chromium.org/issues/378601807">
-<link rel=match href="select-appearance-optgroup-legend-ref.html">
+<link rel=match href="select-appearance-optgroup-legend-and-label-ref.html">
 <meta name=assert content="The legend element should take precedence over the label attribute">
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
@@ -23,6 +23,10 @@
     <legend>legend</legend>
     <option>two</option>
   </optgroup>
+  <optgroup label=label>
+    <option>three</option>
+    <legend>legend after option</legend>
+  </optgroup>
 </select>
 
 <script>
