Set minimum target size of 24px for appearance:base-select

According to accessibility guidelines, we must ensure that all of the pointer targets in appearance:base-select must be at least 24x24 CSS pixels. openui/open-ui#1026 Bug: 1511354 Change-Id: Iba814399e4061f7ce36c24296aef37a540444612 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5503502 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1301595}
web-platform-tests · May 15, 2024 · f23e47a · f23e47a
1 parent 6bdb665
commit f23e47a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
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
@@ -32,8 +32,10 @@
   padding-inline: 2px;
   padding-block-start: 0;
   padding-block-end: 1px;
-  min-block-size: 1.2em;
   white-space: nowrap;
+  min-inline-size: 24px;
+  min-block-size: max(24px, 1.2em);
+  align-content: center;
 }
 
 .stylable-select-button {

diff --git a/...he-select-element/stylable-select/select-accessibility-minimum-target-size.tentative.html b/...he-select-element/stylable-select/select-accessibility-minimum-target-size.tentative.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">
+<link rel=help href="https://github.com/openui/open-ui/issues/1026">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select style="appearance:base-select">
+  <option></option>
+</select>
+
+<script>
+const option = document.querySelector('option');
+for (const text of ['', 'i']) {
+  for (const writingMode of ['horizontal-tb', 'vertical-lr', 'vertical-rl']) {
+    promise_test(async () => {
+      document.documentElement.style.writingMode = writingMode;
+      option.textContent = text;
+      await new Promise(requestAnimationFrame);
+
+      const select = document.querySelector('select');
+      const buttonRect = select.getBoundingClientRect();
+      assert_greater_than_equal(buttonRect.width, 24,
+        'Button width must be at least 24 pixels.');
+      assert_greater_than_equal(buttonRect.height, 24,
+        'Button height must be at least 24 pixels.');
+
+      await test_driver.bless();
+      select.showPicker();
+      const optionRect = document.querySelector('option').getBoundingClientRect();
+      assert_greater_than_equal(optionRect.width, 24,
+        'Option width must be at least 24 pixels.');
+      assert_greater_than_equal(optionRect.height, 24,
+        'Option height must be at least 24 pixels.');
+    }, `${writingMode} "${text}": Select with appearance:base-select should have targets for pointer inputs be at least 24x24 CSS pixels.`);
+  }
+}
+</script>