Skip to content

fix: visual search plugin accessibility#845

Merged
tsi merged 2 commits intomasterfrom
ME-15004-visual-search-a11y
Apr 7, 2025
Merged

fix: visual search plugin accessibility#845
tsi merged 2 commits intomasterfrom
ME-15004-visual-search-a11y

Conversation

@tsi
Copy link
Copy Markdown
Collaborator

@tsi tsi commented Apr 6, 2025

This PR improves a few aspects of using the visual-search plugin with a keyboard.

  • Button has a visible focus highlight
  • Input and X are focusable only when visible
  • Results marker are focusable and clickable

@tsi tsi self-assigned this Apr 6, 2025
@tsi tsi requested a review from a team as a code owner April 6, 2025 13:16
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 6, 2025

Deploy Preview for cld-video-player ready!

Name Link
🔨 Latest commit 5a737cd
🔍 Latest deploy log https://app.netlify.com/sites/cld-video-player/deploys/67f387f16933be00084c86c8
😎 Deploy Preview https://deploy-preview-845--cld-video-player.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 6, 2025

Deploy Preview for cld-vp-esm-pages ready!

Name Link
🔨 Latest commit 5a737cd
🔍 Latest deploy log https://app.netlify.com/sites/cld-vp-esm-pages/deploys/67f387f105562100089aa100
😎 Deploy Preview https://deploy-preview-845--cld-vp-esm-pages.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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


// Add keyboard support
markerEl.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

space?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

We could do e.code === 'Space' which is more semantically clear, but AFAIU for assistive technology devices that aren't standard keyboards, e.key will give better support because it represents the semantic meaning of the input ("space") and not necessarily the space-key itself.

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