Make customizable select button inert

Making the button inert means that we don't need other fixes to prevent activation of the button, so this patch removes them. Reducing other fixes will also make the spec simpler. The decision to make the button inert was made during a discussion with accessibility experts. Change-Id: I5199795c48193ce49a0459707fb86a1253faf0ed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6004443 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: David Baron <[email protected]> Cr-Commit-Position: refs/heads/main@{#1383054}
web-platform-tests · Nov 14, 2024 · 6176095 · 6176095
1 parent 14e1c76
commit 6176095
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/...ntics/forms/the-select-element/customizable-select/select-button-behaviors.tentative.html b/...ntics/forms/the-select-element/customizable-select/select-button-behaviors.tentative.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/6004443">
+<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>
+
+<style>
+select,::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<form>
+  <select>
+    <button id=btninselect>button in select</button>
+    <option>option</option>
+  </select>
+  <button id=btninform>button in form</button>
+</form>
+
+<script>
+const select = document.querySelector('select');
+const btninselect = document.getElementById('btninselect');
+const btninform = document.getElementById('btninform');
+const form = document.querySelector('form');
+
+promise_test(async () => {
+  assert_false(btninselect.matches(':default'),
+    'Button in select should not match :default.');
+  assert_true(btninform.matches(':default'),
+    'Button in form should match :default.');
+
+
+  let formWasSubmitted = false;
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    formWasSubmitted = true;
+  }, {once: true});
+
+  await test_driver.click(select);
+  assert_false(formWasSubmitted,
+    'Clicking the select button should not submit the form.');
+
+  await test_driver.click(btninform);
+  assert_true(formWasSubmitted,
+    'Clicking the button in the form should submit the form.');
+}, 'Select button should not be the default form submit button.');
+
+promise_test(async () => {
+  select.setAttribute('disabled', '');
+  assert_false(btninselect.matches(':disabled'));
+}, 'Select button should not inherit :disabled from select.');
+</script>