From 8108d046baa2bb0a947617b52dd568f59ec7c27f Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 27 Aug 2024 06:36:26 -0700
Subject: [PATCH] Replace base-select svg with disclosure-open

This was suggested here:
https://github.com/w3c/csswg-drafts/issues/10380#issuecomment-2189397947

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 <jarhar@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1347324}
---
 .../resources/stylable-select-styles.css      | 26 ++++++++-----------
 .../resources/stylable-select-utils.js        |  8 ------
 .../select-icon-color-ref.html                | 12 +++------
 .../select-icon-color.tentative.html          |  4 +--
 4 files changed, 17 insertions(+), 33 deletions(-)
 delete mode 100644 html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js

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
index 0052b3863e2ef5..ee94ae35c1e309 100644
--- 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
deleted file mode 100644
index 38e93459161422..00000000000000
--- a/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function populateFallbackButtonIcon() {
-  document.querySelectorAll('.stylable-select-button-icon').forEach(element => {
-    element.innerHTML =
-      `<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4 6 L10 12 L 16 6"></path>
-      </svg>`;
-  });
-}
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
index 575b42a200e382..224bdd7eb5d746 100644
--- 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
index 13026cd5f8c4ae..833e55164b2bf5 100644
--- 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>