├── .gitignore
├── LICENSE
├── README.md
├── assets
    └── css
    │   ├── check-switch.css
    │   ├── on-off-switch.css
    │   └── toggle-switch.css
├── index.html
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 - 2021
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ARIA Switch Control
 2 | Similar to a toggle button or checkbox, a switch control is meant to be used when its visual appearance most resembles an "on and off" "switch".  
 3 | 
 4 | The expected user experience of a switch control is for an immediate action to take place. For instance, toggling a light/dark theme for a website or application, where the change should instantly take effect. 
 5 | 
 6 | A checkbox, which is often found within a form, or in other UI where multiple elements can be checked, may not be understood to enact an immediate change to other elements or content in the document/screen. That's not to say additional information couldn't be presented to the user to indicate such functionality for a checkbox, but it's not a standard expectation.  
 7 | 
 8 | A toggle button and switch are a bit more similar in that they both have an expectation for an immediate change from user interaction. Their primary differences revolve around the manner in which they are supposed to communicate state to assistive technology users, as well as the visual design they each may be most associated with.
 9 | 
10 | A toggle button is typically announced as "pressed" or "selected" in its active state, where a switch should be announced as "on".  
11 | 
12 | 
13 | ## How does it work?
14 | The baseline for this component requires one of the following markup patterns:
15 | 
16 | ### Start as a `<button>`
17 | ```html
18 | <button type="button" data-switch class="class_here" disabled>
19 |   <!-- Meaningful label here -->
20 | </button>
21 | ```
22 | 
23 | ### Start as a checkbox
24 | ```html
25 | <label class="class_here">
26 |   <input type="checkbox" data-switch>
27 |   <!-- Meaningful label here -->
28 | </label>
29 | ```
30 | 
31 | ### Start as a generic element
32 | For instance, such as a `<div>` or `<span>`.
33 | ```html
34 | <span class="class_here" data-switch hidden>
35 |   <!-- Meaningful label here -->
36 | </span>
37 | ```
38 | 
39 | ### Initial Attribute Breakdown
40 | `data-switch` is required for each markup pattern to be successfully transformed into a `role="switch"`. All setup and functionality is based around this attribute.  The attribute can be set without a value, to default a switch to the "off" state.  Setting the value to "on", e.g., `data-switch="on` will default the switch to the "on" state. <strong>Note:</strong> if using a checkbox as the base markup element, and the `checked` attribute will also set the switch to be "on" by default, even if `data-switch` has no value.
41 | 
42 | You may notice that examples which do not have a checkbox base element have a default `disabled` or `hidden` attribute.  This is due to the fact that these versions of the switch will not function without JavaScript. Rather than rendering a partially created that doesn't function, they can instead be disabled (for a `<button>`) or hidden for elements which would not expose or allow the `disabled` attribute.
43 | 
44 | If for some reason a switch should be disabled on initial load, use the `data-keep-disabled` to stop the script from removing the `disabled` (`aria-disabled`) or `hidden` attributes.
45 | 
46 | ### Attributes added by JavaScript
47 | The JavaScript will add a `role="switch"` to the element with `data-switch`.  
48 | 
49 | If the `switch` is not built from a base checkbox, an `aria-checked` attribute will be added to communicate the current state of the switch. If the base element is a checkbox, then the native `checked` attribute and the dirty checked state of the element will be used instead. It is not necessary, nor valid, to use an `aria-checked` attribute on a native checkbox or radio button.
50 | 
51 | 
52 | ## Screen Reader Quirks
53 | Rather than updating this information in multiple places, please [review the breakdown of screen reader issues with `role="switch"`](https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/#affects_on_sr).  While this particular link goes to an example of using `role=switch` on a checkbox, the same issues occur if using `role=switch` on a `<button>` element as well.
54 | 
55 | **Note: With the release of iOS 12.2 (March 2019) the announcement of state has been fixed.** VoiceOver will still announce `role="switch"` as checkboxes, but at least the checked/unchecked states are correctly exposed.
56 | 
57 | 
58 | ## License & Such
59 | This script was written by [Scott O'Hara](https://twitter.com/scottohara).
60 | 
61 | It has an [MIT](https://github.com/scottaohara/aria-switch-button/blob/master/LICENSE) license.
62 | 
63 | Do with it what you will :)
64 | 


--------------------------------------------------------------------------------
/assets/css/check-switch.css:
--------------------------------------------------------------------------------
 1 | /* containing label */
 2 | .check-switch {
 3 |   display: block;
 4 |   overflow: hidden;
 5 |   padding: .5em 0;
 6 |   position: relative;
 7 | }
 8 | 
 9 | /* using the before/after pseudo elements of the span to create the "switch" */
10 | .check-switch span:before,
11 | .check-switch span:after {
12 |   border: 1px solid #565656;
13 |   content: "";
14 |   position: absolute;
15 |   top: 50%;
16 |   transform: translateY(-50%);
17 | }
18 | 
19 | /* styling specific to the knob of the switch */
20 | .check-switch span:after {
21 |   background: #fff;
22 |   border-radius: 100%;
23 |   height: 1.5em;
24 |   right: 1.5em;
25 |   transition: right .1825s ease-in-out;
26 |   width: 1.5em;
27 | }
28 | 
29 | /* styling specific to the knob "container" */
30 | .check-switch span:before {
31 |   background: #eee;
32 |   border-radius: 1.75em;
33 |   height: 1.75em;
34 |   right: .25em;
35 |   transition: background .2s ease-in-out;
36 |   width: 2.75em;
37 | }
38 | 
39 | /* hide the actual checkbox from view, but not from keyboards or ATs.
40 |    Instead of standard visually hidden styling, instead set opacity to
41 |    to 0 and set to full height/width of container element so that VO focus
42 |    ring outlines the component, instead of a tiny box within the component.
43 |    This will also allow for the checkbox input to be discovered if someone
44 |    were to search by touch.
45 | */
46 | .check-switch input {
47 |   height: 100%;
48 |   left: 0;
49 |   opacity: 0;
50 |   position: absolute;
51 |   top: 0;
52 |   width: 100%;
53 | }
54 | 
55 | .check-switch input:disabled + span,
56 | .check-switch input[aria-disabled="true"] + span {
57 |   opacity: .65;
58 | }
59 | 
60 | 
61 | .check-switch:hover input:not([data-keep-disabled]) + span:before,
62 | .check-switch input:not([data-keep-disabled]):focus + span:before {
63 |   outline: 2px solid #2196f3;
64 |   outline-offset: 2px;
65 | }
66 | 
67 | 
68 | /* change the position of the knob to indicate it has been checked*/
69 | .check-switch input:checked + span:after {
70 |   right: .25em;
71 | }
72 | 
73 | /* update the color of the "container" to further visually indicate state */
74 | .check-switch input:checked + span:before {
75 |   background: #2196f3;
76 | }
77 | 
78 | /* 'color in' the switch knob in high contrast mode by giving it
79 |    a large border */
80 | @media screen and (-ms-high-contrast: active) {
81 |   .check-switch span:after {
82 |     background-color: windowText;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/assets/css/on-off-switch.css:
--------------------------------------------------------------------------------
 1 | /** --------------------------------------------------------------------
 2 | 
 3 |   ARIA Switch On / Off button
 4 | 
 5 |   These styles have not been formatted to work with a
 6 |   checkbox that has been modified into a role=switch, and
 7 |   presently require a parent / child relationship, rather than
 8 |   a sibling relationship as a "checkbox + element" would provide.
 9 | 
10 | --------------------------------------------------------------------- */
11 | 
12 | .on-off-switch {
13 |   align-items: center;
14 |   color: #111;
15 |   cursor: default;
16 |   display: flex;
17 |   font-weight: normal;
18 |   justify-content: space-between;
19 | }
20 | 
21 | /* hover/focus is applied to the span within instead */
22 | .on-off-switch:hover,
23 | .on-off-switch:focus {
24 |   outline: 0;
25 | }
26 | 
27 | .on-off-switch span {
28 |   background: #eaeaea;
29 |   border-radius: 2px;
30 |   border: 1px solid;
31 |   display: inline-block;
32 |   outline-offset: 0px;
33 |   outline: 0px solid;
34 |   padding: .25rem;
35 |   pointer-events: none;
36 |   position: relative;
37 | }
38 | 
39 | .on-off-switch span:before,
40 | .on-off-switch span:after {
41 |   border-radius: 2px;
42 |   color: #4a4a4a;
43 |   display: inline-block;
44 |   min-width: 5ch;
45 |   text-align: center;
46 | }
47 | 
48 | .on-off-switch span:before {
49 |   content: "Off";
50 | }
51 | 
52 | .on-off-switch span:after {
53 |   content: "On";
54 | }
55 | 
56 | .on-off-switch[disabled] span:before,
57 | .on-off-switch[disabled] span:after,
58 | .on-off-switch[aria-disabled="true"] span:before,
59 | .on-off-switch[aria-disabled="true"] span:after {
60 |   opacity: .65;
61 |   pointer-events: none;
62 | }
63 | 
64 | .on-off-switch:not([data-keep-disabled]):hover span,
65 | .on-off-switch:not([data-keep-disabled]):focus span {
66 |   background: #fff;
67 |   outline: 2px solid #2196f3;
68 |   outline-offset: 2px;
69 | }
70 | 
71 | .on-off-switch[aria-checked="false"] span:before,
72 | .on-off-switch[aria-checked="true"] span:after {
73 |   color: #fff;
74 |   margin: 0;
75 | }
76 | 
77 | .on-off-switch[aria-checked="false"] span:before {
78 |   background: #222;
79 |   outline: 1px solid #222;
80 | }
81 | .on-off-switch[aria-checked="true"] span:after {
82 |   background: green;
83 |   outline: 1px solid green;
84 | }
85 | 


--------------------------------------------------------------------------------
/assets/css/toggle-switch.css:
--------------------------------------------------------------------------------
  1 | /** --------------------------------------------------------------------
  2 | 
  3 |   ARIA Switch Toggle Button
  4 | 
  5 | --------------------------------------------------------------------- */
  6 | .switch-toggle {
  7 |   background: none;
  8 |   border: none;
  9 |   cursor: default;
 10 |   display: block;
 11 |   font-size: inherit;
 12 |   line-height: 1;
 13 |   margin: 1em 0 0;
 14 |   padding: .5em 0;
 15 |   position: relative;
 16 |   text-align: left;
 17 |   transition: box-shadow .2s ease-in-out;
 18 |   width: 100%;
 19 | }
 20 | 
 21 | .switch-toggle:focus {
 22 |   outline: none;
 23 | }
 24 | 
 25 | /* negate 'flash' of text color when pressing a button in some browsers */
 26 | .switch-toggle:active {
 27 |   color: inherit;
 28 | }
 29 | 
 30 | /* using the before/after pseudo elements of the span to create the "switch" */
 31 | .switch-toggle span:before,
 32 | .switch-toggle span:after {
 33 |   border: 1px solid #565656;
 34 |   content: "";
 35 |   position: absolute;
 36 |   top: 50%;
 37 |   transform: translateY(-50%);
 38 | }
 39 | 
 40 | /* styling specific to the knob of the switch */
 41 | .switch-toggle span:after {
 42 |   background: #fff;
 43 |   border-radius: 100%;
 44 |   height: 1.5em;
 45 |   right: 1.5em;
 46 |   transition: right .1825s ease-in-out;
 47 |   width: 1.5em;
 48 | }
 49 | 
 50 | /* styling specific to the knob "container" */
 51 | .switch-toggle span:before {
 52 |   background: #eee;
 53 |   border-radius: 1.75em;
 54 |   height: 1.75em;
 55 |   right: .25em;
 56 |   transition: background .2s ease-in-out;
 57 |   width: 2.75em;
 58 | }
 59 | 
 60 | .switch-toggle span {
 61 |   pointer-events: none;
 62 | }
 63 | 
 64 | 
 65 | .switch-toggle:not([data-keep-disabled]):hover span:before,
 66 | .switch-toggle:not([data-keep-disabled]):focus span:before {
 67 |   outline: 2px solid #2196f3;
 68 |   outline-offset: 2px;
 69 | }
 70 | 
 71 | /* change the position of the knob to indicate it has been checked*/
 72 | .switch-toggle[aria-checked="true"] span:after {
 73 |   right: .25em;
 74 | }
 75 | 
 76 | /* update the color of the "container" to further visually indicate state */
 77 | .switch-toggle[aria-checked="true"] span:before {
 78 |   background: #2196f3;
 79 | }
 80 | 
 81 | .switch-toggle[disabled] span,
 82 | .switch-toggle[aria-disabled="true"] span {
 83 |   opacity: .65;
 84 | }
 85 | 
 86 | /**
 87 |  * Toggle switch modifications for displaying On/Off labels
 88 |  */
 89 | .switch-toggle .show-labels:before {
 90 |   content: "Off";
 91 |   color: rgba(10, 10, 10, 1);
 92 |   line-height: 1.6;
 93 |   text-indent: 1.625em;
 94 |   width: 3.5em;
 95 | }
 96 | 
 97 | .switch-toggle[aria-checked="false"] .show-labels:after {
 98 |   right: 2.2em;
 99 | }
100 | 
101 | .switch-toggle[aria-checked="true"] .show-labels:before {
102 |   color: rgba(255 ,255 ,255 ,1);
103 |   content: "On";
104 |   text-indent: .25em;
105 |   text-shadow: 0 0 1px #000;
106 | }
107 | 
108 | @media screen and (-ms-high-contrast: active) {
109 |   .switch-toggle span:after {
110 |     background-color: windowText;
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html lang="en" class="no-js">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>ARIA Switch Controls</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <script>
  8 |       document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  9 |     </script>
 10 |     <link rel="stylesheet" href="https://scottaohara.github.io/a11y_styled_form_controls/src/assets/css/--demo-only--.css">
 11 |     <link rel="stylesheet" href="https://scottaohara.github.io/a11y_styled_form_controls/src/assets/css/--shared--.css">
 12 |     <link rel="stylesheet" href="assets/css/on-off-switch.css">
 13 |     <link rel="stylesheet" href="assets/css/toggle-switch.css">
 14 |     <link rel="stylesheet" href="assets/css/check-switch.css">
 15 |   </head>
 16 | 
 17 |   <body id="body">
 18 |     <div id="page" class="demo-wrap">
 19 | 
 20 |       <header class="demo-wrap__header">
 21 |         <p class="demo-wrap__header__title">
 22 |           Accessible Styled Form Controls
 23 |         </p>
 24 |         <nav>
 25 |           <a href="https://github.com/scottaohara/a11y_styled_form_controls">See source on GitHub</a>,
 26 |           <a href="https://scottaohara.github.io/a11y_styled_form_controls/">Index of styled form controls</a>
 27 |         </nav>
 28 |       </header>
 29 | 
 30 |       <main aria-label="Content">
 31 |         <div class="demo">
 32 |           <div>
 33 |             <h1>
 34 |               <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Switch Demos
 35 |             </h1>
 36 |             <p>Published: <span>March 20, 2017</span></p>
 37 |             <p>Last updated: <span>January 23, 2022</span></p>
 38 |           </div>
 39 | 
 40 |           <h2>
 41 |             Pattern Demos
 42 |           </h2>
 43 | 
 44 |           <p><code>&lt;button></code> base</p>
 45 |           <button type=button data-switch class="switch-toggle" data-switch-labels disabled>
 46 |             Enable dark mode
 47 |           </button>
 48 | 
 49 |           <p><code>&lt;span></code> base</p>
 50 |           <span data-switch class="switch-toggle" hidden>
 51 |             Enable dark mode (no visible state labels)
 52 |           </span>
 53 | 
 54 |           <p><code>&lt;input type=checkbox></code> base</p>
 55 |           <label class="check-switch">
 56 |             <input type="checkbox" data-switch data-keep-disabled disabled>
 57 |             Enable dark mode (disabled example)
 58 |           </label>
 59 | 
 60 |           <p><code>&lt;div></code> base</p>
 61 |           <div class="on-off-switch" data-switch id="enabler" hidden>
 62 |             Enable the next switch
 63 |           </div>
 64 | 
 65 |           <p><code>&lt;a></code> base</p>
 66 |           <a id="target" href="#" data-keep-disabled aria-disabled="true" class="on-off-switch" data-switch>
 67 |             Enable something else
 68 |           </a>
 69 | 
 70 | 
 71 |           <section class="demo-details">
 72 |             <h3>
 73 |               Pattern Details
 74 |             </h3>
 75 | 
 76 |             <details>
 77 |               <summary>Pattern Markup (before script runs)</summary>
 78 |               <pre><code>&lt;button data-switch
 79 |   type="button"
 80 |   class="switch-toggle"
 81 |   data-switch-labels
 82 |   disabled
 83 | >
 84 |   Dark mode
 85 | &lt;/button>
 86 | 
 87 | &lt;span data-switch class="switch-toggle" hidden>
 88 |   Dark mode (no visible state labels)
 89 | &lt;/span>
 90 | 
 91 | &lt;label class="check-switch">
 92 |   &lt;input type="checkbox" data-switch data-keep-disabled disabled>
 93 |   Enable dark mode
 94 | &lt;/label>
 95 | 
 96 | &lt;div class="on-off-switch" data-switch id="enabler" hidden>
 97 |   Enable the next switch
 98 | &lt;/div>
 99 | 
100 | &lt;a id="target"
101 |   href="#"
102 |   data-keep-disabled
103 |   aria-disabled="true"
104 |   class="on-off-switch"
105 |   data-switch
106 | >
107 |   Enable something else
108 | &lt;/a></code></pre>
109 |             </details>
110 |             
111 |             <details>
112 |               <summary>Pattern Markup (after script runs)</summary>
113 |               <pre><code>&lt;button data-switch 
114 |   type="button"
115 |   class="switch-toggle" 
116 |   data-switch-labels 
117 |   role="switch" 
118 |   aria-checked="false"
119 | >
120 |   Dark mode
121 |   &lt;span aria-hidden="true" class="show-labels">&lt;/span>
122 | &lt;/button>
123 | 
124 | 
125 | &lt;span data-switch 
126 |   class="switch-toggle" 
127 |   role="switch" 
128 |   tabindex="0" 
129 |   aria-checked="false"
130 | >
131 |   Dark mode (no visible state labels)
132 |   &lt;span aria-hidden="true">&lt;/span>
133 | &lt;/span>
134 | 
135 | 
136 | &lt;label class="check-switch">
137 |   &lt;input type="checkbox" 
138 |     data-switch 
139 |     data-keep-disabled 
140 |     disabled 
141 |     role="switch"
142 |   >
143 |   Enable dark mode
144 |   &lt;span aria-hidden="true">&lt;/span>
145 | &lt;/label>
146 | 
147 | 
148 | &lt;div class="on-off-switch" 
149 |   data-switch 
150 |   id="enabler" 
151 |   role="switch"
152 |   tabindex="0" 
153 |   aria-checked="false"
154 | >
155 |   Enable the next switch
156 |   &lt;span aria-hidden="true">&lt;/span>
157 | &lt;/div>
158 | 
159 | 
160 | &lt;a id="target" 
161 |   data-keep-disabled 
162 |   aria-disabled="true" 
163 |   class="on-off-switch" 
164 |   data-switch 
165 |   role="switch" 
166 |   tabindex="-1" 
167 |   aria-checked="false"
168 | >
169 |   Enable something else
170 |   &lt;span aria-hidden="true">&lt;/span>
171 | &lt;/a></code></pre>
172 |             </details>
173 | 
174 |             <p>
175 |               A switch is meant to function similarly to a checkbox or toggle button, but assistive technologies are meant to announce it in a manner that is consistent with its on-screen appearance as an on/off sort of UI component.
176 |             </p>
177 | 
178 |             <p>
179 |               This particular pattern uses a <code>&lt;button></code> as the base element that is then modified into a <code>role="switch"</code> with JavaScript. When a <code>&lt;button></code> is modified to be exposed as a <code>switch</code>, the <code>aria-checked</code> attribute needs to be added, and managed, to appropriately convey the current state to assistive technologies (AT).
180 |             </p>
181 | 
182 |             <p>
183 |               For more information about switches and how AT, such as screen readers, interpret them, please review <a href="https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/">the checkbox switch pattern</a>.
184 |             </p>
185 | 
186 |             <p>
187 |               For more information on the JavaScript and markup used, please see the
188 |               <a href="https://github.com/scottaohara/aria-switch-button">ReadMe on the GitHub repo for this pattern</a>.
189 |             </p>
190 | 
191 |             <h4>Usage note</h4>
192 |             <p>
193 |               Presently there are
194 |               <a href="https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/#affects_on_sr">inconsistencies with screen readers and ARIA switches</a>.
195 | 
196 |               Please review them to understand how the role is treated depending on screen reader and browser pairings, and if there are any gaps you may need to consider when considering the use of this role.
197 |             </p>
198 |           </section>
199 | 
200 |           <h3>
201 |             Continue reading
202 |           </h3>
203 |           <p>
204 |             For more information about switches, please read the
205 |             <a href="https://w3c.github.io/aria/#switch"><abbr>ARIA</abbr> specification for the  <code>switch</code> role</a>.
206 |             <a href="http://inclusive-components.club/toggle-button/">Inclusive Components Toggle Buttons, by Heydon Pickering</a>.
207 |           </p>
208 |         </div>
209 |       </main>
210 | 
211 |     </div>
212 |     <script src="index.js"></script>
213 |     <script>
214 |       const selector = '[data-switch]';
215 |       const els = document.querySelectorAll(selector);
216 | 
217 |       for ( let i = 0; i < els.length; i++ ) {
218 |         const dis = new ARIAswitch( els[i] );
219 |       }
220 | 
221 |       const test = document.getElementById('enabler');
222 |       const subject = document.getElementById('target');
223 | 
224 |       const demo = function ( e ) {
225 |         if ( e.target.getAttribute('aria-checked') === 'true' ) {
226 |           subject.removeAttribute('aria-disabled');
227 |           subject.removeAttribute('data-keep-disabled');
228 |           subject.tabIndex = 0;
229 |         }
230 |         else {
231 |           subject.setAttribute('aria-disabled', 'true');
232 |           subject.setAttribute('data-keep-disabled', '');
233 |           subject.tabIndex = -1;
234 |         }
235 |       }
236 | 
237 |       test.addEventListener('click', demo, false);
238 |       test.addEventListener('keypress', demo, false)
239 |     </script>
240 |   </body>
241 | </html>
242 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | // add utilities
  2 | const util = {
  3 |   generateID: function ( base ) {
  4 |     return base + Math.floor(Math.random() * 999);
  5 |   }
  6 | };
  7 | 
  8 | 
  9 | (function ( w, doc, undefined ) {
 10 |   /**
 11 |    * A11Y ARIA Switch
 12 |    *
 13 |    * Author: Scott O'Hara
 14 |    * Version: 2.0.1
 15 |    * License: https://github.com/scottaohara/aria-switch-control/blob/main/LICENSE
 16 |    */
 17 |   let ARIAswitchOptions = {
 18 |     baseID: 'aria_switch',
 19 |     defaultStateSelector: 'data-switch',
 20 |     showLabels: 'data-switch-labels',
 21 |     dataKeepDisabled: 'data-keep-disabled'
 22 |   };
 23 | 
 24 | 
 25 |   const ARIAswitch = function ( inst, options ) {
 26 |     const _options = Object.assign(ARIAswitchOptions, options);
 27 |     const el = inst;
 28 |     let elID;
 29 |     let keepDisabledState;
 30 |     let initState;
 31 |     let isCheckbox;
 32 | 
 33 | 
 34 |     /**
 35 |      * Initialize the switch instance.
 36 |      * Create unique IDs and generate
 37 |      * a markup pattern if necessary.
 38 |      */
 39 |     const init = function () {
 40 |       elID = el.id || util.generateID(_options.baseID);
 41 | 
 42 |       keepDisabledState = el.hasAttribute(_options.dataKeepDisabled);
 43 |       initState = el.getAttribute(_options.defaultStateSelector);
 44 | 
 45 |       setupBaseWidget()
 46 |       setupCheckedState();
 47 |       generateToggleUI();
 48 |       addEvents();
 49 |     };
 50 | 
 51 | 
 52 |     /**
 53 |      * Setup the baseline semantics of the widget,
 54 |      * ensuring that switches become/stay enabled/disabled,
 55 |      * and that only elements that need it get an appropriate
 56 |      * tabindex attribute.
 57 |      */
 58 |     const setupBaseWidget = function () {
 59 |       el.setAttribute('role', 'switch');
 60 | 
 61 |       // did this start off as a link?
 62 |       if ( el.href ) el.removeAttribute('href');
 63 | 
 64 |       if ( !keepDisabledState ) {
 65 |         el.hidden = false;
 66 |         el.disabled = false;
 67 |         el.removeAttribute('aria-disabled');
 68 |       }
 69 | 
 70 |       if ( el.hasAttribute('aria-disabled') ) {
 71 |         el.tabIndex = -1;
 72 |       }
 73 |       else {
 74 |         // if not a BUTTON or INPUT since those are focusable
 75 |         // by default
 76 |         if ( el.tagName !== 'BUTTON' && el.tagName !== 'INPUT' ) {
 77 |           el.tabIndex = 0;
 78 |         }
 79 |       }
 80 |     };
 81 | 
 82 | 
 83 |     /**
 84 |      * Setup state depending on the type of starter element.
 85 |      */
 86 |     const setupCheckedState = function () {
 87 |       if ( initState  && (el || {}).type !== 'checkbox' ) {
 88 |         el.setAttribute('aria-checked', 'true');
 89 |       }
 90 |       else if ( !initState  && (el || {}).type !== 'checkbox' ) {
 91 |         el.setAttribute('aria-checked', 'false');
 92 |       }
 93 | 
 94 |       if ( initState && (el || {}).type === 'checkbox' ) {
 95 |         el.checked = true;
 96 |       }
 97 |     };
 98 | 
 99 | 
100 |     /**
101 |      * Add click and keypress events to elements
102 |      */
103 |     const addEvents = function () {
104 |       el.addEventListener('click', toggleState, false);
105 | 
106 |       if ( el.tagName !== 'BUTTON' ) {
107 |         el.addEventListener('keypress', keyToggle, false);
108 |       }
109 |     };
110 | 
111 | 
112 |     /**
113 |      * Generate the element to serve as the toggle
114 |      * slider, or whatever version of the UI people
115 |      * want to visually create.
116 |      */
117 |     const generateToggleUI = function () {
118 |       const ui = doc.createElement('span');
119 |       const hasLabels = el.hasAttribute(_options.showLabels);
120 | 
121 |       ui.setAttribute('aria-hidden', 'true');
122 | 
123 |       if ( hasLabels ) ui.classList.add('show-labels');
124 | 
125 |       // if a checkbox, append the UI as a sibling.
126 |       // otherwise, as a child of the element.
127 |       if ( (el || {}).type === 'checkbox' ) {
128 |         el.parentNode.appendChild(ui);
129 |       }
130 |       else {
131 |         el.appendChild(ui);
132 |       }
133 |     };
134 | 
135 | 
136 |     /**
137 |      * Toggle between the on and off state of the switch.
138 |      * Ignore switches that are baseline checkboxes. Checkboxes
139 |      * can update their checked state natively and do not need
140 |      * aria-checked.
141 |      */
142 |     const toggleState = function ( e ) {
143 |       if ( !el.hasAttribute('aria-disabled') ) {
144 |         if ( (el || {}).type !== 'checkbox' ) {
145 |           e.preventDefault();
146 |           el.setAttribute('aria-checked', el.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
147 |         }
148 |       }
149 |     };
150 | 
151 | 
152 |     /**
153 |      * Handle keyboard events for the switch.
154 |      */
155 |     const keyToggle = function ( e ) {
156 |       const keyCode = e.keyCode || e.which;
157 | 
158 |       switch ( keyCode ) {
159 |         case 32:
160 |         case 13:
161 |           e.preventDefault();
162 |           toggleState(e);
163 |           break;
164 | 
165 |         default:
166 |           break;
167 |       }
168 | 
169 |       /**
170 |        * Checkboxes don't allow for Enter key to activate
171 |        * by default. However, "switches" do have this
172 |        * expectation, especially since they can be announced
173 |        * as toggle buttons with some screen reader / browser pairings.
174 |        */
175 |       if ( (el || {}).type === 'checkbox' ) {
176 |         switch ( keyCode ) {
177 |           case 13:
178 |             e.preventDefault();
179 |             this.checked = this.checked == true ? false : true;
180 |             break;
181 | 
182 |           default:
183 |             break;
184 |         }
185 |       }
186 |     }
187 | 
188 | 
189 |     init.call( this );
190 |     return this;
191 |   }; // ARIAswitch()
192 | 
193 |   w.ARIAswitch = ARIAswitch;
194 | })( window, document );
195 | 


--------------------------------------------------------------------------------