Adding Character Counter on textbox page.

PublicisSapient · Jan 25, 2023 · 5df830d · 5df830d
1 parent 8ca4b46
commit 5df830d
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 51 deletions.
diff --git a/content/body/textbox.php b/content/body/textbox.php
@@ -239,4 +239,55 @@
     }
   ]
 }
-</script>
+</script>
+
+
+
+
+<h2>Textbox With Character Counter</h2>
+
+<p>The character counter is visible at all times.  It is announced to screen reader users when:</p>
+
+<ol>
+  <li>They use the keyboard to access the textbox (e.g. using the TAB key).</li>
+  <li>When there are <code>n</code> characters left before the textbox is filled, where <code>n</code> is either 20 (the default value) or the value used in the textbox's <code>data-warning-threshold</code> attribute.</li>
+</ol>
+
+<div id="charcount-example" class="enable-example">
+  <form class="enable-form-example">
+    <fieldset>
+      <legend>Payment information</legend>
+
+      <div class="enable-form-example__fieldset-inner-container">
+
+
+        <div>
+          <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>
+    </fieldset>
+
+    <!--
+      Help:
+         VO/OSX: CAPSLOCK+SHIFT+H
+    -->
+
+    <button type="submit">Submit</button>
+  </form>
+
+</div>
+
+
+
+<?= includeNPMInstructions(
+    'enable-character-count', 
+    array(),
+    'enable-character-count',
+    false, 
+    array(
+      'noCSS' => true
+    )
+  ) 
+?>
diff --git a/content/bottom/textbox.php b/content/bottom/textbox.php
@@ -1 +1,7 @@
-<script type="module" src="./js/modules/enable-character-count.js"></script>
+<script type="module">
+  // import the JS module
+  import enableCharacterCount from './js/modules/enable-character-count.js';
+ 
+  // How to initialize the enableCharacterCount library
+  enableCharacterCount.init();
+</script>
diff --git a/js/modules/enable-character-count.js b/js/modules/enable-character-count.js
@@ -43,7 +43,8 @@ const enableCharacterCount = new function() {
     if (dataset.announceAfterEscape === 'true') {
       const desc = target.getAttribute('aria-describedby') || '';
       console.log('setting desc', target, desc);
-      target.setAttribute('aria-describedby', `${desc} character-count__desc`.trim())
+      target.setAttribute('aria-describedby', `${desc} character-count__desc`.trim());
+
     }
   }
 
@@ -69,6 +70,8 @@ const enableCharacterCount = new function() {
     ariaDescBy = ariaDescBy ? ariaDescBy.replace('character-count__desc', '') : '';
     ariaDescBy = ariaDescBy.split(/\s+/)[0];
 
+    console.log('!!!', ariaDescBy)
+
     const ariaDescByEl = ariaDescBy && document.getElementById(ariaDescBy);
     console.log('desc', ariaDescBy, ariaDescByEl);
     const counterEl = document.createElement('output');
@@ -77,6 +80,9 @@ const enableCharacterCount = new function() {
     counterEl.id = `${targetId}__counter`;
     counterEl.setAttribute('aria-live', 'off')
     target.setAttribute('data-character-count-label', counterEl.id);
+
+    // adds the character counter to the textarea's aria-describedby
+    target.setAttribute('aria-describedby', `${ariaDescBy} ${counterEl.id}`)
 
     if (ariaDescByEl) {
       ariaDescByEl.insertAdjacentElement('afterend', counterEl);
@@ -126,28 +132,18 @@ const enableCharacterCount = new function() {
 
       timeout && clearTimeout(timeout);
 
-      switch (key) {
-        case 'Escape':
-          if (dataset.announceAfterEscape) {
-            e.stopPropagation();
-            announceCharCount(target);
-          }
-          break;
-        default:
-          writeCharCount(target);
-          liveRegion.innerHTML = '';
-
-          if (
-            (inputLength > maxLength - globalWarningThreshold && !wasArrowPressed(key)) ||
-            (dataset.announceAfterSpace === 'true' && key === ' ')
-          ) {
-            timeout = setTimeout(() => {
-              announceCharCount(target);
-            }, 500);
-          }
 
+
+      writeCharCount(target);
+      liveRegion.innerHTML = '';
+
+      if (inputLength > maxLength - globalWarningThreshold && !wasArrowPressed(key)) {
+        timeout = setTimeout(() => {
+          announceCharCount(target);
+        }, 1000);
       }
 
+
     }
   }
 
@@ -183,4 +179,4 @@ const enableCharacterCount = new function() {
   }
 }
 
-enableCharacterCount.init();
+export default enableCharacterCount;
diff --git a/js/modules/es4/enable-character-count.js b/js/modules/es4/enable-character-count.js
@@ -42,7 +42,8 @@ const enableCharacterCount = new function() {
     if (dataset.announceAfterEscape === 'true') {
       const desc = target.getAttribute('aria-describedby') || '';
       console.log('setting desc', target, desc);
-      target.setAttribute('aria-describedby', `${desc} character-count__desc`.trim())
+      target.setAttribute('aria-describedby', `${desc} character-count__desc`.trim());
+
     }
   }
 
@@ -68,6 +69,8 @@ const enableCharacterCount = new function() {
     ariaDescBy = ariaDescBy ? ariaDescBy.replace('character-count__desc', '') : '';
     ariaDescBy = ariaDescBy.split(/\s+/)[0];
 
+    console.log('!!!', ariaDescBy)
+
     const ariaDescByEl = ariaDescBy && document.getElementById(ariaDescBy);
     console.log('desc', ariaDescBy, ariaDescByEl);
     const counterEl = document.createElement('output');
@@ -76,6 +79,9 @@ const enableCharacterCount = new function() {
     counterEl.id = `${targetId}__counter`;
     counterEl.setAttribute('aria-live', 'off')
     target.setAttribute('data-character-count-label', counterEl.id);
+
+    // adds the character counter to the textarea's aria-describedby
+    target.setAttribute('aria-describedby', `${ariaDescBy} ${counterEl.id}`)
 
     if (ariaDescByEl) {
       ariaDescByEl.insertAdjacentElement('afterend', counterEl);
@@ -125,28 +131,18 @@ const enableCharacterCount = new function() {
 
       timeout && clearTimeout(timeout);
 
-      switch (key) {
-        case 'Escape':
-          if (dataset.announceAfterEscape) {
-            e.stopPropagation();
-            announceCharCount(target);
-          }
-          break;
-        default:
-          writeCharCount(target);
-          liveRegion.innerHTML = '';
-
-          if (
-            (inputLength > maxLength - globalWarningThreshold && !wasArrowPressed(key)) ||
-            (dataset.announceAfterSpace === 'true' && key === ' ')
-          ) {
-            timeout = setTimeout(() => {
-              announceCharCount(target);
-            }, 500);
-          }
 
+
+      writeCharCount(target);
+      liveRegion.innerHTML = '';
+
+      if (inputLength > maxLength - globalWarningThreshold && !wasArrowPressed(key)) {
+        timeout = setTimeout(() => {
+          announceCharCount(target);
+        }, 1000);
       }
 
+
     }
   }
 
@@ -182,4 +178,3 @@ const enableCharacterCount = new function() {
   }
 }
 
-enableCharacterCount.init();
diff --git a/templates/includes/npm.php b/templates/includes/npm.php
@@ -119,15 +119,15 @@
     <?php includeShowcodeStaticBegin() ?>
 // import the JS module
 import <?= $moduleVar ?> from '~enable-a11y/js/modules/<?= $moduleName ?>';
-
 <?= $other["otherImports"] ?? '' ?>
-
+<?php
+  if (!($other["noCSS"] ?? false)) {
+?>
 
 // import the CSS for the module
 import '~enable-a11y/css/<?= $moduleName ?>';
-
-
-<?php 
+<?php
+  }
   if (!$noInit) {
 ?> 
 // How to initialize the <?= $moduleVar ?> library
@@ -165,6 +165,10 @@
     <?php includeShowcodeStaticEnd() ?>
     <?= $other["es6Notes"] ?? '' ?>
   </li>
+
+<?php
+  if (!($other["noCSS"] ?? false)) {
+?>
   <li>
     Alternatively, if you are using LESS you can include the styles in your project's CSS using:
 
@@ -174,6 +178,9 @@
 
     (If you are using it in your CSS, you will have to add the <code>.css</code> suffix)
   </li>
+<?php
+  }
+?>
 </ol>
 
 <h4>Using NPM/Webpack to Load Modules Using CommonJS Syntax</h4>
@@ -186,11 +193,11 @@
     You can import the module using require like this:
 
 <?php includeShowcodeStaticBegin() ?>
-var switch = require('enable-a11y/switch').default; 
+var <?= $moduleVar ?> = require('enable-a11y/<?= $moduleName ?>').default; 
 
 ...
 
-switch.init();
+<?= $moduleVar ?>.init();
 <?php includeShowcodeStaticEnd() ?>
     </li>
     <li>You will have to include the CSS as well in your project's CSS using: