From dc8835164959f99e6cf1484ca967911b4764575b Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 3 Oct 2021 13:10:33 -0700 Subject: [PATCH] White space consistency --- examples/switch/switch-button.html | 320 ++++++++++++++--------------- 1 file changed, 160 insertions(+), 160 deletions(-) diff --git a/examples/switch/switch-button.html b/examples/switch/switch-button.html index 9f5b8a9995..2318f42876 100644 --- a/examples/switch/switch-button.html +++ b/examples/switch/switch-button.html @@ -38,45 +38,45 @@

Switch Example Using HTML Button

--> -
-
-

Example

-
- -
-
-

Environmental Controls

- - - +
+
+

Example

+
+ +
+
+

Environmental Controls

+ + + +
-
- -
+ +

Accessibility Features

@@ -109,139 +109,139 @@

Accessibility Features

-
-

Keyboard Support

- - - - - - - - - - - - - - +
+

Keyboard Support

+
KeyFunction
Tab -
    -
  • Moves keyboard focus to the switch.
  • -
-
Space, Enter
+ + + + + + + + + - -
KeyFunction
Tab
    -
  • Toggle switch between on and off.
  • +
  • Moves keyboard focus to the switch.
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - + + - - - - - - + + +
RoleAttributeElementUsage
switchbuttonIdentifies the button element as a switch.
aria-checked="false"button +
Space, Enter
    -
  • Indicates the switch is off.
  • -
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • +
  • Toggle switch between on and off.
-
aria-checked="true"button +
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
switchbuttonIdentifies the button element as a switch.
aria-checked="false"button +
    +
  • Indicates the switch is off.
  • +
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • +
+
aria-checked="true"button +
    +
  • Indicates the switch is on.
  • +
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • +
+
aria-hidden="true"span.on and span.off
    -
  • Indicates the switch is on.
  • -
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • +
  • Removes the strings on and off that appear to the right of the switch from the accessible name of the switch.
  • +
  • These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.
-
aria-hidden="true"span.on and span.off -
    -
  • Removes the strings on and off that appear to the right of the switch from the accessible name of the switch.
  • -
  • These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.
  • -
-
h3Provides a grouping label for the group of switches.
groupdivIdentifies the div element as a group container for the switches.
aria-labelledbydivReferences the h3 element to define the accessible name for the group of switches.
-
+ + + + + + h3 + Provides a grouping label for the group of switches. + + + group + + div + Identifies the div element as a group container for the switches. + + + + aria-labelledby + div + References the h3 element to define the accessible name for the group of switches. + + + + -
-

Javascript and CSS Source Code

- - -
+
+

Javascript and CSS Source Code

+ + +
-
-

HTML Source Code

- -
- - - -
+
+

HTML Source Code

+ +
+ + + +