Merge pull request #5 from PublicisSapient/security-fixes

Security fixes

content/body/alert.php

@@ -52,7 +52,7 @@
             "steps": [{
                     "label": "Add role of alert",
                     "highlight": "role",
-                    "notes": ""
+                    "notes": "This and the <code>aria-live</code> attribute in the next step should be in the DOM <em>before</em> you change its content with JavaScript, preferably when the page loads.  <strong>Never insert an ARIA live region with JavaScript with the content you want to announce at the same time</strong> &mdash; it won't work."
                 },
                 {
                     "label": "Add aria-live level",
@@ -62,7 +62,7 @@
                 {
                     "label": "Inject what you want alerted by screen readers into the aria-live region",
                     "highlight": "%JS%alert.sayTimeClickHandler ||| assertiveAlertEl.innerHTML[^;]*;",
-                    "notes": "Note that <code>assertiveAlertEl = document.getElementById('assertive-alert')</code> (from the previous step).  Just using <code>innerHTML</code> on the aria-live region is enough."
+                    "notes": "Note that <code>assertiveAlertEl = document.getElementById('assertive-alert')</code> (from the previous step).  Just using <code>innerHTML</code> on the aria-live region is enough to have screen readers announce the content."
                 }
             ]
         }

content/body/carousel.php

@@ -162,7 +162,8 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
 
 <?= includeNPMInstructions(
     'enable-carousel', 
-    array(), 
+    array(),
+    'enable-carousel',
     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>",

content/body/combobox.php

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

content/body/dialog.php

@@ -133,4 +133,4 @@
 }
 </script>
 
-<?= includeNPMInstructions('enable-dialog', array(), true) ?>
+<?= includeNPMInstructions('enable-dialog', array(), '', true) ?>

content/body/dropdown.php

@@ -333,6 +333,7 @@
 <?= includeNPMInstructions(
     'enable-drawer',
     array(),
+    'enable-drawer',
     false,
     array(),
     null,

content/body/listbox.php

@@ -447,6 +447,7 @@ class="enable-listbox__button">&nbsp;</button>
 <?= includeNPMInstructions(
   'enable-listbox',
   array(),
+  'enable-listbox',
   false,
   array(),
   null,

content/body/multi-level-hamburger-menu.php

@@ -149,7 +149,7 @@
 
 <h3 id="enable-hamburger-menu__heading" tabindex="-1">Coding HTML by Hand</h3>
 
-<p>If you wanted to code this menu's HTML by hand, you can use the following guide.  Just keep in mind that each level is basically a list of buttons and links.  The links will go to new </p>
+<p>If you wanted to code this menu's HTML by hand, you can use the following guide.  Just keep in mind that each level is basically a list of buttons and links.  The links will go to new pages; the buttons will open up a new section.</p>
 
 <?php includeShowcode("flyout__container", "", "", "", true, 0)?>
 <script type="application/json" id="flyout__container-props">
@@ -300,4 +300,4 @@
   include('../templates/enable-hamburger.html');
 ?>
 
-<?= includeNPMInstructions('enable-hamburger') ?>
+<?= includeNPMInstructions('enable-hamburger', array(), 'enable-flyout') ?>

content/body/pagination-table.php

@@ -1816,7 +1816,8 @@
 
 <?= includeNPMInstructions(
   'paginate',
-  array(), 
+  array(),
+  'pagination',
   false, 
   array(),
   '.pagination__table'

content/body/pause-anim-control.php

@@ -476,7 +476,9 @@
 
 
 <?= includeNPMInstructions(
-    'pause-anim-control'
+    'pause-anim-control',
+    array(),
+    'pause-anim-control',
   ) 
 ?>
 

content/body/skip-link.php

@@ -605,4 +605,4 @@ class="enable-mobile-visible-on-focus enable-skip-link">Skip to
 }
 </script>
 
-<?= includeNPMInstructions('enable-visible-on-focus') ?>
+<?= includeNPMInstructions('enable-visible-on-focus', array(), 'enable-mobile-visible-on-focus') ?>

content/body/slider.php

@@ -511,4 +511,4 @@ class="enable-mobile-visible-on-focus ${classNameRoot}__increase ${classNameRoot
   </template>
 </div>
 
-<?= includeNPMInstructions('enable-slider', array('js/modules/interpolate.js')) ?>
+<?= includeNPMInstructions('enable-slider', array('js/modules/interpolate.js'), 'enable-slider') ?>

content/body/sortable-table.php

@@ -16,7 +16,7 @@
             <a href="https://dequeuniversity.com/library/aria/table-sortable">excellent sortable table example from Deque University</a>.
         </p>    
         <div class="enable-example" id="sortable-table-example">
-            <div class="deque-table-sortable-group" id="sortable-table">
+            <div class="deque-table-sortable__group" id="sortable-table">
 
                 <div id="user-info-table__sort-instructions">
                     Click the table heading buttons to sort the table by the data in its column.
@@ -159,6 +159,7 @@ class="deque-table-sortable"
 <?= includeNPMInstructions(
     'sortable-tables',
     array(),
+    'deque-table-sortable',
     false,
     array(),
     '.pagination__table') ?>

content/body/spinner.php

@@ -228,6 +228,7 @@
 <?= includeNPMInstructions(
   'spinbutton',
   array(),
+  '',
   false,
   array(),
   '.spinbutton'

content/body/switch.php

@@ -86,6 +86,7 @@ class="switch" aria-describedby="speakerPower-checked">
 <?= includeNPMInstructions(
   'switch',
   array(),
+  '',
   false,
   array(),
   null,

content/body/table.php

@@ -103,7 +103,7 @@
     {
       "label": "The <strong>tfoot</strong> section",
       "highlight": "\\s*&lt;tfoot&gt;[\\s\\S]*&lt;/tfoot&gt;",
-      "notes": "The <strong>tfoot</strong> contains summary information of the table"
+      "notes": "<strong>Optional.</strong>  The <strong>tfoot</strong> contains summary information of the table"
     },
     {
       "label": "Column headings",
@@ -2246,7 +2246,8 @@ class="sr-only">Distances</span></th>
             "label": "Use CSS sticky to help maintain cell context when the user scrolls through the data",
             "highlight": "%CSS%table-css ~ .sticky-table__container th[scope=\"col\"]",
             "notes": [
-                "This CSS ensures the table column headers stick to the top of the viewport as the user scrolls horizontally through the data in the table.",
+                "This CSS ensures the table column headers stick to the top of the viewport as the user scrolls vertically through the data in the table.",
+                "<strong>Note: that it is important to remember that <a href=\"https://css-tricks.com/dealing-with-overflow-and-position-sticky/\">CSS sticky only works if there is no overflow property on any of the parent elements</a>.</strong>",
                 "If you want more information about how this works, please read the excellent article",
                 "<a href=\"https://css-tricks.com/position-sticky-and-table-headers/\">Position Sticky and Table Headers</a>.   The <code>top</code> property is set to the height of the \"Pause animation\" control that is on the top of the Enable page so that it appears below it (measured in rems, so it works even if you resize the text on the page."
             ]

content/body/tabs.php

@@ -227,6 +227,7 @@
 <?= includeNPMInstructions(
   'tabs',
   array(),
+  '',
   false,
   array(),
   '.enable-tablist'

content/body/text-resize.php

@@ -14,21 +14,22 @@
     <strong>If you are looking how to alter the design slightly when font-resizing is triggered, you may want to checkout our page on <a href="hero-image-text-resize.php">Accessible Text in Hero Images</a>.</strong>  The article demos a lightweight JavaScript library that can treat text-resizing almost like another breakpoint.
 </p>
 
-<h2>Replace Pixels With Ems</h2>
+<h2>Replace Pixels With Rems</h2>
 
 <?php includeStats(array('isForNewBuilds' => true, 'comment' => 'This is easy to use for new and existing work if you are using a CSS pre-compiler like <a href="https://lesscss.org/">Less</a> or <a href="https://sass-lang.com/">Sass</a>.')) ?>
 
 <p>
-  Developers should use relative units like rems or ems for the majority of their text:
+  Developers should use relative units like rems for the majority of their text:
 </p>
 
 <ol>
   <li>Pixels are an absolute unit.</li>
-  <li>Rems are responsive. If the font-size of the parent of an element sized in rems changes, than the
-    font-size of the element changes.
+  <li>Rems are responsive in that they are relative to the font-size of a parent that is sized in pixels. If the pixel font-size of the parent of an element sized in rems changes, than the font-size of the element changes. 
   </li>
 </ol>
 
+
+
 <p>
   In most browsers users who use their browser functionality to resize text will not be able to resize text measured in
   pixels,
@@ -38,8 +39,7 @@ functionality
 </p>
 
 <p>
-  All the pages on the Enable project are designed to resize by using rems, but we use a dead-simple
-  LESS mixin to convert pixels to rems.
+  All the pages on the Enable project are designed to resize by using rems, but we use a dead-simple LESS mixin to convert pixels to rems.
 </p>
 
 <div id="less-px-to-rem">
@@ -91,6 +91,10 @@ functionality
 
 </template>
 
+
+<p>(<a href="https://blog.logrocket.com/using-em-vs-rem-css/">You could also use ems</a> as well to ensure font-resizing/text-zoom happens, but they are harder to convert to pixels programatically).</p>
+
+
 <h2>Use Unitless Line Heights</h2>
 
 <p>

content/body/tooltip.php

@@ -136,6 +136,7 @@
 <?= includeNPMInstructions(
   'tooltip',
   array(),
+  'tooltip',
   false,
   array(),
   null,

content/body/video-player.php

@@ -150,6 +150,7 @@
     <?= includeNPMInstructions(
         'ablePlayerCustomizations',
         array(),
+        '',
         false,
         array(
             "otherImports" => "// AblePlayer uses this module, available via NPM<br/>import Cookies from 'js-cookie';"

css/button.css

@@ -28,6 +28,9 @@
 .button-container [role="button"]:hover {
   background-color: #cccccc;
 }
+.button-container button[aria-disabled="true"] {
+  opacity: 0.6;
+}
 #short-button {
   height: 0px;
   overflow: hidden;

css/sortable-tables.css

@@ -5,63 +5,63 @@
   font-size: 1.25rem;
   border-bottom: double 3px #000;
 }
-.deque-table-sortable-group caption {
+.deque-table-sortable__group caption {
   margin-bottom: 15px;
 }
-.deque-table-sortable-group table {
+.deque-table-sortable__group table {
   border-collapse: collapse;
   border-spacing: 0;
   overflow: visible;
   margin-top: 8px;
   width: 100%;
 }
-.deque-table-sortable-group table thead {
+.deque-table-sortable__group table thead {
   border-bottom: 1px solid #e3e3e3;
 }
-.deque-table-sortable-group table thead th {
+.deque-table-sortable__group table thead th {
   position: relative;
 }
-.deque-table-sortable-group table thead th:last-child {
+.deque-table-sortable__group table thead th:last-child {
   border-right: none;
 }
-.deque-table-sortable-group table thead th .sortableColumnLabel {
+.deque-table-sortable__group table thead th .sortableColumnLabel {
   display: inline-block;
   height: 100%;
   cursor: pointer;
   padding: 0 0 0 1.5625rem;
   text-align: left;
 }
-.deque-table-sortable-group table thead th .sortableColumnLabel:hover {
+.deque-table-sortable__group table thead th .sortableColumnLabel:hover {
   outline: 1px dashed #767676;
 }
-.deque-table-sortable-group table thead th button {
+.deque-table-sortable__group table thead th button {
   color: white;
   background: transparent;
   border: 0;
   padding-left: 0;
   font-size: inherit;
   font-weight: inherit;
 }
-.deque-table-sortable-group table thead th button {
+.deque-table-sortable__group table thead th button {
   margin: -25px 0;
   padding: 25px 0;
 }
-.deque-table-sortable-group table thead th button:hover {
+.deque-table-sortable__group table thead th button:hover {
   margin: 0;
 }
-.deque-table-sortable-group table thead th button:focus {
+.deque-table-sortable__group table thead th button:focus {
   margin: 0;
   z-index: 1;
 }
-.deque-table-sortable-group table thead th button:active {
+.deque-table-sortable__group table thead th button:active {
   color: #000000;
   outline: 1px solid transparent;
   margin: 0;
 }
-.deque-table-sortable-group table thead th[colspan]:not([colspan='1']) {
+.deque-table-sortable__group table thead th[colspan]:not([colspan='1']) {
   text-align: center;
 }
-.deque-table-sortable-group table thead th .sortableColumnLabel:after {
+.deque-table-sortable__group table thead th .sortableColumnLabel:after {
   /* This is the up and down arrow SVG. */
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 41 57' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle /%3E%3Cdesc /%3E%3Cdefs /%3E%3Cg fill='none' fill-rule='evenodd' id='Icons' stroke='none' stroke-width='1'%3E%3Cg fill='%23fff' stroke='%23000' id='XXX-Artboard-1' transform='translate(-1239.000000, -138.000000)'%3E%3Cg id='Double-Arrows' transform='translate(1239.000000, 138.150000)'%3E%3Cpath d='M10.5623119,31.5480425 C9.30468998,32.6283056 8.28518598,32.1695935 8.28518598,30.5136396 L8.28518598,-6.51787882 C8.28518598,-8.16942688 9.29767763,-8.63856827 10.5623119,-7.55228175 L31.0451159,10.041891 C32.3027378,11.1221541 32.3097502,12.8675832 31.0451159,13.9538698 L10.5623119,31.5480425 Z' id='Triangle-1' transform='translate(20.138075, 11.997111) rotate(-90.000000) translate(-20.138075, -11.997111) ' /%3E%3Cpath d='M10.5623119,63.8182709 C9.30468998,64.898534 8.28518598,64.4398218 8.28518598,62.7838679 L8.28518598,25.7523495 C8.28518598,24.1008014 9.29767763,23.6316601 10.5623119,24.7179466 L31.0451159,42.3121194 C32.3027378,43.3923825 32.3097502,45.1378116 31.0451159,46.2240981 L10.5623119,63.8182709 Z' id='Triangle-1' transform='translate(20.138075, 44.267339) scale(1, -1) rotate(-90.000000) translate(-20.138075, -44.267339) ' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   height: 1.0625rem;
@@ -70,30 +70,30 @@
   left: 6px;
   top: calc(50% - 1.0625rem / 2);
 }
-.deque-table-sortable-group table thead th[aria-sort] .sortableColumnLabel:after {
+.deque-table-sortable__group table thead th[aria-sort] .sortableColumnLabel:after {
   /* This is the down arrow SVG. */
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 41 57' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle /%3E%3Cdesc /%3E%3Cdefs /%3E%3Cg fill='none' fill-rule='evenodd' id='Icons' stroke='none' stroke-width='1'%3E%3Cg fill='%23fff' stroke='%23000' id='XXX-Artboard-1' transform='translate(-1239.000000, -138.000000)'%3E%3Cg id='Double-Arrows' transform='translate(1239.000000, 138.150000)'%3E%3Cpath d='M10.5623119,63.8182709 C9.30468998,64.898534 8.28518598,64.4398218 8.28518598,62.7838679 L8.28518598,25.7523495 C8.28518598,24.1008014 9.29767763,23.6316601 10.5623119,24.7179466 L31.0451159,42.3121194 C32.3027378,43.3923825 32.3097502,45.1378116 31.0451159,46.2240981 L10.5623119,63.8182709 Z' id='Triangle-1' transform='translate(20.138075, 44.267339) scale(1, -1) rotate(-90.000000) translate(-20.138075, -44.267339) ' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
-.deque-table-sortable-group table thead th[aria-sort='descending'] .sortableColumnLabel:after {
+.deque-table-sortable__group table thead th[aria-sort='descending'] .sortableColumnLabel:after {
   transform: scaleY(-1) translateY(-0.3125rem);
 }
-.deque-table-sortable-group table thead:before {
+.deque-table-sortable__group table thead:before {
   content: '';
   display: block;
   width: 7px;
 }
-.deque-table-sortable-group table thead td,
-.deque-table-sortable-group table thead th {
+.deque-table-sortable__group table thead td,
+.deque-table-sortable__group table thead th {
   padding: 12px 11px 12px 0;
   text-align: left;
   vertical-align: middle;
 }
-.deque-table-sortable-group table tbody td th {
+.deque-table-sortable__group table tbody td th {
   text-align: left;
   padding: 7px;
   border-right: 1px solid #cccccc;
 }
-.deque-table-sortable-group table tbody td:last-child,
-.deque-table-sortable-group table tbody th:last-child {
+.deque-table-sortable__group table tbody td:last-child,
+.deque-table-sortable__group table tbody th:last-child {
   border-right: none;
 }

js/modules/paginate.js

@@ -75,7 +75,7 @@ const paginationTables = new function() {
 
     for (let i=0; i<rows.length; i++) {
       rows[i].classList.remove(inactiveClass);
-    };
+    }
 
     table.dataset.currentpage = 0;
   }

js/modules/sortable-tables.js

@@ -283,7 +283,7 @@ const sortableTables = new (function () {
 
   this.activateAllSortableTables = (withinEl, options) => {
     var sortableTables = (withinEl || document).querySelectorAll(
-      ".deque-table-sortable-group"
+      ".deque-table-sortable__group"
     );
     for (var i = 0; i < sortableTables.length; i++) {
       this.add(sortableTables[i], options);