Skip to content

Fix search form accessibility, design tokens, and AntD consistency#702

Open
marcodejongh wants to merge 1 commit intomainfrom
claude/fix-search-accessibility-tokens-EkIV6
Open

Fix search form accessibility, design tokens, and AntD consistency#702
marcodejongh wants to merge 1 commit intomainfrom
claude/fix-search-accessibility-tokens-EkIV6

Conversation

@marcodejongh
Copy link
Owner

  • Replace hardcoded box-shadow rgba values with AntD CSS custom property
    tokens (--ant-box-shadow, --ant-box-shadow-secondary, --ant-box-shadow-tertiary)
  • Add keyboard accessibility (role, tabIndex, onKeyDown) to collapsed
    section cards so keyboard users can expand them with Enter/Space
  • Replace native with AntD for the clear
    all button to align with codebase component conventions

https://claude.ai/code/session_01GKFZkWeR3LcvHfpkHnVhF2

- Replace hardcoded box-shadow rgba values with AntD CSS custom property
  tokens (--ant-box-shadow, --ant-box-shadow-secondary, --ant-box-shadow-tertiary)
- Add keyboard accessibility (role, tabIndex, onKeyDown) to collapsed
  section cards so keyboard users can expand them with Enter/Space
- Replace native <button> with AntD <Button type="link"> for the clear
  all button to align with codebase component conventions

https://claude.ai/code/session_01GKFZkWeR3LcvHfpkHnVhF2
@vercel
Copy link

vercel bot commented Feb 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
boardsesh Building Building Feb 7, 2026 11:58am

Request Review

@claude
Copy link

claude bot commented Feb 7, 2026

Claude Review

Ready to merge - Minor issues noted below, but nothing blocking.

Issues

  1. CSS !important overuse (search-dropdown.module.css:18-28): Seven !important declarations to override AntD Button styles. Consider using AntD's ConfigProvider or a custom CSS class with higher specificity instead, as !important can make future styling changes difficult.

  2. Missing focus styles (accordion-search-form.tsx:342-358): Added keyboard accessibility with tabIndex={0} and role="button", but no visible focus indicator styles were added to .sectionCard. Keyboard users won't see which card is focused. Add :focus-visible styles to the CSS.

Notes

  • Documentation update not required - changes don't affect any documented systems.
  • No new tests needed - these are CSS/accessibility improvements to existing UI components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants