Replace base-select svg with disclosure-open

This was suggested here: w3c/csswg-drafts#10380 (comment) This patch also adds min-inline-size and min-block-size to ::select-fallback-button because changing the icon caused the total size of the button to decrease which revealed the lack of min sizing which is already tested by select-accessibility-minimum-target-size.tentative.html The UA select:open rules caused a performance regression for large <select>s because it caused a style recalc immediately after opening the appearance:auto picker which in re-serializes all of the data for the popup and sends it to the popup, which is very slow for large selects. I addressed this by starting to match :open before creating the popup in MenuListSelectType::ShowPopup. Bug: 1511354 Change-Id: Id7b3b0aa6c9c79299240a7212023f849f3703fb0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5660759 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: David Baron <[email protected]> Cr-Commit-Position: refs/heads/main@{#1347324}
web-platform-tests · Aug 27, 2024 · 8108d04 · 8108d04
1 parent 2767f5f
commit 8108d04
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 33 deletions.
diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
@@ -59,24 +59,20 @@
   align-items: center;
   overflow-x: hidden;
   overflow-y: hidden;
+  /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
+   * https://github.com/openui/open-ui/issues/1026
+   * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1.2em);
 }
 
-.stylable-select-button-icon {
-  opacity: 1;
-  outline: none;
-  margin-inline-start: 0.25em;
-  padding-block: 2px;
-  padding-inline: 3px;
-  block-size: 1.0em;
-  inline-size: 1.2em;
-  min-inline-size: 1.2em;
-  max-inline-size: 1.2em;
-  display: block;
+.stylable-select-button::after {
+  padding-inline-start: 0.5em;
+  content: counter(fake-counter-name, disclosure-closed);
+}
 
-  color: light-dark(black, white);
-  stroke: currentColor;
-  stroke-width: 3;
-  stroke-linejoin: round;
+.stylable-select-button.open::after {
+  content: counter(fake-counter-name, disclosure-open);
 }
 
 .stylable-select-selectedoption {

diff --git a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js b/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html b/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
@@ -1,20 +1,16 @@
 <!DOCTYPE html>
 <link rel=stylesheet href="resources/stylable-select-styles.css">
-<script src="resources/stylable-select-utils.js"></script>
 
 <style>
-.stylable-select-button-icon svg {
-  stroke: red !important;
+.stylable-select-selectedoption::after {
+  padding-inline-start: 0.5em;
+  content: counter(fake-counter-name, disclosure-closed);
+  color: red;
 }
 </style>
 
 <div class=stylable-select-container>
   <button class=stylable-select-button popovertarget=popover id=button>
     <span class=stylable-select-selectedoption>option</span>
-    <div class=stylable-select-button-icon></div>
   </button>
 </div>
-
-<script>
-populateFallbackButtonIcon();
-</script>
diff --git a/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html b/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
@@ -7,8 +7,8 @@
 select {
   appearance: base-select;
 }
-select::select-fallback-button-icon {
-  stroke: red;
+select::select-fallback-button::after {
+  color: red;
 }
 </style>