From 16f03db52dcb50455e60ba3f3c60178fd94ba9a7 Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Wed, 30 Nov 2016 09:43:04 -0800
Subject: [PATCH] Revert #9283 due to breaking changes

---
 docs/pages/accordion-menu.md                | 84 +++++++++------------
 docs/partials/off-canvi.html                | 16 ++++
 js/foundation.accordionMenu.js              | 67 ++++++----------
 js/foundation.util.nest.js                  | 25 ++----
 scss/components/_accordion-menu.scss        | 22 +-----
 scss/components/_menu.scss                  |  3 +-
 scss/grid/_flex-grid.scss                   |  2 +-
 test/javascript/components/accordionMenu.js | 42 ++++++-----
 test/visual/accordion-menu/keyboard.html    | 39 ++++------
 9 files changed, 120 insertions(+), 180 deletions(-)

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index aa8a4f9c6..f271fe06f 100644
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -9,7 +9,7 @@ description: Change a basic vertical Menu into a expandable accordion menu with
 
 Accordion menus follow the basic [Menu](menu.html) syntax of `<ul>`, `<li>`, and `<a>`. To convert a basic menu into an accordion, add the attribute `data-accordion-menu`. You probably also want it to be vertical, so add the class `.vertical` as well.
 
-Use `<span>` for elements that should open a nested menu.  Use `<a>` for links outside of the behaviors of the menu functionality.
+Any `<a>` will behave like a standard link. However, any `<a>` paired with a nested `<ul>` menu will then slide that sub-menu up and down when clicked on.
 
 <div class="primary callout">
   <p>You can use the built-in <code>.nested</code> class to add an indent to a nested menu.</p>
@@ -20,56 +20,40 @@ Use `<span>` for elements that should open a nested menu.  Use `<a>` for links o
 </div>
 
 ```html
-<ul class="vertical tree" data-accordion-menu>
-    <li><span>Item 1</span>
-      <ul class="tree vertical nested">
-        <li><span>Item 1A</span>
-          <ul class="tree vertical nested">
-            <li><span>Item 1Ai</span></li>
-            <li><a href="http://www.google.com">External link</a></li>
-            <li><span>Item 1Aiii</span></li>
-          </ul>
-        </li>
-        <li><span>Item 1B</span></li>
-        <li><span>Item 1C</span></li>
-      </ul>
-      </li>
-      <li><span>Item 2</span>
-        <ul class="tree vertical nested">
-          <li><span>Item 2A</a></li>
-          <li><span>Item 2B</a></li>
-        </ul>
-      </li>
-    <li><a href="http://www.google.com">External link</a></li>
-  </ul>
+<ul class="vertical menu" data-accordion-menu>
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="menu vertical nested">
+      <li><a href="#">Item 1A</a></li>
+      <li><a href="#">Item 1B</a></li>
+    </ul>
+  </li>
+  <li><a href="#">Item 2</a></li>
+</ul>
 ```
 
-<ul class="vertical tree" data-accordion-menu>
-    <li><span>Item 1</span>
-      <ul class="tree vertical nested">
-        <li><span>Item 1A</span>
-          <ul class="tree vertical nested">
-            <li><span>Item 1Ai</span></li>
-            <li><a href="http://www.google.com">External link</a></li>
-            <li><span>Item 1Aiii</span></li>
-          </ul>
-        </li>
-        <li><span>Item 1B</span></li>
-        <li><span>Item 1C</span></li>
-      </ul>
-      </li>
-      <li><span>Item 2</span>
-        <ul class="tree vertical nested">
-          <li><span>Item 2A</a></li>
-          <li><span>Item 2B</a></li>
+<ul class="vertical menu" data-accordion-menu>
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="menu vertical nested">
+      <li>
+        <a href="#">Item 1A</a>
+        <ul class="menu vertical nested">
+          <li><a href="#">Item 1Ai</a></li>
+          <li><a href="#">Item 1Aii</a></li>
+          <li><a href="#">Item 1Aiii</a></li>
         </ul>
       </li>
-    <li><a href="http://www.google.com">External link</a></li>
-  </ul>
-
-
----
-
-## Accessibility
-
-Accordion Menus by default are accessible through the use of various ARIA attributes. It is important not to use `<a>` unless you intend to have the menu item link off page or anchor accordingly.
+      <li><a href="#">Item 1B</a></li>
+      <li><a href="#">Item 1C</a></li>
+    </ul>
+  </li>
+  <li>
+    <a href="#">Item 2</a>
+    <ul class="menu vertical nested">
+      <li><a href="#">Item 2A</a></li>
+      <li><a href="#">Item 2B</a></li>
+    </ul>
+  </li>
+  <li><a href="#">Item 3</a></li>
+</ul>
diff --git a/docs/partials/off-canvi.html b/docs/partials/off-canvi.html
index a37a5f06e..2a8a09b60 100644
--- a/docs/partials/off-canvi.html
+++ b/docs/partials/off-canvi.html
@@ -43,6 +43,7 @@
         <li><a href="http://foundation.zurb.com/learn/responsive-reading.html">Responsive Reading</a></li>
       </ul>
     </li>
+
     <li>
       <a href="http://foundation.zurb.com/get-involved/support.html">Get Involved</a>
       <ul class="submenu menu vertical" data-submenu>
@@ -83,3 +84,18 @@
     <li><a href="#">Sites</a></li>
   </ul>
 </div>
+
+<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
+  <button class="close-button" aria-label="Close menu" type="button" data-close>
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <ul class="mobile-ofc vertical menu">
+    <li><a href="#">Off-canvas</a></li>
+    <li><a href="#">Example</a></li>
+    <li><a href="#">Vertical</a></li>
+    <li><a href="#">Menu</a></li>
+    <li><a href="#">From</a></li>
+    <li><a href="#">The</a></li>
+    <li><a href="#">Top</a></li>
+  </ul>
+</div>
diff --git a/js/foundation.accordionMenu.js b/js/foundation.accordionMenu.js
index fb3d28bdd..4f2681a70 100644
--- a/js/foundation.accordionMenu.js
+++ b/js/foundation.accordionMenu.js
@@ -9,6 +9,7 @@
  * @requires foundation.util.motion
  * @requires foundation.util.nest
  */
+
 class AccordionMenu {
   /**
    * Creates a new instance of an accordion menu.
@@ -37,6 +38,8 @@ class AccordionMenu {
     });
   }
 
+
+
   /**
    * Initializes the accordion menu by hiding all nested menus.
    * @private
@@ -44,7 +47,7 @@ class AccordionMenu {
   _init() {
     this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
     this.$element.attr({
-      'role': 'tree',
+      'role': 'menu',
       'aria-multiselectable': this.options.multiOpen
     });
 
@@ -58,13 +61,13 @@ class AccordionMenu {
       $elem.attr({
         'aria-controls': subId,
         'aria-expanded': isActive,
-        'role': 'treeitem',
+        'role': 'menuitem',
         'id': linkId
       });
       $sub.attr({
         'aria-labelledby': linkId,
         'aria-hidden': !isActive,
-        'role': 'group',
+        'role': 'menu',
         'id': subId
       });
     });
@@ -85,16 +88,13 @@ class AccordionMenu {
   _events() {
     var _this = this;
 
-    this.$element.find('li').each(function(idx) {
-      if(idx > 0 ){
-        $(this).attr('tabindex','-1');
-      }
+    this.$element.find('li').each(function() {
       var $submenu = $(this).children('[data-submenu]');
 
       if ($submenu.length) {
-        $(this).children('span').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function(e) {
+        $(this).children('a').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function(e) {
           e.preventDefault();
-          _this.setIndex(e.target);
+
           _this.toggle($submenu);
         });
       }
@@ -104,61 +104,54 @@ class AccordionMenu {
           $prevElement,
           $nextElement,
           $target = $element.children('[data-submenu]');
-          _this.setIndex(e.target);
 
       $elements.each(function(i) {
         if ($(this).is($element)) {
-          $prevElement = $elements.eq(Math.max(0, i-1)).first();
-          $nextElement = $elements.eq(Math.min(i+1, $elements.length-1)).first();
+          $prevElement = $elements.eq(Math.max(0, i-1)).find('a').first();
+          $nextElement = $elements.eq(Math.min(i+1, $elements.length-1)).find('a').first();
 
           if ($(this).children('[data-submenu]:visible').length) { // has open sub menu
-            $nextElement = $element.find('li:first-child').first();
+            $nextElement = $element.find('li:first-child').find('a').first();
           }
           if ($(this).is(':first-child')) { // is first element of sub menu
-            $prevElement = $element.parents('li').first();
-          } else if ($prevElement.children('[data-submenu]:visible').length) { // if previous element has open sub menu
-            $prevElement = $prevElement.find('li:last-child');
+            $prevElement = $element.parents('li').first().find('a').first();
+          } else if ($prevElement.parents('li').first().children('[data-submenu]:visible').length) { // if previous element has open sub menu
+            $prevElement = $prevElement.parents('li').find('li:last-child').find('a').first();
           }
           if ($(this).is(':last-child')) { // is last element of sub menu
-            $nextElement = $element.parents('li').first().next('li').first();
+            $nextElement = $element.parents('li').first().next('li').find('a').first();
           }
 
           return;
         }
       });
+
       Foundation.Keyboard.handleKey(e, 'AccordionMenu', {
         open: function() {
           if ($target.is(':hidden')) {
             _this.down($target);
-            //$target.find('li').first().first().focus();
+            $target.find('li').first().find('a').first().focus();
           }
         },
         close: function() {
           if ($target.length && !$target.is(':hidden')) { // close active sub of this item
             _this.up($target);
           } else if ($element.parent('[data-submenu]').length) { // close currently open sub
-            $element.parents('li').first().first().focus();
+            _this.up($element.parent('[data-submenu]'));
+            $element.parents('li').first().find('a').first().focus();
           }
         },
         up: function() {
-          if( $prevElement.attr('tabindex') ){
-            $prevElement.focus();
-          } else {
-            $prevElement.attr('tabindex', -1).focus();
-          }
+          $prevElement.focus();
           return true;
         },
         down: function() {
-          $nextElement.attr('tabindex', -1).focus();
+          $nextElement.focus();
           return true;
         },
         toggle: function() {
           if ($element.children('[data-submenu]').length) {
             _this.toggle($element.children('[data-submenu]'));
-          } else {
-            if( $element.find('a:first').attr('href') ){
-              window.location = $element.find('a:first').attr('href');
-            }
           }
         },
         closeAll: function() {
@@ -171,7 +164,7 @@ class AccordionMenu {
           e.stopImmediatePropagation();
         }
       });
-    });
+    });//.attr('tabindex', 0);
   }
 
   /**
@@ -180,7 +173,6 @@ class AccordionMenu {
    */
   hideAll() {
     this.up(this.$element.find('[data-submenu]'));
-    this.$element.find('li:first')[0].focus();
   }
 
   /**
@@ -191,19 +183,6 @@ class AccordionMenu {
     this.down(this.$element.find('[data-submenu]'));
   }
 
-   /**
-   * Sets the tabindex of the selected item to 0 and resets all the rest
-   * @function
-   */
-  setIndex(el){
-    this.$element.find('li').attr('tabindex','-1');
-    if( $(el).is('li') ){
-      $(el).attr('tabindex',0);
-    } else {
-      $(el).parent('li').attr('tabindex',0);
-    }
-  }
-
   /**
    * Toggles the open/close state of a submenu.
    * @function
diff --git a/js/foundation.util.nest.js b/js/foundation.util.nest.js
index 82603a790..8ce042f84 100644
--- a/js/foundation.util.nest.js
+++ b/js/foundation.util.nest.js
@@ -4,21 +4,14 @@
 
 const Nest = {
   Feather(menu, type = 'zf') {
+    menu.attr('role', 'menubar');
 
-    if( type !== 'accordion'){
-      menu.attr('role', 'menubar');
-      menu.find('a:first').attr('tabindex', 0);
-    } else {
-      menu.find('li:first').attr('tabindex', 0);
-    }
-
-    var roleType = (type === 'accordion') ? 'treeitem' : 'menuitem',
-        elementType = (type === 'accordion') ? 'span' : 'a',
-        items = menu.find('li').attr({'role': roleType}),
+    var items = menu.find('li').attr({'role': 'menuitem'}),
         subMenuClass = `is-${type}-submenu`,
         subItemClass = `${subMenuClass}-item`,
-        hasSubClass = `is-${type}-submenu-parent`,
-        noSubClass = `is-${type}-submenu-none`;
+        hasSubClass = `is-${type}-submenu-parent`;
+
+    menu.find('a:first').attr('tabindex', 0);
 
     items.each(function() {
       var $item = $(this),
@@ -30,7 +23,7 @@ const Nest = {
           .attr({
             'aria-haspopup': true,
             'aria-expanded': false,
-            'aria-label': $item.children(elementType + ':first').text()
+            'aria-label': $item.children('a:first').text()
           });
 
         $sub
@@ -40,12 +33,6 @@ const Nest = {
             'aria-hidden': true,
             'role': 'menu'
           });
-      } else {
-        $item.addClass(noSubClass).find('a').attr('tabindex',-1);
-        var text = $item.addClass(noSubClass).find('a').text();
-        if( $item.find('a').length > 0 ){
-          $item.attr('aria-label',text + ' link');
-        }
       }
 
       if ($item.parent('[data-submenu]').length) {
diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 7719c0c2e..d8a9f481d 100644
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -11,24 +11,9 @@ $accordionmenu-arrows: true !default;
 $accordionmenu-arrow-color: $primary-color !default;
 
 @mixin foundation-accordion-menu {
-  .tree {
-    .is-accordion-submenu-none > a {
-      padding: 0;
-      line-height: $list-lineheight;
-    }
-
-  }
-
   @if $accordionmenu-arrows {
-    .is-accordion-submenu-parent > span {
+    .is-accordion-submenu-parent > a {
       position: relative;
-      display: block;
-      color: $anchor-color;
-      cursor: pointer;
-
-      &:hover {
-        color: $anchor-color-hover;
-      }
 
       &::after {
         @include css-triangle(6px, $accordionmenu-arrow-color, down);
@@ -37,13 +22,12 @@ $accordionmenu-arrow-color: $primary-color !default;
         right: 1rem;
         #{$global-right}: -4px;
       }
-
     }
 
-    .is-accordion-submenu-parent[aria-expanded='true'] > span::after {
+    .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+      transform-origin: 50% 50%;
       transform: scaleY(-1);
       transform-origin: 50% 50%;
     }
-
   }
 }
diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 97bf21a87..b53d67f5c 100644
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -70,7 +70,6 @@ $menu-border: $light-gray !default;
     line-height: 1;
   }
 
-
   // Reset styles of inner elements
   input,
   select,
@@ -234,7 +233,7 @@ $menu-border: $light-gray !default;
 }
 
 @mixin foundation-menu {
-  .menu, .tree {
+  .menu {
     @include menu-base;
     @include menu-icons;
 
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index a7919c892..fa76956fa 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -78,7 +78,7 @@
   $gutters: $grid-column-gutter
 ) {
   // Base properties
-  flex: flex-grid-column($columns);
+  @include flex-grid-size($columns);
 
   // Gutters
   @include grid-column-gutter($gutters: $gutters);
diff --git a/test/javascript/components/accordionMenu.js b/test/javascript/components/accordionMenu.js
index 8847a3554..140ee2770 100644
--- a/test/javascript/components/accordionMenu.js
+++ b/test/javascript/components/accordionMenu.js
@@ -1,28 +1,32 @@
 describe('Accordion Menu', function() {
   var plugin;
   var $html;
-  var template = `<ul class="vertical tree" data-accordion-menu>
-    <li><span>Item 1</span>
-      <ul class="tree vertical nested">
-        <li><span>Item 1A</span>
-          <ul class="tree vertical nested">
-            <li><span>Item 1Ai</span></li>
-            <li><a href="http://www.google.com">External link</a></li>
-            <li><span>Item 1Aiii</span></li>
-          </ul>
-        </li>
-        <li><span>Item 1B</span></li>
-        <li><span>Item 1C</span></li>
-      </ul>
+  var template = `
+    <ul class="vertical menu">
+      <li>
+        <a href="#">Item 1</a>
+        <ul class="menu vertical nested">
+          <li>
+            <a href="#">Item 1A</a>
+            <ul class="menu vertical nested">
+              <li><a href="#">Item 1Ai</a></li>
+              <li><a href="#">Item 1Aii</a></li>
+              <li><a href="#">Item 1Aiii</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item 1B</a></li>
+          <li><a href="#">Item 1C</a></li>
+        </ul>
       </li>
-      <li><span>Item 2</span>
-        <ul class="tree vertical nested">
-          <li><span>Item 2A</a></li>
-          <li><span>Item 2B</a></li>
+      <li>
+        <a href="#">Item 2</a>
+        <ul class="menu vertical nested">
+          <li><a href="#">Item 2A</a></li>
+          <li><a href="#">Item 2B</a></li>
         </ul>
       </li>
-    <li><a href="http://www.google.com">External link</a></li>
-  </ul>`;
+      <li><a href="#">Item 3</a></li>
+    </ul>`;
   Foundation.AccordionMenu.defaults.slideSpeed = 0;
 
   afterEach(function() {
diff --git a/test/visual/accordion-menu/keyboard.html b/test/visual/accordion-menu/keyboard.html
index fd0c346f7..cc7b7adda 100644
--- a/test/visual/accordion-menu/keyboard.html
+++ b/test/visual/accordion-menu/keyboard.html
@@ -12,36 +12,23 @@
       <h1>Accordion Menu: Keyboard Control</h1>
 
       <ul>
-        <li>Hitting the tab key focuses you to the menu or the last open item.
-        <li>The up and down arrow keys should navigate you through the menu items.</li>
-        <li>The space bar, enter key and right arrow opens a menu if already closed. </li>
-        <li>The space bar, enter key, esc and left arrow opens a menu if already open. </li>
+        <li>The Tab and down arrow keys should navigate down the menu, including open sub-menus.</li>
         <li>Shift-tab and up arrow keys should navigate up the menu, including open sub-menus.</li>
-        <li>When focused on a link item, the space bar and enter key should navigate to the link.</li>
+        <li>When focused on a parent menu, the space bar and Enter key should open or close the menu.</li>
+        <li>When focused on a link item, the space bar and Center key should navigate to the link.</li>
       </ul>
 
-      <ul class="vertical tree" data-accordion-menu>
-        <li><span>Item 1</span>
-            <ul class="tree vertical nested">
-              <li><span>Item 1A</span>
-                <ul class="tree vertical nested">
-                  <li><span>Item 1Ai</span></li>
-                  <li><a href="http://www.google.com">External link</a></li>
-                  <li><span>Item 1Aiii</span></li>
-                </ul>
-              </li>
-              <li><span>Item 1B</span></li>
-              <li><span>Item 1C</span></li>
-            </ul>
-            </li>
-          <li><span>Item 2</span>
-            <ul class="tree vertical nested">
-              <li><span>Item 2A</a></li>
-              <li><span>Item 2B</a></li>
-            </ul>
-          </li>
-        <li><a href="http://www.google.com">External link</a></li>
+      <ul class="vertical menu" data-accordion-menu>
+        <li>
+          <a href="#">Item 1</a>
+          <ul class="menu vertical nested">
+            <li><a href="google.com">External link</a></li>
+            <li><a href="#">Item 1B</a></li>
+          </ul>
+        </li>
+        <li><a href="#">Item 2</a></li>
       </ul>
+    </div>
 
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
-- 
2.47.2