fix(web): make tool category filters keyboard accessible

[lyzno1]

Summary

• migrate the tool category selector from clickable divs to the Dify UI segmented-control primitive
• expose a translated group name and native buttons with controlled aria-pressed state
• preserve the existing public value/onChange owner and guard against deselecting the active category
• remove only the two matching clickable-div suppressions

Semantic contract

This selector filters a tool collection; it does not own tab panels. Dify UI documents SegmentedControl for mode, filter, and view selection without tabpanel semantics, so this PR intentionally does not misuse the Tabs primitive.

• the toolbar owns the translated group name
• Dify UI owns button and pressed-state semantics
• the existing caller continues to own the selected category and filtering behavior
• Enter, Space, and pointer activation use the native button path
• activating the already selected category does not emit a business change
• existing data-testid attributes remain for compatibility; behavior tests use role, name, and state

Scope

• the shared tool category filter
• its component test and Storybook usage
• the single production toolbar consumer
• the matching jsx-a11y suppression entry

No panel, query, routing, or filtering implementation changes.

Test evidence

The updated test failed first because the old implementation exposed no accessible group or buttons. It now verifies:

• group role and translated name
• named button roles
• controlled aria-pressed state
• no callback for the selected category
• keyboard Enter activation for an inactive category

Focused result: 1/1 passed.

Visual regression

Compared the Storybook story against #40242 with the same viewport and theme.

• outer card, group, both items, and both icons retain the same x/y coordinates and dimensions
• padding, border, radius, color, background, shadow, typography, and text line height are unchanged
• text ranges are exact: Visual builder remains at (565.156, 368.5), and Code remains at (702.227, 368.5)
• button content remains left-aligned; there is no native button centering shift
• the only intentional visual addition is the Dify UI focus-visible ring for keyboard focus

Verification

• pnpm exec vp test run app/components/base/tab-slider-new/__tests__/index.spec.tsx — 1/1
• targeted vp check — 0 errors
• node scripts/lint-a11y.mjs app/components/base/tab-slider-new/index.tsx app/components/integrations/tool-provider-toolbar.tsx
• pnpm lint:oxlint --prune-suppressions
• pnpm check — 0 errors, existing warnings only
• git diff --check

Stack

Base: #40242

Child: #40244 is a Storybook-only CSS icon cleanup. This production behavior layer can be reviewed and reverted independently.