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
patternfly · Oct 27, 2017 · 1b55948 · 1b55948
1 parent 3268e01
commit 1b55948
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 117 deletions.
diff --git 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
@@ -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
@@ -1,35 +1,43 @@
-<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 %}
       {% include widgets/navigation/tertiary-ipsum-copiosae.html %}
       {% 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 %}
       {% include widgets/navigation/tertiary-ipsum-patrioque.html %}
       {% 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}