feat(web): keyboard controls for Opal tabs and the Plugins page

Closed
RA
3d ago
+525-57

Description

Keyboard controls for Opal Tabs and the admin Plugins page. Stacked on #16225.

  • Interactive focus: keyboard focus paints the hover state, not the browser's blue ring.
  • Tabs:
    • Each tab is a Tab stop. Arrows move focus, and Enter or Space selects (activationMode="manual" is the new default).
    • A border-04 ring follows the keyboard only: a click shows none, arrows or Tab show it on the next tab, and Escape clears it.
    • A click focuses the tab, because Safari and Firefox on macOS do not.
  • Search to results: useSearchResultsNavigation (src/lib/common/hooks.ts) returns searchProps, entryProps and resultsProps, so pages hold no key logic.
    • ArrowDown (or Enter in the text) moves from search to the first card. ArrowDown also works from the search field's × and from the filter tabs.
    • Arrows move between cards. ArrowUp from the top row, Escape, or typing on a card returns to search.
    • The Plugins page and the connector catalog both use it.
  • Clear button: InputTypeIn's × is tertiary and keeps focus in the field after a clear.

Additional Options

  • [Optional] Please cherry-pick this PR to the latest release version.
  • [Optional] Override Linear Check

Summary by cubic

Adds keyboard controls for Opal tabs and the admin Plugins page, replacing the browser's focus ring with the hover state on interactive surfaces.

Keyboard navigation

  • Tabs use manual activation: arrows move focus, Enter or Space selects, and each tab is its own Tab stop.
  • A border-04 ring follows the keyboard only; a left click shows none, and Escape clears it.
  • A plain left click focuses the tab to match Safari and Firefox on macOS; right clicks and Ctrl-clicks do not.
  • The new useSearchResultsNavigation hook connects search to results with arrows, Escape, and type-ahead, shared by the Plugins page and the connector catalog.
  • ArrowDown on the filter tabs or the search field's clear button also moves to the first result; the clear button is tertiary and keeps focus in the field.
  • useGridNavigation returns to keyboard mode when Tab reaches any control inside a result card, so its focus stays visible.

Summary by CodeRabbit

  • New Features
    • Added keyboard navigation for plugin and connector search results, including moving between the search field and results, returning to search with Escape, and typing to resume a search.
    • Tabs now use manual activation by default: arrow keys move focus, while Enter or Space selects the focused tab.
  • Improvements
    • Clearing a text field returns focus to the input.
    • Keyboard-focused tabs and interactive controls now have clearer focus styling.