Improve base-select initial focus

This patch checks to see if the selected option is focusable before trying to focus it when opening the picker. It also chooses a fallback option to focus in the case that the selected option is not focusable. Fixed: 360357707 Change-Id: I1c2943f5492d4eb299f5b6e162e2c2c1df152851 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5825538 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1354889}
web-platform-tests · Sep 13, 2024 · d97ddaf · d97ddaf
1 parent d83edec
commit d97ddaf
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/...ics/forms/the-select-element/stylable-select/select-keyboard-hidden-option.tentative.html b/...ics/forms/the-select-element/stylable-select/select-keyboard-hidden-option.tentative.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/whatwg/html/issues/9799">
+<link rel=help href="https://issues.chromium.org/issues/360357707">
+<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>
+<script src="/resources/testdriver-actions.js"></script>
+
+<style>
+select, select::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <option hidden>hidden one</option>
+  <option class=two>two</option>
+  <option class=three>three</option>
+</select>
+
+<script>
+const ArrowDown = '\uE015';
+
+promise_test(async () => {
+  const select = document.querySelector('select');
+  const hiddenOption = document.querySelector('option[hidden]');
+  const optionTwo = document.querySelector('option.two');
+  const optionThree = document.querySelector('option.three');
+
+  select.focus();
+  await test_driver.send_keys(select, ' ');
+  assert_true(select.matches(':open'),
+    'Select should open after pressing spacebar.');
+
+  assert_equals(document.activeElement, optionTwo,
+    'The first visible <option> should get focused after opening picker.');
+
+  await (new test_driver.Actions()
+    .keyDown(ArrowDown)
+    .keyUp(ArrowDown))
+    .send();
+
+  assert_equals(document.activeElement, optionThree,
+    'The second visible <option> should get focused after arrowdown.');
+}, 'Hidden <option>s should not get initial focus.');
+</script>