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.

Sign up for GitHub

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

docs(slider): add slider a11y docs #341

Merged
merged 6 commits into from
Jun 2, 2022
Merged

docs(slider): add slider a11y docs #341

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9805b1e
feat(slider): add `range` mode accessibility support
phetw May 25, 2022
39f9460
feat(slider): hide number-field inputs from tab sequence and screen r…
phetw May 26, 2022
0a69fc8
fix: switch Home and End logic
phetw May 31, 2022
b8d1254
docs: remove deupllicated demo
phetw May 31, 2022
d59ecf6
docs(slider): add slider a11y docs
phetw May 31, 2022
322e354
Merge remote-tracking branch 'origin/feat/slider-a11y' into feat/slid…
phetw Jun 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion documents/src/pages/elements/slider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,17 @@ ef-slider {
::

| CSS Variables Name | Description |
| ------------------- | ---------------------------------------------|
| ------------------- | -------------------------------------------- |
| --track-color | Slider track color |
| --thumb-color | Color of slider thumb and filled track color |
| --step-color | Slider step color |
| --input-field-width | Set input field width |

## Accessibility
::a11y-intro::

`ef-slider` is an interactive element similar to `<input type="range">`. Each slider thumb has `role="slider"` and is focusable and its value can be updated by using `Arrow keys`, `Home` and `End`. Accessible name of `ef-slider` must be provided through aria attributes such as `aria-label`, `aria-labelledby` to accurately describe its objectives.

Like the other control elements, it supports `disabled` or `readonly` to match the element’s visual state.

::a11y-end::