Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(slider): prevent default screenreader cursor navigation #486

Merged
merged 2 commits into from
Oct 13, 2022

Conversation

jzempel
Copy link
Member

@jzempel jzempel commented Oct 13, 2022

Description

The initial port over from react-components missed the event.preventDefault() call on keyboard interactions.

Detail

The fix was tested against zendeskgarden/react-components#1431.

Checklist

  • 🌐 demo is up-to-date (yarn start)
  • 💂‍♂️ includes new unit tests
  • ♿ tested for WCAG 2.1 AA compliance
  • 📝 tested in Chrome, Firefox, Safari, and Edge

@jzempel jzempel requested a review from a team as a code owner October 13, 2022 19:25
@coveralls
Copy link

coveralls commented Oct 13, 2022

Coverage Status

Coverage increased (+0.003%) to 94.477% when pulling f0a6ea4 on jzempel/slider-keyevent-fix into 621beb2 on main.

Copy link
Contributor

@jgorfine-zendesk jgorfine-zendesk left a comment

Choose a reason for hiding this comment

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

Just tested this on VoiceOver x Safari. Seems like it's working as intended!

Left a little note about wording for the code comment, but it's by no means a merge blocker. 👍

@@ -225,6 +225,7 @@ export function useSlider<T extends Element = Element, M extends HTMLElement = H
}

if (value !== undefined) {
event.preventDefault(); // prevent screenreader navigation
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
event.preventDefault(); // prevent screenreader navigation
event.preventDefault(); // avoid screenreader behavior that hinders keyboard navigation

nit: Mind tweaking the wording here a little? I don't think we want to give the impression that we're making this inaccessible to screen readers. 😅

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

Successfully merging this pull request may close these issues.

4 participants