-
Notifications
You must be signed in to change notification settings - Fork 355
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Multithumb Slider Example: Simplify and improve code quality (pull #1758
) This commit changes the multi-thumb slider to simplify the example page and improve code quality with the following changes: 1. To support high contrast, uses SVG for the slider controls. 2. Uses pointer events to add touch support. 3. Adds an accessibility feature section. 4. Updates code to implement latest APG coding practices, including using event.key , instead of event.keyCode. 6. Removes redundant flight price range multi-thumb slider. 7. Removes the use of aria-valuetext. Co-authored-by: Matt King <[email protected]>
- Loading branch information
Showing
11 changed files
with
788 additions
and
1,112 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| #!/bin/sh | ||
| if [ -z "$husky_skip_init" ]; then | ||
| debug () { | ||
| [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1" | ||
| } | ||
|
|
||
| readonly hook_name="$(basename "$0")" | ||
| debug "starting $hook_name..." | ||
|
|
||
| if [ "$HUSKY" = "0" ]; then | ||
| debug "HUSKY env variable is set to 0, skipping hook" | ||
| exit 0 | ||
| fi | ||
|
|
||
| if [ -f ~/.huskyrc ]; then | ||
| debug "sourcing ~/.huskyrc" | ||
| . ~/.huskyrc | ||
| fi | ||
|
|
||
| export readonly husky_skip_init=1 | ||
| sh -e "$0" "$@" | ||
| exitCode="$?" | ||
|
|
||
| if [ $exitCode != 0 ]; then | ||
| echo "husky - $hook_name hook exited with code $exitCode (error)" | ||
| exit $exitCode | ||
| fi | ||
|
|
||
| exit 0 | ||
| fi |
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 was deleted.
Oops, something went wrong.
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,88 @@ | ||
| /* CSS Document */ | ||
|
|
||
| .slider-multithumb { | ||
| padding: 6px; | ||
| width: 350px; | ||
| touch-action: pan-y; | ||
| } | ||
|
|
||
| .slider-multithumb svg { | ||
| forced-color-adjust: auto; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group { | ||
| color: black; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group .value { | ||
| font-size: 80%; | ||
| color: currentColor; | ||
| fill: currentColor; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group .rail { | ||
| stroke: currentColor; | ||
| stroke-width: 2px; | ||
| fill-opacity: 0; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group .range { | ||
| fill: currentColor; | ||
| opacity: 0.4; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group .thumb { | ||
| stroke-opacity: 0; | ||
| stroke-width: 2px; | ||
| fill: currentColor; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group .focus-ring { | ||
| stroke-opacity: 0; | ||
| fill-opacity: 0; | ||
| stroke-linecap: round; | ||
| stroke-linejoin: round; | ||
| } | ||
|
|
||
| /* Focus and hover styling */ | ||
|
|
||
| .slider-multithumb .slider-group g.rail, | ||
| .slider-multithumb .slider-group g.focus { | ||
| color: currentColor; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group.active g.rail { | ||
| opacity: 0.8; | ||
| } | ||
|
|
||
| .slider-multithumb .slider-group.active g.range { | ||
| fill: #005a9c; | ||
| fill-opacity: 1; | ||
| } | ||
|
|
||
| .slider-multithumb [role="slider"]:focus { | ||
| outline: none; | ||
| color: #005a9c; | ||
| } | ||
|
|
||
| .slider-multithumb [role="slider"]:hover .focus-ring { | ||
| stroke: currentColor; | ||
| stroke-width: 1px; | ||
| stroke-opacity: 0.8; | ||
| } | ||
|
|
||
| .slider-multithumb [role="slider"]:hover .focus-ring, | ||
| .slider-multithumb [role="slider"]:focus .focus-ring { | ||
| stroke: currentColor; | ||
| stroke-opacity: 1; | ||
| stroke-width: 3px; | ||
| } | ||
|
|
||
| .slider-multithumb [role="slider"]:focus .thumb { | ||
| stroke: currentColor; | ||
| } | ||
|
|
||
| .slider-multithumb [role="slider"]:focus .value { | ||
| color: currentColor; | ||
| font-weight: bold; | ||
| } |
Oops, something went wrong.