fix(ui-mode): make the filter summary reachable from the keyboard - #42449

Closes #42439

problem

the filter summary under the search input in UI Mode toggles the status and project filters when you click it, but it is a div with an onClick:

<div className='filter-summary' title={...} onClick={() => setExpanded(!expanded)}>

so tab skips it, enter and space do nothing, and a screen reader announces it as ordinary text rather than a control that expands something. the chevron next to it is already a button, which makes the summary the odd one out rather than a deliberate choice.

fix

make it a real button with aria-expanded.

using a native button rather than role='button' plus tabIndex plus a keydown handler means focus, enter, space and the button role all come from the platform. it also matches Expandable right above it, which already renders its toggle as a button with aria-expanded.

the css resets the button chrome the same way .expandable-title-button does and adds the same focus ring, so it looks the way it did:

.filter-summary {
  all: unset;
  display: block;
  /* ...the previous properties... */
}

.filter-summary:focus-visible {
  outline: 1px solid var(--vscode-focusBorder);
  outline-offset: -1px;
}

one thing worth calling out: the original properties lived in a rule shared with .filter-title, so the reset is in its own .filter-summary block rather than added to the shared one. .filter-title is untouched.

test

should toggle filters from the keyboard in ui-mode-test-filters.spec.ts, close to your snippet in the issue, plus the aria state and the space key:

await expect(summary).toHaveRole('button');
await expect(summary).toHaveAttribute('aria-expanded', 'false');
await summary.focus();
await expect(summary).toBeFocused();
await summary.press('Enter');
await expect(page.getByTestId('status-filters')).toBeVisible();
await expect(summary).toHaveAttribute('aria-expanded', 'true');
await summary.press('Space');
await expect(page.getByTestId('status-filters')).toBeHidden();

on main it fails at the first assertion, toHaveRole('button').

verification

disclaimer: this contribution was prepared with the assistance of an ai agent. i reproduced the behaviour, checked how Expandable solves the same problem before picking an approach, and ran the ui mode suites locally before opening this.