Accessibility + required and validation styling

haubek · Feb 18, 2019 · b5b0c5e · b5b0c5e
1 parent 4c07948
commit b5b0c5e
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 31 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,11 @@
 # Release History
 
+## 1.1.0
+
+* Fixed keyboard accessibility
+* Added required styling
+* Added validation state styling
+
 ## 1.0.12
 
 * Upgraded to Bootstrap 4.3.1

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "license": "MIT",
   "authors": [
     { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

diff --git a/dist/css/component-custom-switch.css b/dist/css/component-custom-switch.css
@@ -3,14 +3,16 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.0.12
+ * Version: 1.1.0
  * Copyright (c) 2017-18 Martin Haubek
  *
  *
  *
  */
 .custom-switch .custom-switch-input {
-  display: none; }
+  position: absolute;
+  z-index: -1;
+  opacity: 0; }
   .custom-switch .custom-switch-input, .custom-switch .custom-switch-input:after, .custom-switch .custom-switch-input:before,
   .custom-switch .custom-switch-input *,
   .custom-switch .custom-switch-input *:after,
@@ -38,7 +40,7 @@
     padding: 4px;
     background: #adb5bd;
     border-radius: 76px;
-    transition: all 200ms ease; }
+    transition: all 150ms ease; }
     .custom-switch .custom-switch-input + .custom-switch-btn:after, .custom-switch .custom-switch-input + .custom-switch-btn:before {
       position: relative;
       display: block;
@@ -49,7 +51,7 @@
       left: 2px;
       border-radius: 50%;
       background: white;
-      transition: all 200ms ease; }
+      transition: all 150ms ease; }
     .custom-switch .custom-switch-input + .custom-switch-btn:before {
       display: none; }
     .custom-switch .custom-switch-input + .custom-switch-btn.text-hide {
@@ -77,8 +79,10 @@
     cursor: default; }
   .custom-switch .custom-switch-input[disabled]:checked + .custom-switch-btn {
     background: rgba(40, 167, 69, 0.4); }
-  .custom-switch .custom-switch-input:not([disabled]):active ~ .custom-switch-btn, .custom-switch .custom-switch-input:not([disabled]):focus ~ .custom-switch-btn, .custom-switch .custom-switch-input:not([disabled]):hover ~ .custom-switch-btn {
+  .custom-switch .custom-switch-input:not([disabled]):focus ~ .custom-switch-btn {
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(56, 123, 189, 0.25); }
+  .custom-switch .custom-switch-input[required] ~ .custom-switch-btn {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.125rem rgba(220, 53, 69, 0.5); }
 
 .custom-switch .custom-switch-form-text {
   display: inline-block;
@@ -205,3 +209,7 @@
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='24'%3E%3Ctext x='6.85714' y='15' font-size='10px' font-family='-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji' fill='%23fff'%3EEnabled%3C/text%3E%3C/svg%3E"); }
   .custom-switch-xs.custom-switch-label-status .custom-switch-input:checked + .custom-switch-btn:after {
     left: 52px; }
+
+.is-invalid .custom-switch .custom-switch-input ~ .custom-switch-btn,
+.was-validated .custom-switch:invalid .custom-switch-input ~ .custom-switch-btn {
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem #dc3545; }
diff --git a/dist/css/component-custom-switch.min.css b/dist/css/component-custom-switch.min.css
diff --git a/example.html b/example.html
@@ -12,44 +12,58 @@
     <div class="d-flex align-items-start flex-column h-100">
       <div class="w-100 m-auto py-5 text-center">
 
-        <div class="custom-switch">
+        <div class="custom-switch pl-0">
           <input class="custom-switch-input" id="example_01" type="checkbox">
           <label class="custom-switch-btn" for="example_01"></label>
         </div>
+
         <hr>
-        <div class="custom-switch custom-switch-label-io">
+
+        <div class="custom-switch custom-switch-label-io pl-0">
           <input class="custom-switch-input" id="example_02" type="checkbox">
           <label class="custom-switch-btn" for="example_02"></label>
         </div>
+
         <hr>
-        <div class="custom-switch custom-switch-label-onoff">
+
+        <div class="custom-switch custom-switch-label-onoff pl-0">
           <input class="custom-switch-input" id="example_03" type="checkbox">
           <label class="custom-switch-btn" for="example_03"></label>
         </div>
+
         <hr>
-        <div class="custom-switch custom-switch-label-yesno">
+
+        <div class="custom-switch custom-switch-label-yesno pl-0">
           <input class="custom-switch-input" id="example_04" type="checkbox">
           <label class="custom-switch-btn" for="example_04"></label>
         </div>
+
         <hr>
-        <div class="custom-switch custom-switch-label-status">
+
+        <div class="custom-switch custom-switch-label-status pl-0">
           <input class="custom-switch-input" id="example_05" type="checkbox">
           <label class="custom-switch-btn" for="example_05"></label>
         </div>
+
         <hr>
-        <div class="custom-switch custom-switch-label-onoff custom-switch-sm">
+
+        <div class="custom-switch custom-switch-label-onoff custom-switch-sm pl-0">
           <input class="custom-switch-input" id="example_06" type="checkbox">
           <label class="custom-switch-btn" for="example_06"></label>
         </div>
         <p>I'm <code>sm</code></p>
+
         <hr>
-        <div class="custom-switch custom-switch-label-onoff custom-switch-xs">
+
+        <div class="custom-switch custom-switch-label-onoff custom-switch-xs pl-0">
           <input class="custom-switch-input" id="example_07" type="checkbox">
           <label class="custom-switch-btn" for="example_07"></label>
         </div>
         <p>I'm <code>xs</code></p>
+
         <hr>
-        <div class="custom-switch custom-switch-label-yesno">
+
+        <div class="custom-switch custom-switch-label-yesno pl-0">
           <input class="custom-switch-input" id="example_08" type="checkbox">
           <label class="custom-switch-btn" for="example_08"></label>
           <div class="custom-switch-content-checked">
@@ -59,25 +73,49 @@
             <span class="text-danger">I'm unchecked (click me!)</span>
           </div>
         </div>
+
         <hr>
-        <div class="custom-switch custom-switch-label-io">
-          <input class="custom-switch-input" id="example_09" type="checkbox" disabled>
+
+        <div class="custom-switch pl-0">
+          <input class="custom-switch-input" id="example_09" type="checkbox" required>
           <label class="custom-switch-btn" for="example_09"></label>
         </div>
-        <div class="custom-switch custom-switch-label-io">
-          <input class="custom-switch-input" id="example_10" type="checkbox" checked disabled>
+        <p>I'm <code>required</code></p>
+
+        <hr>
+
+        <div class="custom-switch pl-0">
+          <input class="custom-switch-input" id="example_10" type="checkbox" disabled>
           <label class="custom-switch-btn" for="example_10"></label>
         </div>
-        <p>I'm disabled</p>
+        <div class="custom-switch pl-0">
+          <input class="custom-switch-input" id="example_11" type="checkbox" checked disabled>
+          <label class="custom-switch-btn" for="example_11"></label>
+        </div>
+        <p>I'm <code>disabled</code></p>
+
         <hr>
+
         <div class="form-group">
-          <div for="example_11">I'm a form label:</div>
-          <div class="custom-switch">
-            <input type="checkbox" class="custom-switch-input" id="example_11" checked>
-            <label class="custom-switch-btn text-hide" for="example_11">{value}</label>
+          <div for="example_12">I'm a &lt;div&gt; form label:</div>
+          <div class="custom-switch pl-0">
+            <input type="checkbox" class="custom-switch-input" id="example_12" checked>
+            <label class="custom-switch-btn text-hide" for="example_12">{value}</label>
           </div>
         </div>
 
+        <hr>
+        <legend>Validation</legend>
+        <form class="was-validated">
+          <div class="form-group is-invalid">
+            <div class="custom-switch pl-0">
+              <input class="custom-switch-input" id="example_13" type="checkbox">
+              <label class="custom-switch-btn" for="example_13"></label>
+            </div>
+          </div>
+        </form>
+        <p>I'm <code>invalid</code></p>
+
       </div>
     </div>
   </div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-custom-switch",
   "description": "Bootstrap 4 Component - Custom switch",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "license": "MIT",
   "author": {
     "name": "Martin Haubek",

diff --git a/src/scss/_component-custom-switch.scss b/src/scss/_component-custom-switch.scss
@@ -1,6 +1,8 @@
 .custom-switch {
   .custom-switch-input {
-    display: none;
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
     &,
     &:after,
     &:before,
@@ -83,14 +85,17 @@
       }
     }
     &:not([disabled]) {
-      &:active,
-      &:focus,
-      &:hover {
+      &:focus {
         ~ .custom-switch-btn {
           box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .25rem rgba(56,123,189,.25);
         }
       }
     }
+    &[required] {
+      ~ .custom-switch-btn {
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .125rem rgba($switch-required-color,.5);
+      }
+    }
   }
   .custom-switch-form-text {
     display: inline-block;
@@ -288,3 +293,10 @@
     }
   }
 }
+
+// Validation
+
+.is-invalid .custom-switch .custom-switch-input ~ .custom-switch-btn,
+.was-validated .custom-switch:invalid .custom-switch-input ~ .custom-switch-btn {
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .25rem rgba($switch-invalid-color,1);
+}
diff --git a/src/scss/_component-variables.scss b/src/scss/_component-variables.scss
@@ -12,7 +12,9 @@ $switch-font-size:                  12;
 $switch-font-size-sm:               11;
 $switch-font-size-xs:               10;
 $switch-font-family:                $font-family-sans-serif;
-$switch-duration:                   200ms;
+$switch-duration:                   150ms;
+$switch-required-color:             $danger;
+$switch-invalid-color:              $form-feedback-invalid-color;
 
 $switch-checked-color:              $white;
 $switch-checked-bg:                 $green;

diff --git a/src/scss/build.scss b/src/scss/build.scss
@@ -3,7 +3,7 @@
  *
  *
  * Bootstrap 4 Component - Custom switch
- * Version: 1.0.12
+ * Version: 1.1.0
  * Copyright (c) 2017-18 Martin Haubek
  *
  *