-
Notifications
You must be signed in to change notification settings - Fork 303
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Example: Media Seek Slider (pull #1863)
Adds a horizontal slider that illustrates: * Appending max value to aria-valuetext on focus, but not on change in value. * Using SVG graphics elements * Increased size of clickable area on rail to change value with pointing device * High contrast support * Latest APG coding practices, including: * Use of event.key. * Use of pointer events. * CSS property forced-color-adjust to auto on the SVG elements. * Using stroke-opacity and fill-opacity instead of transparent values for setting stroke and fill colors for SVG rect to support focus ring visibility in high contrast modes. Co-authored-by: Matt King <a11yThinker@gmail.com>
- Loading branch information
Showing
9 changed files
with
1,267 additions
and
3 deletions.
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| /* CSS Document */ | ||
|
|
||
| .slider-seek .label { | ||
| font-weight: bold; | ||
| font-size: 125%; | ||
| } | ||
|
|
||
| .slider-seek svg { | ||
| forced-color-adjust: auto; | ||
| } | ||
|
|
||
| .slider-seek text { | ||
| font-weight: bold; | ||
| fill: currentColor; | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| .slider-seek { | ||
| margin-top: 1em; | ||
| padding: 6px; | ||
| color: black; | ||
| } | ||
|
|
||
| .slider-slider .value { | ||
| position: relative; | ||
| top: 20px; | ||
| height: 1.5em; | ||
| font-size: 80%; | ||
| } | ||
|
|
||
| .slider-seek .temp-value { | ||
| padding-left: 24px; | ||
| font-size: 200%; | ||
| } | ||
|
|
||
| .slider-seek .rail { | ||
| stroke: currentColor; | ||
| stroke-width: 2px; | ||
| fill: currentColor; | ||
| fill-opacity: 25%; | ||
| } | ||
|
|
||
| .slider-seek .thumb { | ||
| stroke-width: 0; | ||
| fill: currentColor; | ||
| } | ||
|
|
||
| .slider-seek .focus-ring { | ||
| stroke: currentColor; | ||
| stroke-opacity: 0; | ||
| fill-opacity: 0; | ||
| stroke-width: 3px; | ||
| display: none; | ||
| } | ||
|
|
||
| .slider-seek .slider-group { | ||
| touch-action: pan-y; | ||
| } | ||
|
|
||
| .slider-seek .slider-group .value { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Focus and hover styling */ | ||
|
|
||
| .slider-seek.focus [role="slider"] { | ||
| color: #005a9c; | ||
| } | ||
|
|
||
| .slider-seek [role="slider"]:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| .slider-seek [role="slider"]:focus .focus-ring { | ||
| display: block; | ||
| stroke-opacity: 1; | ||
| } | ||
|
|
||
| .slider-seek [role="slider"]:focus .value { | ||
| display: block; | ||
| } |
Oops, something went wrong.