Merge pull request #1010 from unl/a11y-improvements

WIP: A11y improvements
unl · Sep 6, 2016 · 833482a · 833482a
2 parents d5f8160 + 31dd48c
commit 833482a
Show file tree

Hide file tree

Showing 19 changed files with 292 additions and 284 deletions.
diff --git a/wdn/templates_4.1/includes/idm.html b/wdn/templates_4.1/includes/idm.html
@@ -1,9 +1,8 @@
 <div class="wdn-resource-label wdn-resource-login-trigger" id="wdn_identity_management" role="navigation" aria-labelledby="wdn_idm_username">
     <a class="wdn-idm-login" href="https://login.unl.edu/cas/login" id="wdn_idm_username" accesskey="l"><span class="wdn-icon-user" aria-hidden="true"></span>Login</a>
     <div id="wdn_idm_notice_container" class="wdn-dropdown-widget-content hidden">
-        <input type="checkbox" id="wdn_idm_toggle" class="wdn_idm_toggle wdn-input-driver wdn-dropdown-widget-toggle" aria-haspopup="true" aria-controls="wdn_idm_options" value="Show user profile options" />
-        <label for="wdn_idm_toggle" id="wdn_idm_toggle_label"></label>
-        <nav id="wdn_idm_options" class="wdn-idm-options" aria-hidden="true">
+        <button id="wdn_idm_toggle_label" class="wdn-dropdown-widget-button" aria-haspopup="true" aria-pressed="false" aria-controls="wdn_idm_options">Show user profile options</button>
+        <nav id="wdn_idm_options" class="wdn-idm-options wdn-dropdown-widget-no-outline" aria-hidden="true">
             <ul>
                 <li><a href="https://planetred.unl.edu/" id="wdn_idm_profile">View Profile</a></li>
                 <li><a href="https://login.unl.edu/cas/logout?url=http%3A//www.unl.edu/" id="wdn_idm_logout">Logout</a></li>

diff --git a/wdn/templates_4.1/includes/navigation-addons.html b/wdn/templates_4.1/includes/navigation-addons.html
@@ -1,2 +0,0 @@
-<label for="wdn_menu_toggle"><span class="wdn-icon-menu" aria-hidden="true"></span><span class="wdn-text-hidden">Menu</span></label>
-<label for="wdn-main-share-button-wdn-share-toggle"><span class="wdn-icon-share" aria-hidden="true"></span><span class="wdn-text-hidden">Share This Page</span></label>

diff --git a/wdn/templates_4.1/includes/search.html b/wdn/templates_4.1/includes/search.html
@@ -1,8 +1,7 @@
-<div id="wdn_search" role="search">
-    <input type="checkbox" id="wdn_search_toggle" class="wdn_search_toggle wdn-input-driver wdn-dropdown-widget-toggle visible-at-full-nav" aria-controls="wdn_search_form" value="Show search form" />
-    <label for="wdn_search_toggle" id="wdn_search_toggle_label"><span class="wdn-icon-search" aria-hidden="true"></span><span class="wdn-text-hidden">Show search form</span></label>
-    <form id="wdn_search_form" class="wdn-dropdown-widget-content" action="https://search.unl.edu/" method="get">
-		<label for="wdn_search_query">Search</label>
+<div id="wdn_search" class="wdn-dropdown-widget-content" role="search">
+    <button class="wdn-dropdown-widget-button visible-at-full-nav" id="wdn_search_toggle_label" aria-pressed="false" aria-controls="wdn_search_form" aria-haspopup="true"><span class="wdn-icon-search" aria-hidden="true"></span><span class="wdn-text-hidden">Show search form</span></button>
+    <form id="wdn_search_form" action="https://search.unl.edu/" method="get" class="wdn-dropdown-widget-no-outline">
+        <label for="wdn_search_query">Search</label>
         <input required accesskey="f" id="wdn_search_query" name="q" type="search" />
         <button type="submit"><span class="wdn-icon-search" aria-hidden="true"></span><span class="wdn-text-hidden">Search</span></button>
     </form>

diff --git a/wdn/templates_4.1/includes/share.html b/wdn/templates_4.1/includes/share.html
@@ -1,6 +1,3 @@
 <div class="wdn-share-this-page wdn-dropdown-widget-content" id="wdn-main-share-button">
-	<div class="wdn-share-button">
-	    <input type="checkbox" id="wdn-main-share-button-wdn-share-toggle" value="Show share options" class="wdn-input-driver wdn-dropdown-widget-toggle"  />
-	    <label for="wdn-main-share-button-wdn-share-toggle"><span class="wdn-icon-share" aria-hidden="true"></span><span class="wdn-text-hidden">Share This Page</span></label>
-	</div>
+    <button class="wdn-dropdown-widget-button" aria-haspopup="true" aria-pressed="false"><span class="wdn-icon-share" aria-hidden="true"></span><span class="wdn-text-hidden">Share This Page</span></button>
 </div>
diff --git a/wdn/templates_4.1/less/all.less b/wdn/templates_4.1/less/all.less
@@ -12,6 +12,7 @@
 
 // Set the layouts
 @import "layouts/wrapper.less";
+@import "layouts/wdn-ui.less";
 @import "layouts/share.less";
 @import "layouts/navigation.less";
 @import "layouts/breadcrumbs.less";

diff --git a/wdn/templates_4.1/less/layouts/idm.less b/wdn/templates_4.1/less/layouts/idm.less
@@ -87,12 +87,11 @@
     display: block;
     .is-hidden();
 	position: absolute;
-	top: 45px;
+	top: 46px;
 	right: @page-offset-default;
-	width: 160px;
 	padding: 1.069em 2.369em;
+	white-space: nowrap;
 	border-radius: 3px;
-	background-color: @ui12;
 	background-color: fadeout(@ui12, 3%);
     text-align: left;
     .rem(11,12);
@@ -110,11 +109,11 @@
     }
 
     @media @bp-nav-full {
-	    top: 36px;
+	    top: 37px;
     }
 
     @media @bp768 {
-	    top: 45px;
+	    top: 47px;
     }
 
 	&:before {
@@ -126,7 +125,6 @@
         height: 0;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
-        border-bottom: 6px solid @ui10;
         border-bottom: 6px solid fadeout(@ui10, 3%);
     }
 

diff --git a/wdn/templates_4.1/less/layouts/navigation.less b/wdn/templates_4.1/less/layouts/navigation.less
@@ -22,43 +22,60 @@
 		align-items: center;
         .nav-bar();
         height: 40px;
-    }
 
-    @media @bp-nav-full {
-        .wdn-icon-menu {
-            display: none;
+        //Prevent jumping buttons on mobile page load (this will display the old label as it is being replaced by a button)
+        label.wdn-icon-menu {
+            width: 1.333em;
+            font-size: 1.333rem;
+            margin-left: 5%;
+
+            &:before {
+                padding-right: 1em;
+            }
+        }
+
+        button.wdn-nav-toggle .wdn-icon-menu {
+            margin-right: .33em;
         }
     }
+
 }
 
 // Shared styles for Menu & Share icons
 .wdn-nav-icon() {
     white-space: nowrap;
     overflow: hidden;
-    line-height: 1;
-    cursor: pointer;
-    padding: 9px 0;
     color: #fff;
 
     &:before { // Show the navigation icon
-       padding-right: 1em;
+        margin: 0;
+        padding: 0;
     }
 }
 
 .wdn-icon-menu { // Hide the label text off screen
     .wdn-nav-icon();
     position: relative;
-    float: left;
-    width: 1.333em;
-	.inner-wrapper-margin-left();
     font-size: 21px;
     font-size: 1.333rem;
 }
 
-#wdn_navigation_wrapper {
+.wdn-nav-toggle {
+	.inner-wrapper-margin-left();
+    padding: 0;
+    z-index: @nav-z-index + 1;
+    overflow: hidden;
+    line-height: 1;
+	border: none;
+	background-color: transparent;
 
     @media @bp-nav-hidden {
-        margin-top: 1em;
+    	height: 40px;
+    }
+
+    @media @bp-nav-full {
+        position: absolute;
+        top: 24px;
     }
 }
 
@@ -190,7 +207,6 @@
             li {
                 width: 100%;
                 padding: 0;
-                border-bottom: 1px solid #c00808;
                 border-bottom: 1px solid fadeout(#000,94%);
 
                 &:last-child {
@@ -223,12 +239,10 @@
 			padding: 0 1.777em;
 
             > li {
-                border-right: 1px solid #b80808;
                 border-right: 1px solid fadeout(#000,90%);
                 line-height: 1;
 
                 &:first-child {
-                    border-left: 1px solid #b80808;
                     border-left: 1px solid fadeout(#000,90%);
                 }
 
@@ -252,6 +266,10 @@
             }
         }
     }
+
+    label {
+        display: none; //BC fix, prevent duplicate nav buttons after change to buttons if includes are not yet updated
+    }
 }
 
 .wdn-content-slide {

diff --git a/wdn/templates_4.1/less/layouts/search.less b/wdn/templates_4.1/less/layouts/search.less
@@ -4,7 +4,7 @@
 
     @media @bp-nav-hidden {
         position: absolute;
-        bottom: -0.802em;
+        bottom: 0;
         left: 0;
         width: 100%;
         .inner-wrapper-margin-left();
@@ -21,7 +21,7 @@
 	    .flexbox & {
     	    clear: right;
     	    display: flex;
-    	    flex: row nowrap;
+    	    flex-flow: row nowrap;
     	    align-items: center;
     	    margin: 0;
 	    }
@@ -77,15 +77,7 @@
         }
     }
 
-    label {
-        line-height: 1;
-
-        @media @bp-nav-hidden {
-            color: #fff;
-        }
-    }
-
-    button {
+    form button {
         display: block;
         position: absolute;
         z-index: 1;
@@ -113,24 +105,32 @@
     }
 }
 
-#wdn_search_toggle,
 #wdn_search_toggle_label {
 
+
     @media @bp-nav-hidden {
         position: absolute;
 	    left: 2.369em;
-	    cursor: pointer;
+        height: 40px;
+        padding: 0;
+        .rem(16);
+        color: #fff;
+
+        .wdn-icon-search {
+            display: block;
+            transform: translateY(-1px);
+
+            &:before {
+                margin-right: 0;
+            }
+        }
     }
 
     @media @bp-nav-full {
         display: none;
     }
 }
 
-#wdn_search_toggle_label {
-    .rem(16);
-}
-
 #wdn_search_form {
     z-index: 1; // Ensure we're above the site title
     top: 0.75em;
@@ -139,7 +139,7 @@
         display: block;
         .is-hidden();
     	position: absolute;
-    	top: 34px;
+    	top: 46px;
     	left: 0;
     	width: 90%; // 100% - 5% inner wrapper margin on each side
     	padding: 1.069em 2.369em 1.777em;