Skip to content

Conversation

@kylemclaren
Copy link
Collaborator

Summary

  • Add proper ARIA dialog attributes (role="dialog", aria-modal, aria-label) to the search modal
  • Implement combobox pattern with listbox semantics for search results navigation
  • Add accessible labels to search input and clear button
  • Hide decorative elements (SVGs, gradients, keyboard hints) from screen readers with aria-hidden
  • Add live region (<output> with aria-live) for search status announcements
  • Implement focus trap to keep Tab/Shift+Tab within the modal
  • Extend AnimatedItem component to accept accessibility props (role, id, aria-selected, tabIndex)

Test plan

  • Open search dialog and verify screen reader announces "Search documentation" dialog
  • Type a query and verify screen reader announces result count
  • Use arrow keys to navigate results and verify aria-activedescendant updates
  • Tab through the dialog and verify focus stays trapped within
  • Verify decorative elements are not announced by screen readers

🤖 Generated with Claude Code

kylemclaren and others added 2 commits January 5, 2026 11:06
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add proper ARIA dialog attributes (role, aria-modal, aria-label)
- Implement combobox pattern with listbox for search results
- Add aria-label to search input and clear button
- Hide decorative elements from screen readers (SVGs, gradients, kbd hints)
- Add live region for search status announcements
- Implement focus trap for modal accessibility
- Extend AnimatedItem to support accessibility props

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
@github-actions
Copy link

github-actions bot commented Jan 5, 2026

Preview Deployment

Name URL
Preview https://pr-35-superfly-sprites-docs.fly.dev

Commit: d763f8c

@github-actions
Copy link

github-actions bot commented Jan 5, 2026

E2E Test Results

✅ Tests success

Ran against: https://pr-35-superfly-sprites-docs.fly.dev

Wrap green gradient backgrounds and image overlay in media queries
to only display on screens >= 768px, improving mobile performance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
@kylemclaren kylemclaren merged commit 5ffdd65 into main Jan 5, 2026
4 checks passed
@kylemclaren kylemclaren deleted the clever-mcnulty branch January 5, 2026 10:20
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