-
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 of a radio group that implements a 5-star rating input (p…
…ull #1870) This example is intended to show an alternative way of implementing the rating input that is also implemented with a slider. The slider allows for half stars whereas the radio is only five options. Co-authored-by: Matt King <a11yThinker@gmail.com>
- Loading branch information
Showing
9 changed files
with
849 additions
and
0 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,76 @@ | ||
| /* CSS Document */ | ||
|
|
||
| .rating-radio label { | ||
| display: block; | ||
| } | ||
|
|
||
| .rating-radio svg g[role="radio"] { | ||
| color: #005a9c; | ||
| } | ||
|
|
||
| .rating-radio svg { | ||
| forced-color-adjust: auto; | ||
| touch-action: pan-y; | ||
| } | ||
|
|
||
| .rating-radio svg .focus-ring, | ||
| .rating-radio svg .focus-ring-none { | ||
| stroke-width: 0; | ||
| fill-opacity: 0; | ||
| } | ||
|
|
||
| .rating-radio svg .star { | ||
| stroke-width: 2px; | ||
| stroke: currentColor; | ||
| fill-opacity: 0; | ||
| } | ||
|
|
||
| .rating-radio svg .star-none { | ||
| stroke-width: 3px; | ||
| stroke: currentColor; | ||
| fill-opacity: 0; | ||
| } | ||
|
|
||
| .rating-radio[data-rating-value="5"] svg .star { | ||
| fill: currentColor; | ||
| fill-opacity: 1; | ||
| } | ||
|
|
||
| .rating-radio[data-rating-value="1"] svg .star-1 .star { | ||
| fill: currentColor; | ||
| fill-opacity: 1; | ||
| } | ||
|
|
||
| .rating-radio[data-rating-value="2"] svg .star-2 .star { | ||
| fill: currentColor; | ||
| fill-opacity: 1; | ||
| } | ||
|
|
||
| .rating-radio[data-rating-value="3"] svg .star-3 .star { | ||
| fill: currentColor; | ||
| fill-opacity: 1; | ||
| } | ||
|
|
||
| .rating-radio[data-rating-value="4"] svg .star-4 .star { | ||
| fill: currentColor; | ||
| fill-opacity: 1; | ||
| } | ||
|
|
||
| /* focus styling */ | ||
|
|
||
| .rating-radio:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| .rating-radio svg g:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| .rating-radio svg g:focus .focus-ring { | ||
| stroke-width: 2px; | ||
| stroke: currentColor; | ||
| } | ||
|
|
||
| .rating-radio:hover { | ||
| cursor: pointer; | ||
| } |
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,140 @@ | ||
| /* | ||
| * This content is licensed according to the W3C Software License at | ||
| * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document | ||
| * | ||
| * File: radio-rating.js | ||
| * | ||
| * Desc: Radio group widget that implements ARIA Authoring Practices | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| class RatingRadioGroup { | ||
| constructor(groupNode) { | ||
| this.groupNode = groupNode; | ||
|
|
||
| this.radioButtons = []; | ||
|
|
||
| this.firstRadioButton = null; | ||
| this.lastRadioButton = null; | ||
|
|
||
| var rbs = this.groupNode.querySelectorAll('[role=radio]'); | ||
|
|
||
| for (var i = 0; i < rbs.length; i++) { | ||
| var rb = rbs[i]; | ||
|
|
||
| rb.tabIndex = -1; | ||
| rb.setAttribute('aria-checked', 'false'); | ||
|
|
||
| rb.addEventListener('keydown', this.handleKeydown.bind(this)); | ||
| rb.addEventListener('click', this.handleClick.bind(this)); | ||
|
|
||
| this.radioButtons.push(rb); | ||
|
|
||
| if (!this.firstRadioButton) { | ||
| this.firstRadioButton = rb; | ||
| } | ||
| this.lastRadioButton = rb; | ||
| } | ||
|
|
||
| var value = groupNode.getAttribute('data-rating-value'); | ||
| var index = parseInt(value); | ||
|
|
||
| if (value && index >= 0 && index < this.radioButtons.length) { | ||
| this.radioButtons[index].tabIndex = 0; | ||
| } else { | ||
| value = this.firstRadioButton.getAttribute('data-rating-value'); | ||
| groupNode.getAttribute('data-rating-value', value); | ||
| this.firstRadioButton.tabIndex = 0; | ||
| } | ||
| } | ||
|
|
||
| setChecked(currentItem) { | ||
| this.groupNode.tabIndex = -1; | ||
| for (var i = 0; i < this.radioButtons.length; i++) { | ||
| var rb = this.radioButtons[i]; | ||
| rb.setAttribute('aria-checked', 'false'); | ||
| rb.tabIndex = -1; | ||
| } | ||
| this.currentValue = currentItem.getAttribute('data-rating'); | ||
| this.groupNode.setAttribute('data-rating-value', this.currentValue); | ||
|
|
||
| currentItem.setAttribute('aria-checked', 'true'); | ||
| currentItem.tabIndex = 0; | ||
| currentItem.focus(); | ||
| } | ||
|
|
||
| setCheckedToPreviousItem(currentItem) { | ||
| var index; | ||
|
|
||
| if (currentItem === this.firstRadioButton) { | ||
| this.setChecked(this.lastRadioButton); | ||
| } else { | ||
| index = this.radioButtons.indexOf(currentItem); | ||
| this.setChecked(this.radioButtons[index - 1]); | ||
| } | ||
| } | ||
|
|
||
| setCheckedToNextItem(currentItem) { | ||
| var index; | ||
|
|
||
| if (currentItem === this.lastRadioButton) { | ||
| this.setChecked(this.firstRadioButton); | ||
| } else { | ||
| index = this.radioButtons.indexOf(currentItem); | ||
| this.setChecked(this.radioButtons[index + 1]); | ||
| } | ||
| } | ||
|
|
||
| /* EVENT HANDLERS */ | ||
|
|
||
| handleKeydown(event) { | ||
| var tgt = event.currentTarget, | ||
| flag = false; | ||
|
|
||
| switch (event.key) { | ||
| case ' ': | ||
| case 'Enter': | ||
| this.setChecked(tgt); | ||
| flag = true; | ||
| break; | ||
|
|
||
| case 'Up': | ||
| case 'ArrowUp': | ||
| case 'Left': | ||
| case 'ArrowLeft': | ||
| this.setCheckedToPreviousItem(tgt); | ||
| flag = true; | ||
| break; | ||
|
|
||
| case 'Down': | ||
| case 'ArrowDown': | ||
| case 'Right': | ||
| case 'ArrowRight': | ||
| this.setCheckedToNextItem(tgt); | ||
| flag = true; | ||
| break; | ||
|
|
||
| default: | ||
| break; | ||
| } | ||
|
|
||
| if (flag) { | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
|
|
||
| handleClick(event) { | ||
| this.setChecked(event.currentTarget); | ||
| } | ||
| } | ||
|
|
||
| // Initialize radio button group | ||
|
|
||
| window.addEventListener('load', function () { | ||
| var radios = document.querySelectorAll('.rating-radio'); | ||
| for (var i = 0; i < radios.length; i++) { | ||
| new RatingRadioGroup(radios[i]); | ||
| } | ||
| }); |
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
Oops, something went wrong.