Merge pull request #13 from bradfrost/feature/add-aria-to-dropdown-lists

Added aria-expanded to dropdown navigation

Author: bradfrost

packages/docs/src/_includes/components/header.njk

@@ -10,9 +10,12 @@
 
 		<div class="c-header__nav-container js-nav-panel">
 			{% include "components/tree-nav.njk" %}
+
+			
+		
 		</div>
 	</div>
 	<!--end c-header__inner-->
 </header>
-<!--end c-header-->
+<!--end c-header--> 
 

packages/docs/src/_includes/components/tree-nav.njk

@@ -5,10 +5,12 @@
         {% for item in navigation.items %}
         <li class="c-tree-nav__item {% if item.subnav %}js-nav-dropdown{% endif %}">
             {% if item.subnav %}
-            <button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger">
+            <button class="c-tree-nav__link c-tree-nav__link--btn js-nav-dropdown-trigger" aria-expanded="true">
                 {{ item.label }}
                 {% set className = "c-tree-nav__icon" %}
                 {% include "components/icon-chevron-down.njk" %}
+           
+                
 
             </button>
 

packages/docs/src/js/primary-nav.js

@@ -23,10 +23,15 @@
       if (navLinkParent.classList.contains('is-active')) {
         /* 3 */
         navLinkParent.classList.remove('is-active');
+        
+        this.setAttribute("aria-expanded", "false");
       } else {
         /* 4 */
         navLinkParent.classList.add('is-active');
+       
+        this.setAttribute("aria-expanded", "true");
       }
+      
     });
   }