Improve Select combobox keyboard navigation and accessible names, and scope Panel Escape to open comboboxes

[shubham-kumar1-eightfold]

SUMMARY:

Accessibility fixes for the shared Select (combobox) and Panel components, aligning them with the WAI-ARIA APG Combobox and Dialog patterns. These are product-wide and affect every Octuple Select/Panel consumer. The work was driven by an accessibility audit of the "All Filters" panel on the Duplicate Position intake form, and pairs with the consumer-side change in EightfoldAI/vscode#108828.

src/components/Select/Select.tsx

• Keyboard navigation into options (both filterable and non-filterable). In handleInputKeyDown, ArrowDown now moves keyboard focus from the combobox input into the dropdown's option list for both filterable (list-autocomplete) and select-only comboboxes. Previously the filterable && guard meant only filterable selects could enter their options by keyboard; plain dropdowns trapped focus on the input. The behavior is now gated on the dropdown being open (dropdownVisible) and calls event.preventDefault() so the page does not also scroll.
• Accessible name preserved. The input's ariaLabel now falls back to selectInputProps?.ariaLabel (ariaLabel ?? selectInputProps?.ariaLabel) instead of being clobbered to undefined. A combobox name supplied via textInputProps is now kept and announced.
• Valid, unique option ids. Each option id is now derived from the menu id plus the option index (${selectMenuId.current}-option-${index}) instead of option.text + '-' + index. The previous scheme produced invalid and/or duplicate aria-activedescendant IDREFs (e.g. when option text contained spaces or repeated across options); the ids are now stable and unique.
• Active-descendant lifecycle. aria-activedescendant is cleared when the listbox closes (it would otherwise dangle, pointing at an option that has unmounted) and is scoped to this Select's own options, so navigating one combobox no longer stamps another Select's input.
• Clear button accessible name. New optional clearButtonAriaLabel prop (default 'Clear selection') gives the clearable button an accessible name.

src/components/Panel/Panel.tsx

• Scoped, escalating Escape. The default escapeTargetSelector denylist now includes [role="combobox"][aria-expanded="true"]. The Panel's global Escape handler does not close the panel when the Escape target matches this denylist. Scoping the combobox token to aria-expanded="true" produces an "escalating Escape": pressing Escape while a combobox's listbox is open closes only the listbox (the panel stays open); a second Escape (combobox now collapsed, so it no longer matches the denylist) closes the panel. Previously, Escape on a combobox input closed the entire panel in one keystroke.

Tests & snapshot

• Updated Select.test.tsx option-id assertions (selection, onOptionsChange, aria-activedescendant, and pill tests) to the new menu-scoped id scheme.
• Regenerated the Select snapshot for the new ids; no Panel snapshot change.
• Added tests for the clear-button accessible name and for aria-activedescendant being cleared on close and scoped per-Select.

These changes are standards-aligned with the WAI-ARIA APG Combobox and Dialog patterns; the only API addition is the optional, backward-compatible clearButtonAriaLabel prop.

GITHUB ISSUE (Open Source Contributors)

N/A — internal Eightfold accessibility work (see JIRA below).

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-167719

CHANGE TYPE:

• Bugfix Pull Request
• Feature Pull Request

TEST COVERAGE:

• Tests for this change already exist

The Select assertions and snapshot are updated in this PR for the new option ids (see “Tests & snapshot” above) — no reviewer action needed to regenerate snapshots.

TEST PLAN:

Combobox keyboard navigation (Select):

• Open a non-filterable (select-only) Select, then press ArrowDown from the input → focus moves into the option list and the first option becomes active; the page does not scroll.
• Open a filterable Select and confirm ArrowDown still moves focus into the options (no regression).
• With the dropdown closed, ArrowDown does not jump focus into a hidden list.

Accessible name (Select):

• Provide a combobox name via textInputProps.ariaLabel and confirm the combobox input is announced with that name (no longer undefined).

Option ids / active-descendant (Select):

• Inspect rendered options and confirm each option id is unique and valid, and that aria-activedescendant on the input points at the active option's id while navigating with the keyboard. Verify with options whose text contains spaces and/or duplicate text across options.

Escalating Escape (Panel):

• Inside a Panel, open a combobox's listbox and press Escape → only the listbox closes; the panel stays open. Press Escape again (combobox now collapsed) → the panel closes.
• Confirm Escape still closes the panel directly when focus is not on an expanded combobox (no regression to the existing listbox/menu/tooltip/dropdown/tooltip-wrapper behavior).

Cross-repo: validate end-to-end on the "All Filters" panel of the Duplicate Position intake form via EightfoldAI/vscode#108828.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.39%. Comparing base (47ac84c) to head (e833cf3).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1134   +/-   ##
=======================================
  Coverage   84.38%   84.39%           
=======================================
  Files        1230     1230           
  Lines       21427    21433    +6     
  Branches     8132     8137    +5     
=======================================
+ Hits        18081    18088    +7     
+ Misses       3260     3259    -1     
  Partials       86       86           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.