Slider accessibility #320
Merged
Slider accessibility #320
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Improve slider support to assistive technologies (e.g.: screen readers):
- Add "pause" options to slider initialization:
- pauseOnFocus: Slider should pause when receive keyboard focus;
- pauseOnHover: Slider should pause when hovered by mouse;
- New "indicatorLabelFunc": Must generate ARIA labels for indicators;
- New eventPause prop: is true if slider is paused by focus/hover event;
- Slider must receive id if does not have one;
- Sliders are able to receive focus by code;
- Non-current slides are also hidden in CSS (also from screen readers);
- Add button to indicators:
- Update CSS;
- Update event handlers.
- Indicator click should focus current slide.
Implement slider tests: - Add HTML test implementation for Slider; - Add jasmine test spec for Slider (js + fixture).
- Add description for new initialization options; - Add description for new instance properties; - Add alternative text for images (updating code samples); - Update Slider init code sample to include indicatorLabelFunc example.
Smankusors
requested changes
Jan 23, 2023
- Add missing indicatorLabelFunc prop to Slider#options; - Replace double quotes string by single quotes; - Replace vanilla JS calls by jQuery functions.
- Replace double quotes string by single quotes; - Replace vanilla JS calls by jQuery functions.
Smankusors
reviewed
Feb 16, 2023
Mark "indicatorLabelFunc" as optional in docs description and code samples.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed changes
Enhanced accessibility performance of Materialize's Slider component by adding proper ARIA attributes and better support to keyboard navigation.
Following W3C's accessible carousel example, some new accessibility features have been implemented:
In the advent of the implementation of those new features, some "side features" had to be implemented:
¹ It is important to take notice that calling
slider.pause()by code has precedence over pauses caused by events. Thus, the slider will not resume when mouse leaves the slider or when focus is lost.NB: There are other aspects of an "accessible slider" covered by W3C example which were not implemented here due to lack of escope (e.g.: Our current implementation does not provides a play/pause button per spec.).
PS.: Since this component did not have any test implementation, a new complete set of test files have also been implemented 😄.
Screenshots (if appropriate) or codepen:
Video
Slider.Accessibility.sample.mp4
Screen capture video of Firefox browser displaying a sample slider. It is paused on mouse hover and on focus. It also sets focus to its respective slide when a indicator is selected².
² Focus style has been set for demo purposes.
Image
Slider accessibility properties.
Types of changes
Checklist: