diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
index 0052b3863e2e..ee94ae35c1e3 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-utils.js
deleted file mode 100644
index 38e934591614..000000000000
--- a/testing/web-platform/tests/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 =
- ``;
- });
-}
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
index 575b42a200e3..224bdd7eb5d7 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color-ref.html
@@ -1,20 +1,16 @@
-
-
-
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
index 13026cd5f8c4..833e55164b2b 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-icon-color.tentative.html
+++ b/testing/web-platform/tests/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;
}