Skip to content

a11y: ProductTable filter sidebar semantics#18153

Merged
pettinarip merged 1 commit into
devfrom
product-tree
May 18, 2026
Merged

a11y: ProductTable filter sidebar semantics#18153
pettinarip merged 1 commit into
devfrom
product-tree

Conversation

@myelinated-wackerow
Copy link
Copy Markdown
Collaborator

Summary

Refs #18114 (PR 1 of 2). Sidebar accessibility/semantic-HTML pass for the shared ProductTable filter UI -- benefits both /wallets/find-wallet and /layer-2/networks.

  • Filter groups now render as <fieldset> with sr-only <legend> via the shadcn FieldSet primitive, at both the outer (Device, Network support, etc.) and inner (Mobile/Desktop/Browser platforms) levels.
  • SwitchFilterInput uses FieldLabel + FieldDescription so every switch has a programmatically associated label and aria-describedby, replacing sibling <p> tags.
  • Installs the shadcn field component family (field, label, separator) tuned to project tokens (text-body-medium, text-error). Visual layout unchanged.

Persona-card refactor on /wallets/find-wallet ships in a follow-up PR.

Test plan

  • /wallets/find-wallet: each accordion filter group exposes a <fieldset> with sr-only <legend> matching the visible group title.
  • /layer-2/networks: same -- confirms the shared change benefits both pages.
  • Toggle Mobile, Desktop, and Browser switches; confirm a nested <fieldset> renders with sr-only <legend> "Mobile platforms" / "Desktop platforms" / "Browser engines".
  • Each Switch announces its label (and description, where present) in a screen reader.
  • Chromatic shows zero visual diffs on both pages.

Generated by Claude Opus 4.7

Wraps shared Filter groups in <fieldset> via shadcn FieldSet with sr-only legends, and replaces the SwitchFilterInput sibling-<p> label with a real <label> via FieldLabel + FieldDescription. Adds optional FilterItem.optionsLegend so the nested platform sub-groups (mobile/desktop/browser) on /wallets/find-wallet are labeled too. Visual layout unchanged.

Installs the shadcn field component family (field, label, separator) and tunes defaults to match project tokens (text-body-medium, text-error). Drops the dead labelVariants cva and the unneeded "use client" on separator. English-only translation strings added; intl-pipeline will propagate the rest.

Refs #18114 (PR 1 of 2).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 8, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 87ce0a4
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/69fe17de3905860008c905ba
😎 Deploy Preview https://deploy-preview-18153.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 67 (🟢 up 4 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 98 (🔴 down 1 from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions Bot added content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program labels May 8, 2026
Copy link
Copy Markdown
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! lgtm

@pettinarip pettinarip merged commit d03b352 into dev May 18, 2026
10 checks passed
@pettinarip pettinarip deleted the product-tree branch May 18, 2026 13:47
@claude claude Bot mentioned this pull request May 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants