WIP char count updates, as per Rob Carr's feedback.

content/body/textbox.php

@@ -102,7 +102,7 @@
 
 
 
-<div id="html-example" class="enable-example">
+<div id="charcount-example" class="enable-example">
   <form class="enable-form-example">
     <fieldset>
       <legend>Payment information</legend>
@@ -114,55 +114,48 @@
         </div>
 
         <div>
-          <label for="notes--example2" class="textarea-label">Notes:</label>
-          <textarea id="notes--example2" data-has-character-count="true" name="notes--example2" maxlength="100" data-screen-reader-text="${numChars} characters remaining."></textarea>
+          <label for="notes--example2" class="textarea-label">Delivery Notes:</label>
+          <textarea id="notes--example2" data-has-character-count="true" name="notes--example2" maxlength="100"></textarea>
+        </div>
+
+        <div>
+          <label for="gift-card-text--example2" class="textarea-label">Gift Card:</label>
+          <textarea id="gift-card-text--example2" data-has-character-count="true" name="gift-card-text--example2" maxlength="150"  data-screen-reader-text="${charsRemaining} characters remaining." aria-describedby="gift-card__desc"></textarea>
+          <label id="gift-card__desc" class="desc">Write a personalized message on the gift card for the recipient.</label>
         </div>
       </div>
     </fieldset>
 
+    <!--
+      Help:
+         VO/OSX: CAPSLOCK+SHIFT+H
+         NVDA: 
+
     <button type="submit">Submit</button>
   </form>
 
-  <template id="enable-character-count__template">
-    <!-- This is for screen readers only -->
-    <span class="sr-only">
-      ${screenReaderText}
-    </span>
-
-    <!-- This is for sighted users -->
-    <span aria-hidden="true">
-      ${visualText}
-    </span>
-  </template>
-
-  <template id="enable-character-count-template__screen-reader">
-  Character count: ${numChars} out of ${maxLength}
-  </template>
-
-  <template id="enable-character-count-template__visual">
-  ${numChars}/${maxLength}
-  </template>
 </div>
 
-<?php includeShowcode("html-example")?>
+<?php includeShowcode("charcount-example")?>
 
-<script type="application/json" id="html-example-props">
+<script type="application/json" id="charcount-example-props">
 {
   "replaceHtmlRules": {},
   "steps": [
 
     {
-      "label": "All form fields need labels",
-      "highlight": "for",
-      "notes": "Each form field have a <strong>label</strong> tag whose <strong>for</strong> element connects it to the form field via the form field's <strong>id</strong>."
+      "label": "Place an aria-describedby for instructions",
+      "highlight": "%INLINE%charcount-example ||| aria-describedby"
     },
     {
-      "label": "Use <code>&lt;input type=\"text\"&gt;</code> for single line text inputs.",
-      "highlight": "%OPENTAG%input"
+      "label": "Code the instructions for this component.",
+      "highlight": "%INLINE%enable-character-count__global ||| id=\"character-count__desc\"",
+      "notes": "This is the target of the <code>aria-describedby</code> in the previous step."
     },
     {
-      "label": "Use <code>&lt;textarea&gt;</code> for multiline text inputs",
-      "highlight": "%OPENCLOSETAG%textarea"
+      "label": "Have an ARIA live region to announce when user starts approaching character count limit",
+      "highlight": "%INLINE%enable-character-count__global ||| %OPENCLOSECONTENTTAG%output",
+      "notes": ""
     }
   ]
 }

css/form-error.css

@@ -63,20 +63,33 @@
   margin-bottom: 0.5rem;
   display: block;
 }
+.enable-form-example label.desc,
 .enable-form-example label.error {
   text-align: left;
-  color: #e60000;
   margin-top: 5px;
   margin-bottom: 20px;
-  padding-left: 18px;
+  padding-left: 5px;
   position: relative;
 }
 @media only screen and (min-width: 720px) {
+  .enable-form-example label.desc,
   .enable-form-example label.error {
-    margin-left: calc(45% + 10px);
     margin-bottom: 10px;
   }
 }
+.enable-form-example label.desc {
+  color: #666666;
+  font-style: italic;
+}
+.enable-form-example label.error {
+  color: #e60000;
+  padding-left: 18px;
+}
+@media only screen and (min-width: 720px) {
+  .enable-form-example label.error {
+    margin-left: calc(45% + 10px);
+  }
+}
 .enable-form-example label.error::before {
   content: '';
   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20overflow%3D%22visible%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20opacity%3D%22.2%22%20d%3D%22M4%2064c0%2033.636%2027.364%2061%2061%2061s61-27.364%2061-61S98.636%203%2065%203%204%2030.364%204%2064z%22%2F%3E%3Cpath%20opacity%3D%22.2%22%20d%3D%22M3%2064c0%2034.188%2027.813%2062%2062%2062%2034.188%200%2062-27.813%2062-62S99.187%202%2065%202%203%2029.813%203%2064z%22%2F%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2260.49%22%20y1%3D%221.742%22%20x2%3D%2269.656%22%20y2%3D%22126.241%22%3E%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23a70000%22%2F%3E%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23a70000%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M4%2063c0%2033.636%2027.364%2061%2061%2061s61-27.364%2061-61S98.636%202%2065%202%204%2029.364%204%2063z%22%2F%3E%3ClinearGradient%20id%3D%22b%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2257.765%22%20y1%3D%221.689%22%20x2%3D%2272.515%22%20y2%3D%22126.69%22%3E%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23bd0000%22%2F%3E%3Cstop%20offset%3D%22.352%22%20style%3D%22stop-color%3A%23c40000%22%2F%3E%3Cstop%20offset%3D%22.869%22%20style%3D%22stop-color%3A%23d80000%22%2F%3E%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23de0000%22%2F%3E%3C%2FlinearGradient%3E%3Ccircle%20fill%3D%22url(%23b)%22%20cx%3D%2265%22%20cy%3D%2263%22%20r%3D%2260%22%2F%3E%3ClinearGradient%20id%3D%22c%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2223.375%22%20y1%3D%2214.566%22%20x2%3D%2271.625%22%20y2%3D%2267.816%22%3E%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23e05e5e%22%2F%3E%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23d81818%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23c)%22%20d%3D%22M57.75%2056.5c24.934-8.476%2065.898-6.226%2065.898-6.226C117.811%2023.25%2093.771%203%2065%203%2031.863%203%205%2029.863%205%2063a59.81%2059.81%200%200%200%204.715%2023.354S32.817%2064.976%2057.75%2056.5z%22%2F%3E%3ClinearGradient%20id%3D%22d%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2263.818%22%20y1%3D%2254.581%22%20x2%3D%2272.118%22%20y2%3D%22124.92%22%3E%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23bd0000%22%2F%3E%3Cstop%20offset%3D%22.043%22%20style%3D%22stop-color%3A%23c10606%22%2F%3E%3Cstop%20offset%3D%22.294%22%20style%3D%22stop-color%3A%23d62424%22%2F%3E%3Cstop%20offset%3D%22.541%22%20style%3D%22stop-color%3A%23e63a3a%22%2F%3E%3Cstop%20offset%3D%22.78%22%20style%3D%22stop-color%3A%23ef4747%22%2F%3E%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23f24b4b%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23d)%22%20d%3D%22M65%20122C32.03%20122%205.283%2095.406%205.013%2062.5c-.002.167-.013.333-.013.5%200%2033.137%2026.863%2060%2060%2060s60-26.863%2060-60c0-.167-.012-.333-.013-.5C124.717%2095.406%2097.97%20122%2065%20122z%22%2F%3E%3ClinearGradient%20id%3D%22e%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22-68.751%22%20y1%3D%22-319.85%22%20x2%3D%22-194.001%22%20y2%3D%22-319.85%22%20gradientTransform%3D%22rotate(180%20-33%20-143.25)%22%3E%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23e57373%22%2F%3E%3Cstop%20offset%3D%22.118%22%20style%3D%22stop-color%3A%23ec9393%22%2F%3E%3Cstop%20offset%3D%22.266%22%20style%3D%22stop-color%3A%23f4b4b4%22%2F%3E%3Cstop%20offset%3D%22.39%22%20style%3D%22stop-color%3A%23f9c9c9%22%2F%3E%3Cstop%20offset%3D%22.472%22%20style%3D%22stop-color%3A%23fbd0d0%22%2F%3E%3Cstop%20offset%3D%22.548%22%20style%3D%22stop-color%3A%23f9c8c8%22%2F%3E%3Cstop%20offset%3D%22.67%22%20style%3D%22stop-color%3A%23f5b1b1%22%2F%3E%3Cstop%20offset%3D%22.821%22%20style%3D%22stop-color%3A%23ed8b8b%22%2F%3E%3Cstop%20offset%3D%22.994%22%20style%3D%22stop-color%3A%23e35858%22%2F%3E%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23e35656%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23e)%22%20d%3D%22M65%204.101c32.97%200%2059.717%2026.594%2059.987%2059.5.001-.167.013-.333.013-.5%200-33.137-26.863-60-60-60s-60%2026.863-60%2060c0%20.167.011.333.013.5.27-32.906%2027.017-59.5%2059.987-59.5z%22%2F%3E%3ClinearGradient%20id%3D%22f%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2261.692%22%20y1%3D%2246.315%22%20x2%3D%2269.442%22%20y2%3D%2283.065%22%3E%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23bd0000%22%2F%3E%3Cstop%20offset%3D%22.167%22%20style%3D%22stop-color%3A%23c10907%22%2F%3E%3Cstop%20offset%3D%22.445%22%20style%3D%22stop-color%3A%23cd2319%22%2F%3E%3Cstop%20offset%3D%22.796%22%20style%3D%22stop-color%3A%23e04c36%22%2F%3E%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23ed6749%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D%22url(%23f)%22%20d%3D%22M26%2049a1%201%200%200%200-1%201v24a1%201%200%200%200%201%201h78a1%201%200%200%200%201-1V50a1%201%200%200%200-1-1H26z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M26%2050h78v24H26z%22%2F%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M27%2051h77v-1H26v24h1z%22%2F%3E%3C%2Fsvg%3E");

css/textbox.css

@@ -28,16 +28,21 @@ textarea,
   min-width: 20rem;
   max-width: none !important;
 }
-.enable-character-count {
-  display: block;
-  width: 20rem;
-  margin-left: 45%;
-  text-align: right;
-}
 .textarea-label {
   vertical-align: top;
 }
 [role="group"] div,
 fieldset div {
   margin-bottom: 10px;
 }
+#charcount-example .enable-character-count {
+  display: block;
+  width: 20rem;
+  margin-left: 45%;
+  text-align: right;
+  margin-top: 5px;
+}
+#charcount-example label.desc {
+  width: 15rem;
+  float: left;
+}

enable-node-libs/glider-js/glider.js

@@ -140,6 +140,7 @@
     _.trackWidth = width
     _.isDrag = false
     _.preventClick = false
+    _.move = false
 
     _.opt.resizeLock && _.scrollTo(_.slide * _.itemWidth, 0)
 
@@ -167,6 +168,10 @@
       _.isDrag = false
     }
 
+    const move = function () {
+      _.move = true
+    }
+
     var events = {
       mouseup: mouseup,
       mouseleave: mouseup,
@@ -175,14 +180,22 @@
         e.stopPropagation()
         _.mouseDown = e.clientX
         _.ele.classList.add('drag')
+        _.move = false
+        setTimeout(move, 300)
+      },
+      touchstart: function (e) {
+        _.ele.classList.add('drag')
+        _.move = false
+        setTimeout(move, 300)
       },
       mousemove: _.mouse,
       click: function (e) {
-        if (_.preventClick) {
+        if (_.preventClick && _.move) {
           e.preventDefault()
           e.stopPropagation()
         }
         _.preventClick = false
+        _.move = false
       }
     }
 
@@ -205,6 +218,7 @@
     if (!_.dots) return
 
     _.dots.innerHTML = ''
+    _.dots.setAttribute('role', 'tablist')
     _.dots.classList.add('glider-dots')
 
     for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i) {
@@ -262,19 +276,23 @@
           'disabled',
           _.ele.scrollLeft <= 0 || disableArrows
         )
-        _.arrows.prev.classList.contains('disabled')
-          ? _.arrows.prev.setAttribute('aria-disabled', true)
-          : _.arrows.prev.setAttribute('aria-disabled', false)
+
+        _.arrows.prev.setAttribute(
+          'aria-disabled',
+          _.arrows.prev.classList.contains('disabled')
+        )
       }
       if (_.arrows.next) {
         _.arrows.next.classList.toggle(
           'disabled',
           Math.ceil(_.ele.scrollLeft + _.containerWidth) >=
             Math.floor(_.trackWidth) || disableArrows
         )
-        _.arrows.next.classList.contains('disabled')
-          ? _.arrows.next.setAttribute('aria-disabled', true)
-          : _.arrows.next.setAttribute('aria-disabled', false)
+
+        _.arrows.next.setAttribute(
+          'aria-disabled',
+          _.arrows.next.classList.contains('disabled')
+        )
       }
     }
 
@@ -369,9 +387,12 @@
     var originalSlide = slide
     ++_.animate_id
 
+    var prevSlide = _.slide
+    var position
+
     if (dot === true) {
-      slide = slide * _.containerWidth
-      slide = Math.round(slide / _.itemWidth) * _.itemWidth
+      slide = Math.round((slide * _.containerWidth) / _.itemWidth)
+      position = slide * _.itemWidth
     } else {
       if (typeof slide === 'string') {
         var backwards = slide === 'prev'
@@ -401,12 +422,14 @@
       slide = Math.max(Math.min(slide, _.slides.length), 0)
 
       _.slide = slide
-      slide = _.itemWidth * slide
+      position = _.itemWidth * slide
     }
 
+    _.emit('scroll-item', { prevSlide, slide })
+
     _.scrollTo(
-      slide,
-      _.opt.duration * Math.abs(_.ele.scrollLeft - slide),
+      position,
+      _.opt.duration * Math.abs(_.ele.scrollLeft - position),
       function () {
         _.updateControls()
         _.emit('animated', {
@@ -543,8 +566,10 @@
         /^glider/.test(className) && ele.classList.remove(className)
       })
     }
-    // remove track
-    replace.children[0].outerHTML = replace.children[0].innerHTML
+    // remove track if it was created by glider
+    if (!_.opt.skipTrack) {
+      replace.children[0].outerHTML = replace.children[0].innerHTML
+    }
     clear(replace);
     [].forEach.call(replace.getElementsByTagName('*'), clear)
     _.ele.parentNode.replaceChild(replace, _.ele)

enable-node-libs/text-zoom-event/dist/textZoomEvent.module.js

@@ -104,7 +104,7 @@ if (typeof document !== 'undefined') {
             const s = 'style="width:100%;height:100%;padding:0;margin:0;overflow:hidden;"';
 
             doc.open();
-            doc.write('<html ' + s + '><body ' + s + '></body></html>');
+            doc.write('<!DOCTYPE html><html ' + s + '><body ' + s + '></body></html>');
             doc.close();
 
             dWin.addEventListener('resize', onFontSizeChangeHandler);