fleetio_spark 0.2.28 → 0.2.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ae67716c57e2a7d14b83575192dbb948f5aee51a653a3ec07a79fa54ec1bd54
-  data.tar.gz: b995d27caef6905dc0b8030d16097438ac1883118097f222d57f7a033d715c85
+  metadata.gz: 3640eeaf1e8c576f9ba70590de9dd65808b37b9222915ef949d3681cfc2df49b
+  data.tar.gz: b3845797d1b2a9dea6bebc9392a96e820cdb9d97473e49f428fa00c689f866ca
 SHA512:
-  metadata.gz: b593cd1e85c41b3ee0f4fa67154036c93419cc5e2c4d59fcdbbef22da2220c68738e665c94dd1b261b713b0186e6cd792d5f2970b5c57f3376464c356488cc2d
-  data.tar.gz: 655489cb5b0716f7fb5debc574cb6a0efb816972dbc7e5a3b0b76621d08611c2284a9289fb505594b6200194ecb5d5b7657f1ce02ef3c5520ddc26130e6a1b6a
+  metadata.gz: 0dd3669666d16c9c9fd90c60c7ccd486ac6793645107d29d83ca8594aee1e8d687951fcf3b38348ea78ced5fd33b30d54fb8398c79cd49b68bc044f36f28ab6f
+  data.tar.gz: 1047c7d294fbe1b0e9c234cdef2bf6f6f3ef86111102eac9ef463de2cd1d00250578a9600374e5eb2d5beab22cd12316703c70a488b00de00df47b66deeecebe

data/app/assets/javascripts/spark/_stack.js

@@ -246,6 +246,7 @@ function navClick(event) {
 }
 
 function navKey(event) {
+  // Find the active panel in the stack where the navigation event should be triggered.
   var panel = event.currentTarget.closest('[data-stack="root"]').querySelector('[data-stack-index][aria-hidden="false"]')
   if (!panel) { return }
 

data/app/assets/javascripts/spark/components/nav/_tree.js

@@ -1,6 +1,6 @@
 // Purpose: Toggles expansion of tree nav and stores cookies to retain state
 //
-// Usage:
+// For Cookies to be set:
 // - Trees must have a [data-tree='tree-key']
 // - Nodes are named by [data-node='node-name']
 //
@@ -12,7 +12,7 @@ var toolbox     = require('@spark-engine/toolbox'),
     cookie      = require('../../_cookie'),
     Event       = require('@spark-engine/event')
 
-function setCookie (node) {
+function setCookie(node) {
   if (node.dataset.node) {
     var tree = node.closest('[data-tree]')
     if (tree) {
@@ -23,30 +23,31 @@ function setCookie (node) {
   }
 }
 
-function click (event) {
+function click(event) {
   toggleNode(event.currentTarget)
 }
 
+// Expand or collapse the current tree node
 function toggleNode(target) {
-  parent   = target.parentElement,
-  expanded = parent.getAttribute('aria-expanded')
+  var parent   = target.closest('[aria-expanded]'),
+      expanded = parent.getAttribute('aria-expanded') == 'true'
 
   // Add a classname to indicate that it was manually triggered
   // This allows for animating interactions, but not other attribute changes
   parent.classList.add('triggered')
-  toggleExpansion(parent, expanded != 'true')
-  select(target)
+  toggleExpansion(parent, !expanded)
 
   setCookie(parent)
 }
 
+// Set aria-expanded and toggle tabindex values based on expansion
 function toggleExpansion(el, expanded) {
   el.setAttribute('aria-expanded', expanded)
   setupItemTabIndex(el)
 }
 
 // Sets tree nav state based off of cookies
-function restoreNav () {
+function restoreNav() {
   toolbox.each(document.querySelectorAll('[data-tree]'), function(tree) {
     var key = tree.dataset.tree
     if (key) {
@@ -65,90 +66,115 @@ function restoreNav () {
   })
 }
 
+// Enables keyboard navigation of a nav tree
+//
+// `space`       - toggles tree node triggers
+// `right arrow` - opens nodes and navigates inward
+// `left arrow`  - closes nodes and navigates outward
+// `up arrow`    - moves to previous visible element
+// `down arrow`  - moves to next visible element
+//
 function navigateTree(event) {
   var item = document.activeElement
   if (!item) return
 
+  // Find the parent tree item
   var tree = item.closest('[role="tree"]')
   if (!tree) return
 
-  var trigger = item.matches('.tree-trigger')
-
-  if (trigger) {
+  // Is the item a trigger which opens nodes?
+  if (item.matches('.tree-trigger')) {
     var expanded = item.parentElement.getAttribute('aria-expanded') != 'false'
 
+    // Space toggles node which trigger points to
     if (Event.key.isPressed('space')) {
-      toggleNode(item)
       event.preventDefault()
+      return toggleNode(item)
     }
 
+    // Expand or move to the first item in the node
     if (Event.key.isPressed('right')) {
       event.preventDefault()
-      if (expanded) return select(getNextItem(tree, item))
+      if (expanded) return focus(getNextItem(tree, item))
       else return toggleNode(item)
     }
 
+    // Collapse or move up the parent node
     if (Event.key.isPressed('left')) {
       event.preventDefault()
       if (expanded) return toggleNode(item)
-      else return select(getUpwardItem(tree, item))
+      else return focus(getUpwardItem(tree, item))
     }
   }
 
+  // Move to next visible item in the tree
   if (Event.key.isPressed('down')) {
     event.preventDefault()
-    select(getNextItem(tree, item))
+    focus(getNextItem(tree, item))
   }
 
-  if (Event.key.isPressed('left')) {
+  // Move to previous visible item in the tree
+  else if (Event.key.isPressed('up')) {
     event.preventDefault()
-    select(getUpwardItem(tree, item))
+    focus(getPreviousItem(tree, item))
   }
 
-  else if (Event.key.isPressed('up')) {
+  // Move outward in tree
+  else if (Event.key.isPressed('left')) {
     event.preventDefault()
-    select(getPreviousItem(tree, item))
+    focus(getUpwardItem(tree, item))
   }
 }
 
-function select(el) {
-  if (!el) return
-  el.focus()
+// Focus on element (if able)
+function focus(el) {
+  if (el) el.focus()
 }
 
+// Find next focusable item
 function getNextItem(tree, item) {
-  items = getSelectableItems(tree)
+  items = getFocusableItems(tree)
   return items[ items.indexOf(item) + 1]
 }
 
+// Find previous focusable item
 function getPreviousItem(tree, item) {
-  items = getSelectableItems(tree)
+  items = getFocusableItems(tree)
   return items[ items.indexOf(item) - 1]
 }
 
+// Walk up the tree to the tree trigger
 function getUpwardItem(tree, item) {
   var upward = item.parentElement.closest('[aria-expanded]')
   if (upward) return upward.querySelector('.tree-trigger')
 }
 
-function getSelectableItems(tree) {
-  return Array.prototype.filter.call(tree.querySelectorAll('[tabindex]'), function(el) {
+// Find all focusable items in a nav tree
+function getFocusableItems(tree) {
+  // Filter out items in collapsed nodes
+  return Array.prototype.filter.call(tree.querySelectorAll('a, [tabindex]'), function(el) {
     return !el.closest('[aria-expanded="false"] [role="group"]')
   })
 }
 
-// Remove hidden items from the tabindex
+// Ensure hidden items are not focasable
 function setupItemTabIndex(tree) {
-  toolbox.each(tree.querySelectorAll('a'), function(el) {
+  toolbox.each(tree.querySelectorAll('a, [tabindex]'), function(el) {
     if (el.closest('[aria-expanded="false"] [role="group"]')) {
       el.setAttribute('tabindex', -1)
     } else {
-      el.setAttribute('tabindex', 0)
+      // Don't set a tabindex for anchor elements
+      // They already participate in tabindex and tabindex=0
+      // will change their click behavior
+      if (el.matches('a')) {
+        el.removeAttribute('tabindex')
+      } else {
+        el.setAttribute('tabindex', 0)
+      }
     }
   })
 }
 
-
 function setup() {
   Event.ready(function() {
 

data/app/assets/stylesheets/spark/components/nav/tree/_group.scss

@@ -1,6 +1,6 @@
 [role=tree] {
-  [role=group] { 
-    overflow: hidden; 
+  [aria-expanded=false][role=group] {
+    overflow: hidden;
   }
 
   [role=treeitem][aria-expanded=false] > [role=group] {

data/app/helpers/spark/menu_helper.rb

@@ -40,7 +40,6 @@ module Spark
         options = add_class( options, config[:base_class] + "-item" )
 
         options['role'] ||= 'menuitem'
-        options['tabindex'] ||= 0
 
         link_to( url, options, &content )
       end

data/app/helpers/spark/nav_menu_helper.rb

@@ -65,7 +65,7 @@ module Spark
         options = add_class( options, classes )
 
         content_tag( config[:item_tag], options ) do
-          concat link_to( "#", class: config[:base_class] + '-item', tabindex: 0 ){
+          concat link_to("#", class: config[:base_class] + '-item'){
             concat name.call
             concat use_svg( 'chevron-down', class: 'expand-icon'  )
           }

data/lib/fleetio_spark/version.rb

@@ -1,3 +1,3 @@
 module FleetioSpark
-  VERSION = "0.2.28"
+  VERSION = "0.2.29"
 end