1.0.0-9

CityOfNewYork · Jul 1, 2020 · 0cbaaf6 · 0cbaaf6
1 parent b38c00e
commit 0cbaaf6
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 25 deletions.
diff --git a/dist/demo/demo.html b/dist/demo/demo.html
@@ -11,7 +11,7 @@
 
 <body>
   <main class="container mx-auto">
-    <h1>1.0.0-8</h1>
+    <h1>1.0.0-9</h1>
     <h2>Layouts</h2>
     <div>Layout Demo</div>
   </main>

diff --git a/dist/index.html b/dist/index.html
@@ -11,13 +11,13 @@
 
 <body>
   <main class="container mx-auto">
-    <h1>1.0.0-8</h1>
+    <h1>1.0.0-9</h1>
     <h2>Home</h2>
     <h1 id="nyco-patterns-framework">NYCO Patterns Framework</h1>
     <p>Front-end stack, CLI, and cross-utility library for design systems. Created by NYC Opportunity for <a href="https://nycopatterns.cityofnewyork.us">NYCO Patterns</a>, <a href="https://accesspatterns.cityofnewyork.us">ACCESS NYC Patterns</a>, and Growing Up/Generation NYC Patterns.</p>
     <ul>
       <li>📦 Creates and organizes pattern source code using a <a href="#design-system-methodology">design system methodology</a>.</li>
-      <li>⚪ Manages <a href="#design-tokens">Design Tokens</a> through JavaScript configuration and shares them with Sass files.</li>
+      <li>⚫ Manages <a href="#design-tokens">Design Tokens</a> through JavaScript configuration and shares them with Sass files.</li>
       <li>💅 Compiles <a href="https://sass-lang.com/">Sass</a> using <a href="https://github.com/sass/node-sass">node-sass</a> and <a href="https://postcss.org/">PostCSS</a>.</li>
       <li>🗞 Bundles JavaScript ES using <a href="https://rollupjs.org/guide/en/">rollup.js</a>.</li>
       <li>🗜️ SVG icon optimizer and sprite generator using <a href="https://github.com/svg/svgo">svgo</a> and <a href="https://github.com/svgstore/svgstore-cli">svgstore-cli</a>.</li>

diff --git a/dist/toggle.html b/dist/toggle.html
@@ -11,7 +11,7 @@
 
 <body>
   <main class="container mx-auto">
-    <h1>1.0.0-8</h1>
+    <h1>1.0.0-9</h1>
     <h2>Toggle</h2>
     <h1 id="toggle">Toggle</h1>
     <p>The Toggle utility uses JavaScript to expand and collapse elements based on user interaction. This will toggle dynamic aria attributes as well as dynamic classes on both the toggling element and target of the toggle. The class “hidden” will be toggled on the target element and the class “active” will be toggled on the toggling element and target element. The target is selected using the static <code>aria-controls</code> attribute by its <code>id</code>.</p>
@@ -297,7 +297,6 @@ <h2 id="demo">Demo</h2>
       <div aria-hidden="false" class="bg-color-blue-light p-4 text-center active" id="toggle-target">Targeted toggle element</div>
     </p> &lt;button aria-controls=&quot;toggle-target&quot; aria-expanded=&quot;true&quot; class=&quot;btn btn-primary mb-3&quot; data-js=&quot;toggle&quot; type=&quot;button&quot;&gt;Toggle&lt;/button&gt; &lt;div aria-hidden=&quot;false&quot; class=&quot;bg-color-blue-light p-4 text-center active&quot; id=&quot;toggle-target&quot;&gt;Targeted toggle element&lt;/div&gt;
   </main>
-  <script src="/reload/reload.js"></script>
 </body>
 
 </html>
diff --git a/dist/utilities/toggle/toggle.iffe.js b/dist/utilities/toggle/toggle.iffe.js
@@ -29,7 +29,8 @@ var Toggle = (function () {
       activeClass: s.activeClass ? s.activeClass : Toggle.activeClass,
       before: s.before ? s.before : false,
       after: s.after ? s.after : false
-    };
+    }; // Store the element for potential use in callbacks
+
     this.element = s.element ? s.element : false;
 
     if (this.element) {
@@ -41,8 +42,10 @@ var Toggle = (function () {
         document.querySelector('body').addEventListener('click', function (event) {
           if (!event.target.matches(this$1.settings.selector)) {
             return;
-          }
+          } // Store the event for potential use in callbacks
+
 
+          this$1.event = event;
           this$1.toggle(event);
         });
       } // Record that a toggle using this selector has been instantiated. This
@@ -54,29 +57,35 @@ var Toggle = (function () {
   };
   /**
    * Logs constants to the debugger
-   * @param{object} eventThe main click event
-   * @return {object}      The class
+   *
+   * @param{Object}eventThe main click event
+   *
+   * @return {Object}       The class
    */
 
 
   Toggle.prototype.toggle = function toggle(event) {
     var this$1 = this;
     var el = event.target;
     var target = false;
+    var focusable = [];
     event.preventDefault();
     /** Anchor Links */
 
     target = el.hasAttribute('href') ? document.querySelector(el.getAttribute('href')) : target;
     /** Toggle Controls */
 
     target = el.hasAttribute('aria-controls') ? document.querySelector("#" + el.getAttribute('aria-controls')) : target;
+    /** Focusable Children */
+
+    focusable = target ? target.querySelectorAll(Toggle.elFocusable.join(', ')) : focusable;
     /** Main Functionality */
 
     if (!target) {
       return this;
     }
 
-    this.elementToggle(el, target);
+    this.elementToggle(el, target, focusable);
     /** Undo */
 
     if (el.dataset[this.settings.namespace + "Undo"]) {
@@ -92,21 +101,30 @@ var Toggle = (function () {
   };
   /**
    * The main toggling method
-   * @param{object} el   The current element to toggle active
-   * @param{object} target The target element to toggle active/hidden
-   * @return {object}      The class
+   *
+   * @param{Object}  el       The current element to toggle active
+   * @param{Object}  target   The target element to toggle active/hidden
+   * @param{NodeList}focusableAny focusable children in the target
+   *
+   * @return {Object}        The class
    */
 
 
-  Toggle.prototype.elementToggle = function elementToggle(el, target) {
+  Toggle.prototype.elementToggle = function elementToggle(el, target, focusable) {
     var this$1 = this;
+    if (focusable === void 0) focusable = [];
     var i = 0;
     var attr = '';
     var value = ''; // Get other toggles that might control the same element
 
-    var others = document.querySelectorAll("[aria-controls=\"" + el.getAttribute('aria-controls') + "\"]");
+    var others = document.querySelectorAll("[aria-controls=\"" + el.getAttribute('aria-controls') + "\"]"); // Store elements for potential use in callbacks
+
+    this.element = el;
+    this.target = target;
+    this.others = others;
+    this.focusable = focusable;
     /**
-     * Toggling before hook.
+     * Toggling before hook
      */
 
     if (this.settings.before) {
@@ -147,10 +165,31 @@ var Toggle = (function () {
       }
     }
     /**
-     * Jump Links
+     * Hide the Toggle Target's focusable children from focus.
+     * If an element has the data-attribute 'data-toggle-tabindex', use that
+     * as the default tab index of the element.
      */
 
 
+    focusable.forEach(function (el) {
+      var tabindex = el.getAttribute('tabindex');
+
+      if (tabindex === '-1') {
+        var dataDefault = el.getAttribute("data-" + Toggle.namespace + "-tabindex");
+
+        if (dataDefault) {
+          el.setAttribute('tabindex', dataDefault);
+        } else {
+          el.removeAttribute('tabindex');
+        }
+      } else {
+        el.setAttribute('tabindex', '-1');
+      }
+    });
+    /**
+     * Jump to Target Element (if Toggle Element is an anchor link).
+     */
+
     if (el.hasAttribute('href')) {
       // Reset the history state, this will clear out
       // the hash when the jump item is toggled closed.
@@ -203,21 +242,24 @@ var Toggle = (function () {
 
 
   Toggle.selector = '[data-js*="toggle"]';
-  /** @type {String} The namespace for our data attribute settings */
+  /** @type  {String}  The namespace for our data attribute settings */
 
   Toggle.namespace = 'toggle';
-  /** @type {String} The hide class */
+  /** @type  {String}  The hide class */
 
   Toggle.inactiveClass = 'hidden';
-  /** @type {String} The active class */
+  /** @type  {String}  The active class */
 
   Toggle.activeClass = 'active';
-  /** @type {Array} Aria roles to toggle true/false on the toggling element */
+  /** @type  {Array}  Aria roles to toggle true/false on the toggling element */
 
   Toggle.elAriaRoles = ['aria-pressed', 'aria-expanded'];
-  /** @type {Array} Aria roles to toggle true/false on the target element */
+  /** @type  {Array}  Aria roles to toggle true/false on the target element */
 
   Toggle.targetAriaRoles = ['aria-hidden'];
+  /** @type  {Array}  Focusable elements to hide within the hidden target element */
+
+  Toggle.elFocusable = ['a', 'button', 'input', 'select', 'textarea', 'object', 'embed', 'form', 'fieldset', 'legend', 'label', 'area', 'audio', 'video', 'iframe', 'svg', 'details', 'table', '[tabindex]', '[contenteditable]', '[usemap]'];
 
   return Toggle;
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nycopportunity/patterns-framework",
   "nice": "NYCO Patterns Framework",
-  "version": "1.0.0-8",
+  "version": "1.0.0-9",
   "description": "Front-end utilities from the Mayor's Office for Economic Opportunity",
   "author": "NYC Opportunity<[email protected]>",
   "license": "GPL-3.0+",

diff --git a/src/config/_tokens.scss b/src/config/_tokens.scss
@@ -6,5 +6,5 @@ $tokens:(
     speed: 0.75s,
     timing-function: cubic-bezier(0.23, 1, 0.32, 1)
   ),
-  version: "1.0.0-8"
+  version: "1.0.0-9"
 );