modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fix(web): section-header hover outline + clear buttons out of tab order (#1487) (#1488)

Browse source 
* fix(web): section-header hover outline + clear buttons out of tab order (#1487)

Two button-behavior adjustments:

1. History section headers (Pinned / History) now use the filter-toggle
   style — a thin outline on hover instead of a background fill — by pointing
   the `sectionHeader` Group variant at the shared `.filter-toggle` class. The
   open section keeps its filled background (passed per-instance via `bg`).

2. Every input clear button added in #1448 is removed from the keyboard tab
   order via `tabIndex={-1}` (CloseButton clear buttons app-wide, plus the
   Autocomplete clear button through `theme/Autocomplete.ts` clearButtonProps),
   so tabbing through a form moves to the next field, not onto the clear button.
   The buttons stay mouse-clickable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): apply filter-toggle hover outline to Resources accordion headers (#1487)

The Resources screen `disclosure` accordion controls now share the same
outline-on-hover treatment as the filter toggle buttons and History section
headers: a thin border on hover instead of a background fill, plus a filled
background when the section is open (keyed off `aria-expanded`). The `.filter-
toggle` class is added to the disclosure control slot; the default-variant
accordion (Server Settings) keeps its background-fill hover via a `:not(.filter-
toggle)` guard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(web): extract ClearButton element, replace 34 inline clear buttons

Addresses the code-review suggestion on PR #1488: the same five-line
`CloseButton` clear-affordance block (aria-label="Clear" + tabIndex={-1} +
onClick) was hand-copied across 17 files. Extract a single
`elements/ClearButton` (Mantine `CloseButton.withProps` with the aria-label and
tabIndex baked in) and replace all 34 call sites, so the clear-button contract
lives in one place. A global CloseButton theme default would be wrong here — it
would also catch tabbable modal-close X buttons and the Select clear buttons —
so a dedicated element is the right altitude.

Net -151 lines. Adds element unit tests + a Storybook play test covering the
aria-label / tabIndex / clickable contract for all sites at once.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-06-14 22:27:46 -04:00 • committed by GitHub
commit bb32d1db5f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 180 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

29
clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
View file

@ -3,13 +3,13 @@ import {
ActionIcon,
Button,
Checkbox,
CloseButton,
Group,
NumberInput,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { ClearButton } from "../../elements/ClearButton/ClearButton";
import type {
InspectorServerSettings,
OAuthSettings,
@ -91,10 +91,7 @@ function KeyValueRows({
rightSectionPointerEvents="auto"
rightSection={
item.key ? (
<CloseButton
aria-label="Clear"
onClick={() => onChange(index, "", item.value)}
/>
<ClearButton onClick={() => onChange(index, "", item.value)} />
) : null
}
/>
@ -105,10 +102,7 @@ function KeyValueRows({
rightSectionPointerEvents="auto"
rightSection={
item.value ? (
<CloseButton
aria-label="Clear"
onClick={() => onChange(index, item.key, "")}
/>
<ClearButton onClick={() => onChange(index, item.key, "")} />
) : null
}
/>
@ -145,8 +139,7 @@ function RootRows({
rightSectionPointerEvents="auto"
rightSection={
root.uri ? (
<CloseButton
aria-label="Clear"
<ClearButton
onClick={() => onChange(index, "", root.name ?? "")}
/>
) : null
@ -159,10 +152,7 @@ function RootRows({
rightSectionPointerEvents="auto"
rightSection={
root.name ? (
<CloseButton
aria-label="Clear"
onClick={() => onChange(index, root.uri, "")}
/>
<ClearButton onClick={() => onChange(index, root.uri, "")} />
) : null
}
/>
@ -372,8 +362,7 @@ export function ServerSettingsForm({
rightSectionPointerEvents="auto"
rightSection={
settings.oauthClientId ? (
<CloseButton
aria-label="Clear"
<ClearButton
onClick={() =>
onOAuthChange({ ...currentOAuth(), clientId: "" })
}
@ -394,8 +383,7 @@ export function ServerSettingsForm({
rightSectionPointerEvents="auto"
rightSection={
settings.oauthClientSecret ? (
<CloseButton
aria-label="Clear"
<ClearButton
onClick={() =>
onOAuthChange({ ...currentOAuth(), clientSecret: "" })
}
@ -415,8 +403,7 @@ export function ServerSettingsForm({
rightSectionPointerEvents="auto"
rightSection={
settings.oauthScopes ? (
<CloseButton
aria-label="Clear"
<ClearButton
onClick={() =>
onOAuthChange({ ...currentOAuth(), scopes: "" })
}