From 1b55948228dab68247755275dda5c51f070b528f Mon Sep 17 00:00:00 2001
From: Jennifer Giardino <jgiardin@redhat.com>
Date: Fri, 22 Sep 2017 09:48:27 -0400
Subject: [PATCH] fix(vertical nav): improve accessibility support

Update css to apply hover styles on menu items with focus
Update css to prevent keyboard Tab key from shiftin focus to hidden elements
Update html test page example to include aria attributes for better screenreader support
---
 src/less/vertical-nav.less                    | 63 ++++++++------
 .../navigation/secondary-nav-amet.html        | 25 ++++--
 .../navigation/secondary-nav-ipsum.html       | 26 ++++--
 .../navigation/tertiary-amet-corrumpit.html   | 16 ++--
 .../navigation/tertiary-amet-detracto.html    | 16 ++--
 .../navigation/tertiary-amet-mediocrem.html   | 16 ++--
 .../navigation/tertiary-ipsum-copiosae.html   | 16 ++--
 .../navigation/tertiary-ipsum-intellegam.html | 16 ++--
 .../navigation/tertiary-ipsum-patrioque.html  | 16 ++--
 .../navigation/vertical-navigation.html       | 83 ++++++++++---------
 10 files changed, 176 insertions(+), 117 deletions(-)

diff --git a/src/less/vertical-nav.less b/src/less/vertical-nav.less
index 758d997ba9..19dd1430b7 100644
--- a/src/less/vertical-nav.less
+++ b/src/less/vertical-nav.less
@@ -92,21 +92,21 @@
         text-align: center;
         width: @nav-pf-vertical-icon-width;
       }
-      &:hover {
+      &:hover,
+      &:focus {
         text-decoration: none;
       }
     }
-    &.active,
-    &:hover {
-      > a {
-        background-color: @nav-pf-vertical-active-bg-color;
-        color: @nav-pf-vertical-active-color;
-        font-weight: @nav-pf-vertical-active-font-weight;
-        .fa,
-        .glyphicon,
-        .pficon {
-          color: @nav-pf-vertical-active-icon-color;
-        }
+    &.active > a,
+    &:hover > a,
+    & > a:focus {
+      background-color: @nav-pf-vertical-active-bg-color;
+      color: @nav-pf-vertical-active-color;
+      font-weight: @nav-pf-vertical-active-font-weight;
+      .fa,
+      .glyphicon,
+      .pficon {
+        color: @nav-pf-vertical-active-icon-color;
       }
     }
     &.active {
@@ -590,12 +590,12 @@
     &.active > a:before {
       display: none;
     }
-    &.active,
-    &:hover {
-      > a {
-        background-color: @nav-pf-vertical-secondary-active-bg-color;
-        color: @nav-pf-vertical-secondary-active-color;
-      }
+    &.active > a,
+    &:hover > a,
+    & > a:focus {
+      background-color: @nav-pf-vertical-secondary-active-bg-color;
+      color: @nav-pf-vertical-secondary-active-color;
+      text-decoration: none;
     }
     .badge-container-pf {
       top: 5px;
@@ -894,20 +894,16 @@
   }
 }
 .nav-pf-vertical-collapsible-menus {
-  .secondary-collapse-toggle-pf {
-    display: inline-block;
-  }
   .secondary-nav-item-pf.active {
     .secondary-collapse-toggle-pf {
+      display: inline-block;
       opacity: 1;
       pointer-events: all;
     }
   }
-  .tertiary-collapse-toggle-pf {
-    display: inline-block;
-  }
   .tertiary-nav-item-pf.active {
     .tertiary-collapse-toggle-pf {
+      display: inline-block;
       opacity: 1;
       pointer-events: all;
     }
@@ -948,3 +944,22 @@
     transition: visibility @nav-pf-menu-transition-period, opacity @nav-pf-menu-transition-period linear;
   }
 }
+
+// make hidden parent menu items not keyboard-accessible when a submenu is
+// pinned or the mobile nav is shown
+.list-group > .list-group-item > a {
+  .collapsed-tertiary-nav-pf > &,
+  .collapsed-tertiary-nav-pf .nav-pf-secondary-nav > &,
+  .show-mobile-tertiary > &,
+  .show-mobile-tertiary .nav-pf-secondary-nav > &,
+  .collapsed-secondary-nav-pf > &,
+  .show-mobile-secondary > & {
+    display: none;
+  }
+}
+.secondary-nav-item-pf.active .secondary-collapse-toggle-pf {
+  .show-mobile-tertiary.nav-pf-vertical-collapsible-menus &,
+  .collapsed-tertiary-nav-pf.nav-pf-vertical-collapsible-menus & {
+    display: none;
+  }
+}
diff --git a/tests/pages/_includes/widgets/navigation/secondary-nav-amet.html b/tests/pages/_includes/widgets/navigation/secondary-nav-amet.html
index 2d208158ed..0ab87696a1 100644
--- a/tests/pages/_includes/widgets/navigation/secondary-nav-amet.html
+++ b/tests/pages/_includes/widgets/navigation/secondary-nav-amet.html
@@ -1,11 +1,16 @@
-<div id="amet-secondary" class="nav-pf-secondary-nav">
+<div id="amet-secondary" class="nav-pf-secondary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
+    <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Amet</span>
   </div>
-  <ul class="list-group">
+  <ul class="list-group" role="list" aria-label="Secondary Navigation Menu">
     <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" data-target="#amet-detracto-tertiary">
-      <a href="#0">
+      <a href="#0"
+        {% if page.nav-tertiary %}aria-expanded="false"{% endif %}>
         <span class="list-group-item-value">Detracto Suscipiantur</span>
         {% if page.nav-tertiary %}{% else %}
         {% if page.nav-badges %}
@@ -26,8 +31,9 @@
       {% include widgets/navigation/tertiary-amet-detracto.html %}
       {% endif %}
     </li>
-    <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" data-target="#amet-mediocrem-tertiary">
-      <a href="#0">
+    <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" role="listitem" data-target="#amet-mediocrem-tertiary">
+      <a href="#0"
+        {% if page.nav-tertiary %}aria-expanded="false"{% endif %}>
         <span class="list-group-item-value">Mediocrem</span>
         {% if page.nav-tertiary %}{% else %}
         {% if page.nav-badges %}
@@ -44,8 +50,9 @@
       {% include widgets/navigation/tertiary-amet-mediocrem.html %}
       {% endif %}
     </li>
-    <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" data-target="#amet-corrumpit-tertiary">
-      <a href="#0">
+    <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" role="listitem" data-target="#amet-corrumpit-tertiary">
+      <a href="#0"
+        {% if page.nav-tertiary %}aria-expanded="false"{% endif %}>
         <span class="list-group-item-value">Corrumpit Cupidatat Proident Deserunt</span>
         {% if page.nav-tertiary %}{% else %}
         {% if page.nav-badges %}
@@ -66,7 +73,7 @@
       {% endif %}
     </li>
     {% if page.nav-tertiary %}
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Urbanitas Habitant Morbi Tristique</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/secondary-nav-ipsum.html b/tests/pages/_includes/widgets/navigation/secondary-nav-ipsum.html
index b5ec5a3286..1a6fcb1d20 100644
--- a/tests/pages/_includes/widgets/navigation/secondary-nav-ipsum.html
+++ b/tests/pages/_includes/widgets/navigation/secondary-nav-ipsum.html
@@ -1,19 +1,26 @@
-<div id="-secondary" class="nav-pf-secondary-nav">
+<div id="ipsum-secondary" class="nav-pf-secondary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
+    <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Ipsum</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item active {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" data-target="#ipsum-intellegam-tertiary">
-      <a href="#0">
+  <ul class="list-group" role="list" aria-label="Secondary Navigation Menu">
+    <li class="list-group-item active {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" role="listitem" data-target="#ipsum-intellegam-tertiary">
+      <a href="#0"
+        {% if page.nav-tertiary %}aria-expanded="false"{% endif %}>
         <span class="list-group-item-value">Intellegam</span>
+        <span class="sr-only">(Active Menu Item)</span>
       </a>
       {% if page.nav-tertiary %}
       {% include widgets/navigation/tertiary-ipsum-intellegam.html %}
       {% endif %}
     </li>
-    <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" data-target="#ipsum-copiosae-tertiary">
-      <a href="#0">
+    <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" role="listitem" data-target="#ipsum-copiosae-tertiary">
+      <a href="#0"
+        {% if page.nav-tertiary %}aria-expanded="false"{% endif %}>
         <span class="list-group-item-value">Copiosae</span>
       </a>
       {% if page.nav-tertiary %}
@@ -21,7 +28,8 @@
       {% endif %}
     </li>
     <li class="list-group-item {% if page.nav-tertiary %}tertiary-nav-item-pf{% endif %}" data-target="#ipsum-patrioque-tertiary">
-      <a href="#0" >
+      <a href="#0"
+        {% if page.nav-tertiary %}aria-expanded="false"{% endif %}>
         <span class="list-group-item-value">Patrioque</span>
       </a>
       {% if page.nav-tertiary %}
@@ -29,7 +37,7 @@
       {% endif %}
     </li>
     {% if page.nav-tertiary %}
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Accumsan</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/tertiary-amet-corrumpit.html b/tests/pages/_includes/widgets/navigation/tertiary-amet-corrumpit.html
index fd9df04cbf..53116bc6d6 100644
--- a/tests/pages/_includes/widgets/navigation/tertiary-amet-corrumpit.html
+++ b/tests/pages/_includes/widgets/navigation/tertiary-amet-corrumpit.html
@@ -1,10 +1,14 @@
-<div id="amet-corrumpit-tertiary" class="nav-pf-tertiary-nav">
+<div id="amet-corrumpit-tertiary" class="nav-pf-tertiary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
+    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Corrumpit</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item">
+  <ul class="list-group" role="list" aria-label="Tertiary Navigation Menu">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Aeque</span>
         {% if page.nav-badges %}
@@ -14,7 +18,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Delenit</span>
         {% if page.nav-badges %}
@@ -24,7 +28,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Qualisque</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/tertiary-amet-detracto.html b/tests/pages/_includes/widgets/navigation/tertiary-amet-detracto.html
index 91237e0f0b..4ec321a06a 100644
--- a/tests/pages/_includes/widgets/navigation/tertiary-amet-detracto.html
+++ b/tests/pages/_includes/widgets/navigation/tertiary-amet-detracto.html
@@ -1,10 +1,14 @@
-<div id="amet-detracto-tertiary" class="nav-pf-tertiary-nav">
+<div id="amet-detracto-tertiary" class="nav-pf-tertiary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
+    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Detracto</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item">
+  <ul class="list-group" role="list" aria-label="Tertiary Navigation Menu">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Delicatissimi</span>
         {% if page.nav-badges %}
@@ -14,7 +18,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Aliquam</span>
         {% if page.nav-badges %}
@@ -24,7 +28,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Principes</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/tertiary-amet-mediocrem.html b/tests/pages/_includes/widgets/navigation/tertiary-amet-mediocrem.html
index f56f6a74bf..902275b29b 100644
--- a/tests/pages/_includes/widgets/navigation/tertiary-amet-mediocrem.html
+++ b/tests/pages/_includes/widgets/navigation/tertiary-amet-mediocrem.html
@@ -1,10 +1,14 @@
-<div id="amet-mediocrem-tertiary" class="nav-pf-tertiary-nav">
+<div id="amet-mediocrem-tertiary" class="nav-pf-tertiary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
+    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Mediocrem</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item">
+  <ul class="list-group" role="list" aria-label="Tertiary Navigation Menu">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Convenire</span>
         {% if page.nav-badges %}
@@ -14,7 +18,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Nonumy</span>
         {% if page.nav-badges %}
@@ -24,7 +28,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Deserunt</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/tertiary-ipsum-copiosae.html b/tests/pages/_includes/widgets/navigation/tertiary-ipsum-copiosae.html
index 07f90d490d..e7b3b228c1 100644
--- a/tests/pages/_includes/widgets/navigation/tertiary-ipsum-copiosae.html
+++ b/tests/pages/_includes/widgets/navigation/tertiary-ipsum-copiosae.html
@@ -1,10 +1,14 @@
-<div id="compute-infrastructure-tertiary" class="nav-pf-tertiary-nav">
+<div id="compute-infrastructure-tertiary" class="nav-pf-tertiary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
+    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Copiosae</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item">
+  <ul class="list-group" role="list" aria-label="Tertiary Navigation Menu">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Exerci</span>
         {% if page.nav-badges %}
@@ -14,7 +18,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Quaeque</span>
         {% if page.nav-badges %}
@@ -24,7 +28,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Utroque</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/tertiary-ipsum-intellegam.html b/tests/pages/_includes/widgets/navigation/tertiary-ipsum-intellegam.html
index 47231e2477..ba4b3594a2 100644
--- a/tests/pages/_includes/widgets/navigation/tertiary-ipsum-intellegam.html
+++ b/tests/pages/_includes/widgets/navigation/tertiary-ipsum-intellegam.html
@@ -1,10 +1,14 @@
-<div id="compute-containers-tertiary" class="nav-pf-tertiary-nav">
+<div id="compute-containers-tertiary" class="nav-pf-tertiary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
+    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Intellegam</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item active">
+  <ul class="list-group" role="list" aria-label="Tertiary Navigation Menu">
+    <li class="list-group-item active" role="listitem">
       <a href="#0">
         <span id="compute-containers-users-nav-item" class="list-group-item-value">Recteque</span>
         {% if page.nav-badges %}
@@ -21,7 +25,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span id="compute-containers-groups-nav-item" class="list-group-item-value">Suavitate</span>
         {% if page.nav-badges %}
@@ -38,7 +42,7 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span id="compute-containers-roles-nav-item" class="list-group-item-value">Vituperatoribus</span>
         {% if page.nav-badges %}
diff --git a/tests/pages/_includes/widgets/navigation/tertiary-ipsum-patrioque.html b/tests/pages/_includes/widgets/navigation/tertiary-ipsum-patrioque.html
index 44369e7872..78128873ac 100644
--- a/tests/pages/_includes/widgets/navigation/tertiary-ipsum-patrioque.html
+++ b/tests/pages/_includes/widgets/navigation/tertiary-ipsum-patrioque.html
@@ -1,10 +1,14 @@
-<div id="compute-clouds-tertiary" class="nav-pf-tertiary-nav">
+<div id="compute-clouds-tertiary" class="nav-pf-tertiary-nav" aria-hidden="true">
   <div class="nav-item-pf-header">
-    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav"></a>
+    <a href="#0" class="tertiary-collapse-toggle-pf" data-toggle="collapse-tertiary-nav">
+      <span class="sr-only toggle-label-expanded-pf">Pin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-collapsed-pf" aria-hidden="true">Unpin Secondary Navigation Menu</span>
+      <span class="sr-only toggle-label-back-pf" aria-hidden="true">Back to Primary Navigation Menu</span>
+    </a>
     <span>Patrioque</span>
   </div>
-  <ul class="list-group">
-    <li class="list-group-item">
+  <ul class="list-group" role="list" aria-label="Tertiary Navigation Menu">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Novum</span>
         {% if page.nav-badges %}
@@ -14,12 +18,12 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Pericula</span>
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="list-group-item-value">Gubergren</span>
       </a>
diff --git a/tests/pages/_includes/widgets/navigation/vertical-navigation.html b/tests/pages/_includes/widgets/navigation/vertical-navigation.html
index eaaf924742..06bb8e21b9 100644
--- a/tests/pages/_includes/widgets/navigation/vertical-navigation.html
+++ b/tests/pages/_includes/widgets/navigation/vertical-navigation.html
@@ -8,14 +8,14 @@
      {% if page.collapsible-menus %}nav-pf-vertical-collapsible-menus{% endif %}
      {% if page.hide-icons %}hidden-icons-pf{% endif %}
      {% if page.nav-badges %}nav-pf-vertical-with-badges{% endif %}">
-  <ul class="list-group">
-    <li class="list-group-item">
+  <ul class="list-group" role="list" aria-label="Primary Navigation Menu">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
         <span class="list-group-item-value">Dashboard</span>
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
         <span class="list-group-item-value">Dolor</span>
@@ -26,17 +26,20 @@
         {% endif %}
       </a>
     </li>
-    <li class="list-group-item active {% if page.submenus %}secondary-nav-item-pf{% endif %}" data-target="#ipsum-secondary">
-      <a href="#0">
+    <li class="list-group-item active {% if page.submenus %}secondary-nav-item-pf{% endif %}" role="listitem" data-target="#ipsum-secondary">
+      <a href="#0"
+        {% if page.submenus %}aria-expanded="false"{% endif %}>
         <span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
         <span class="list-group-item-value">Ipsum</span>
+        <span class="sr-only">(Active Menu Item)</span>
       </a>
       {% if page.submenus %}
       {% include widgets/navigation/secondary-nav-ipsum.html %}
       {% endif %}
     </li>
-    <li class="list-group-item {% if page.submenus %}secondary-nav-item-pf{% endif %}" data-target="#amet-secondary">
-      <a href="#0">
+    <li class="list-group-item {% if page.submenus %}secondary-nav-item-pf{% endif %}" role="listitem" data-target="#amet-secondary">
+      <a href="#0"
+        {% if page.submenus %}aria-expanded="false"{% endif %}>
         <span class="fa fa-paper-plane" data-toggle="tooltip" title="Amet"></span>
         <span class="list-group-item-value">Amet</span>
       </a>
@@ -44,51 +47,51 @@
       {% include widgets/navigation/secondary-nav-amet.html %}
       {% endif %}
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="fa fa-graduation-cap" data-toggle="tooltip" title="Adipscing"></span>
         <span class="list-group-item-value">Adipscing</span>
       </a>
     </li>
-    <li class="list-group-item">
+    <li class="list-group-item" role="listitem">
       <a href="#0">
         <span class="fa fa-gamepad" data-toggle="tooltip" title="Lorem"></span>
         <span class="list-group-item-value">Lorem</span>
       </a>
     </li>
     {% if page.applauncher %}
-    <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block">
-      <a href="#0">
+    <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" role="listitem">
+      <a href="#applauncher-secondary" aria-expanded="false">
         <span class="fa fa-th applauncher-pf-icon" data-toggle="tooltip" title="" data-original-title="App Launcher"></span>
         <span class="list-group-item-value">App Launcher</span>
       </a>
-      <div id="applauncher-secondary" class="nav-pf-secondary-nav">
+      <div id="applauncher-secondary" class="nav-pf-secondary-nav" aria-hidden="true">
         <div class="nav-item-pf-header">
           <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
           <span>App Launcher</span>
         </div>
-        <ul class="list-group">
-          <li class="list-group-item">
+        <ul class="list-group" role="list" aria-labelledby="applauncher-menuitem-vertical">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Recteque</span>
             </a>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Recteque</span>
             </a>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Suavitate</span>
             </a>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Lorem</span>
             </a>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Home</span>
             </a>
@@ -97,25 +100,25 @@
       </div>
     </li>
     {% endif %}
-    <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block">
-      <a href="#0">
+    <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" role="listitem">
+      <a href="#user-secondary" aria-expanded="false">
         <span class="pficon pficon-user" data-toggle="tooltip" title="" data-original-title="User"></span>
         <span class="list-group-item-value">User</span>
       </a>
-      <div id="user-secondary" class="nav-pf-secondary-nav">
+      <div id="user-secondary" class="nav-pf-secondary-nav" aria-hidden="true" aria-expanded="false">
         <div class="nav-item-pf-header">
           <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
           <span>User</span>
         </div>
 
-        <ul class="list-group">
-          <li class="list-group-item">
+        <ul class="list-group" role="list" aria-labelledby="user-menuitem-vertical">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Preferences</span>
             </a>
           </li>
 
-          <li class="list-group-item">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Logout</span>
             </a>
@@ -123,23 +126,23 @@
         </ul>
       </div>
     </li>
-    <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block" data-target="#amet-secondary">
-      <a href="#0">
+    <li class="list-group-item secondary-nav-item-pf mobile-nav-item-pf visible-xs-block">
+      <a href="#help-secondary" aria-expanded="false">
         <span class="pficon pficon-help" data-toggle="tooltip" title="" data-original-title="Help"></span>
         <span class="list-group-item-value">Help</span>
       </a>
-      <div id="help-secondary" class="nav-pf-secondary-nav">
+      <div id="help-secondary" class="nav-pf-secondary-nav" aria-hidden="true" aria-expanded="false">
         <div class="nav-item-pf-header">
           <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
           <span>Help</span>
         </div>
-        <ul class="list-group">
-          <li class="list-group-item">
+        <ul class="list-group" role="list" aria-labelledby="help-menuitem-vertical">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">Help</span>
             </a>
           </li>
-          <li class="list-group-item">
+          <li class="list-group-item" role="listitem">
             <a href="#0">
               <span class="list-group-item-value">About</span>
             </a>
@@ -159,14 +162,16 @@
 {% include widgets/layouts/cards-alt.html %}
 </div>
 <script>
-  $(document).ready(function() {
-    // matchHeight the contents of each .card-pf and then the .card-pf itself
-    $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
-    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
-    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
-    $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
+$(document).ready(function() {
+  // matchHeight the contents of each .card-pf and then the .card-pf itself
+  $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
+  $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
+  $(
+    ".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer"
+  ).matchHeight();
+  $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
 
-    // Initialize the vertical navigation
-    $().setupVerticalNavigation(true);
-  });
+  // Initialize the vertical navigation
+  $().setupVerticalNavigation(true);
+});
 </script>