Adding NPM info

TODO.txt

@@ -7,6 +7,41 @@ Safari OSX:
 
 Aria-label vs tabindex="-1"
 
+COMPONENTS ADDED AFTER PAGE LOAD
+CAROUSEL -- NEW ITEMS AFTER PAGE LOAD.
+
+EDITING VTT FILES FROM TEAMS:
+
+1) Open Visual Studio Code with the vtt file and do a reg ex searchon this:
+
+([^0-9])\n([^\r\n0-9])
+
+And replace with this;
+
+$1 $2
+
+
+2) Do a sync on the subtitles (there will be a delta of about X seconds -- i think it's about 10 ... not sure).
+
+3) Do a repetitive Tools -> Break/split small links
+
+4) Do a spell check
+
+5) Go over copy once over in Visual Studio code.
+
+6) Go over copy again in Subtitle Edit.
+
+
+
+
+
+
+
+
+
+
+
+
 NEED TO LOOK AT MOBILE TOOLTIPS.
 INTERPOLATE.JS and other modules.
 RECHECK ES6 MODULE INFO.

bin/promote-node-modules-to-server.sh

@@ -2,7 +2,7 @@ const fs = require('fs');
 const fsExtra = require('fs-extra')
 
 console.log('clearing lib directory');
-fsExtra.emptyDirSync('libs');
+fsExtra.emptyDirSync('enable-node-libs');
 
 
 // we must copy the needed node modules into the lib directory
@@ -21,7 +21,7 @@ const nodeFiles = [
 nodeFiles.forEach((fullPath) => {
   const explodedPath = fullPath.split('/');
   let fileName = explodedPath.pop();
-  let dir = explodedPath.join('/').replace(/^node_modules\//, 'libs/');
+  let dir = explodedPath.join('/').replace(/^node_modules\//, 'enable-node-libs/');
   console.log('dir', dir);
   
   if (!fs.existsSync(dir)) {

content/body/carousel.php

@@ -160,6 +160,13 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
 }
 </script>
 
-<?= includeNPMInstructions('enable-carousel', array(), false, array(
-  "es6Notes" => "<p><em><strong>Note:</strong> If you want to have the skip links like in the example above, please ensure you also include the <a href=\"skip-link.php#npm-instructions\">NPM module for skip links as well</a>.</em></p>"
-)) ?>
+<?= includeNPMInstructions(
+    'enable-carousel', 
+    array(), 
+    false, 
+    array(
+      "es6Notes" => "<p><em><strong>Note:</strong> If you want to have the skip links like in the example above, please ensure you also include the <a href=\"skip-link.php#npm-instructions\">NPM module for skip links as well</a>.</em></p>",
+      "otherSampleCode" => "// Note that this component doesn't currently work when<br />// new components are added after page load."
+    )
+  ) 
+?>

content/body/chart.php

@@ -39,7 +39,7 @@
           <figure>
 
             <figcaption id="line-chart__fig-caption" class="caption">
-              Family Birthdays (Table Coded Using Figcaption)
+              Canadian Ice Cream Mix Production, in kilolitres
             </figcaption>
             <div id="raw-data__content">
               <!-- This will have the table data inserted here via JavaScript -->

content/body/combobox.php

@@ -790,4 +790,4 @@
 </script>
 
 
-<?= includeNPMInstructions('combobox') ?>
+<?= includeNPMInstructions('combobox', array(), false, array(), '.enable-combobox') ?>

content/body/dropdown.php

@@ -31,8 +31,8 @@
 
 <ul>
   <li>
-    Safari with Voiceover doesn't update the state when the
-    drawer is opened.
+    Safari with Voiceover <strong>occasionally</strong> doesn't announce the state when the
+    drawer is opened (most of the time it does, but I have noticed it enough to make mention of it here).
   </li>
   <li>
     Chrome with Voiceover report "Disclosure triangle" as the role, which is a quite odd and misleading.
@@ -166,6 +166,7 @@
 <h2>ARIA version</h2>
 
 <?php includeStats(array('isForNewBuilds' => true, 'comment' => 'This is best solution for both new and existing work.')) ?>
+<?php includeStats(array('isNPM' => true)) ?>
 
 <p>
   Even though this is not native, it is pretty easy to set up. There is really one HTML attribute that you have to
@@ -321,3 +322,13 @@
 </script>
 
 
+
+<?= includeNPMInstructions(
+    'enable-drawer',
+    array(),
+    false,
+    array(),
+    null,
+    true
+  ) 
+?>

content/body/focus-styling.php

@@ -131,8 +131,97 @@
 <p>I encourage everyone reading this to implement this on all the websites they code. From a UX perspective, it just
   makes it easier for everyone to use the websites you code.</p>
 
-<!--
+<h2>Issues with CSS Transitions and CSS outline in Safari</h2>
+
+<p>
+  On a few projects, I have noticed that Safari focus states don't appear correctly when the element that is focused has the following CSS applied to it:
+</p>
+
+<figure class="wide">
+  <?php includeShowcode("transition-all-code", "", "", "", false)?>
+
+  <figcaption>Figure 4. CSS <strong>transition: all</strong> code that should be avoided.</figcaption>
+</figure>
+
+<script type="application/json" id="transition-all-code-props">
+{
+  "replaceHtmlRules": {},
+  "steps": [{
+    "label": "Bad transition all CSS code that should be avoided.",
+    "highlight": "%INLINE%transition-all-code",
+    "notes": ""
+  }]
+}
+</script>
+
+<template id="transition-all-code" data-type="css">
+  a {
+    transition: all 0.3s ease-in-out;
+  }
+</template>
+
+<p>
+  The above CSS can mess up Safari focus states: they may appear cut off or may not appear at all in Safari, while they may appear fine in other web browsers.  <strong>The correct way to fix this is to <em>never</em> use <code> transition: all</code> in your CSS.</strong> Using <code>all</code>.  There are many reasons why you should never use not use the <code>all</code> keyword for transitions (in this case, because of unwanted side-effects, but also for performance reasons).  <a href="https://www.pno.dev/"></a> has written a great write-up on <a href="https://www.pno.dev/articles/dont-use-the-all-keyword-in-css-transitions/">why you shouldn't use the 'all' keyword in CSS transitions</a>, and I suggest all developers read this.
+</p>
+
+<p>
+  If removing the <code>all</code> transition code will cause problems in your project, you can use the following hack to fix the code in Safari:
+</p>
+
+<figure class="wide">
+  <?php includeShowcode("fix-transition-all-code", "", "", "", false)?>
+
+  <figcaption>Figure 5. Fix for Safari to work around <strong>transition: all</strong> code issue.</figcaption>
+</figure>
+
+<script type="application/json" id="fix-transition-all-code-props">
+{
+  "replaceHtmlRules": {},
+  "steps": [{
+    "label": "Fix for Safari.",
+    "highlight": "%INLINE%fix-transition-all-code",
+    "notes": ""
+  }]
+}
+</script>
+
+<template id="fix-transition-all-code" data-type="css">
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+
+  /* Safari only*/
+  *:focus { transition: none !important; }
+
+}
+</template>
+
+
+<p>
+  Note that <strong>it is much better to remove the <code>all</code> keyword and just transtition what you need instead.</strong>  This solution should only be a band-aid solution until you can fix the issue properly.
+</p>
+
+
 <h2>Don't Forget Windows High Contrast Mode Users.</h2>
 
-Sometimes, you will want to style focus states without the CSS <code>outline</code> property.  If you do this, consider also using outline with the <code>transparent</code> colour:
--->
+Sometimes, you will want to style focus states without the CSS <code>outline</code> property.  If you do this, but instead of using <code>outline: none</code> to remove the default focus ring, developers should use outline with the <code>transparent</code> colour:
+
+
+<figure class="wide">
+  <?php includeShowcode("transparent-outline-code", "", "", "", false)?>
+
+  <figcaption>Figure 6. Adding a transparent outline along with your custom focus state that doesn't have an outline</figcaption>
+</figure>
+
+<script type="application/json" id="transparent-outline-code-props">
+{
+  "replaceHtmlRules": {},
+  "steps": [{
+    "label": "Transparent outline fix",
+    "highlight": "%INLINE%transparent-outline-code",
+    "notes": ""
+  }]
+}
+</script>
+
+<template id="transparent-outline-code" data-type="css">
+button.special-style:focus { outline: transparent 2px solid; border-bottom: 2px solid #00f; }
+</template>

content/body/listbox.php

@@ -440,4 +440,11 @@ class="enable-listbox__button">
 }
 </script>
 
-<?= includeNPMInstructions('enable-listbox') ?>
+<?= includeNPMInstructions(
+  'enable-listbox',
+  array(),
+  false,
+  array(),
+  null,
+  true
+) ?>

content/body/npm.php

@@ -0,0 +1,78 @@
+<p>
+  The following pages have modules that can be imported in your own projects via NPM:
+</p>
+
+<ul id="npm-list">
+  <!-- This will be filled in via JS -->
+</ul>
+
+<h2>Webpack Setup Instructions</h2>
+
+<p>Follow these steps to import these into your project:</p>
+
+<ol>
+  <li>
+    <p>You will notice that the examples ask you to include the npm modules like this:</p>
+
+  <?php includeShowcodeStaticBegin() ?>
+// import the js module
+import enableCarousel from '~enable-a11y/js/modules/enable-carousel';
+
+// import the CSS
+import '~enable-a11y/css/enable-carousel';
+
+...
+
+// How to initialize the enableCarousel library
+enableCarousel.init();
+
+...
+
+    <?php includeShowcodeStaticEnd() ?>
+
+    <p>The <code>~</code> is resolved by putting the following in your <code>webpack.config.js</code>:</p>
+
+    <?php includeShowcodeStaticBegin() ?>
+module.exports = {
+
+  ...
+
+  resolve: {
+    extensions: ['.js', '.jsx', '.scss', '.css', '*.html'],
+    modules: [
+      path.resolve('./src/js'),
+      path.resolve('./node_modules')
+    ],
+    alias: {
+      '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y'),
+      '~glider-js': path.resolve(__dirname, 'node_modules/glider-js'),
+      '../enable-node-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module'),
+      '../../enable-node-libs/glider-js/glider.js': path.resolve(__dirname, 'node_modules/glider-js/glider'),
+      '../../enable-node-libs/jquery/dist/jquery.min.js': path.resolve(__dirname, 'node_modules/jquery/src/jquery'),
+      '../enable-node-libs/ableplayer/thirdparty/js.cookie.js': path.resolve(__dirname, 'node_modules/js-cookie/dist/js.cookie')
+    },
+
+    ...
+  }
+}
+      <?php includeShowcodeStaticEnd() ?>
+
+      <p>Note the <code>../enable-node-libs/</code> and <code>../../enable-node-libs/</code> path aliases.  This is due to the production Enable having fixed versions of some third party JavaScript libraries. In your code, these libraries will point to the production NPM versions inside your code (i.e. <code>glider-js</code>, <code>accessibility-js-routines</code>, <code>js-cookie</code>and <code>jquery</code> (jQuery is needed for AblePlayer only).</p>
+
+
+  </li>
+</ol>
+
+
+
+
+
+
+
+<template id="npm-list__list-item">
+  <li><a href="${url}#npm-instructions">${title}</a></li>
+</template>
+
+<template id="npm-list__list">
+  <ul>${content}</ul>
+</template>

content/body/pagination-table.php

@@ -1814,5 +1814,11 @@
 }
 </script>
 
-<?= includeNPMInstructions('paginate') ?>
+<?= includeNPMInstructions(
+  'paginate',
+  array(), 
+  false, 
+  array(),
+  '.pagination__table'
+) ?>
 

content/body/pause-anim-control.php

@@ -20,6 +20,9 @@
 </div>
 <div class="with-full-bleed-hero__content">
   <h1><?= $title ?></h1>
+
+  <?php includeStats(array('isForNewBuilds' => true, 'comment' => 'This can be used for new builds or existing work with animations.  You should always test the animations you are using to see if it works with this component.  If not, please look at the detailed notes below on how to have your animations support this component.')) ?>
+  <?php includeStats(array('isNPM' => true)) ?>
   <p>
     Pause all the CSS, Canvas, SVG SMIL and GIF
     animations on this page with the checkbox at the top of this page.
@@ -367,7 +370,7 @@
 
   <div id="html5-video-example">
     <div role="region">
-      <video controls="" preload="metadata" data-root-path="./js/libs/ableplayer/" autoplay muted loop>
+      <video controls="" preload="metadata"  autoplay muted loop>
         <source src="videos/test-pattern.mp4" type="video/mp4">
         Video not supported.
       </video>
@@ -406,7 +409,7 @@
   <div id="ableplayer-example">
     <div class="enable-video-player">
       <video data-able-player id="video1" data-youtube-id="NINogq4BS68" preload="auto" data-skin="2020"
-        data-root-path="./js/libs/ableplayer/">
+        data-root-path="./js/enable-libs/ableplayer/">
         <track kind="captions" src="vtt/dialog-document__html5.vtt" srclang="en" label="English">
         <track kind="descriptions" src="vtt/dialog-document__html5--desc.vtt" srclang="en"
           label="English Audio Descriptions">
@@ -454,4 +457,12 @@
   }
   </script>
 
-</div>
+
+<?= includeNPMInstructions(
+    'pause-anim-control'
+  ) 
+?>
+
+</div>
+
+

content/body/sortable-table.php

@@ -156,4 +156,9 @@ class="deque-table-sortable"
         }
         </script>
 
-        <?= includeNPMInstructions('sortable-tables') ?>
+<?= includeNPMInstructions(
+    'sortable-tables',
+    array(),
+    false,
+    array(),
+    '.pagination__table') ?>