V8: Accessibility improvements for top header (#5544)

umbraco · Jun 23, 2019 · 4fca0bb · 4fca0bb
1 parent 4c443b9
commit 4fca0bb
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 14 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less b/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less
@@ -0,0 +1,11 @@
+
+// Visually Hidden - used to remove an element from the view, whilst retaining accessibily for screen readers. More info available at https://a11yproject.com/posts/how-to-hide-content/
+// --------------------------------------------------
+
+.visually-hidden {
+    position: absolute !important;
+    height: 1px; 
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -80,6 +80,9 @@
 
 @import "forms/umb-validation-label.less";
 
+// Umbraco Accessibility
+@import "accessibility/visually-hidden.less";
+
 // Umbraco Components
 @import "components/application/umb-app-header.less";
 @import "components/application/umb-app-content.less";

diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less
@@ -67,6 +67,21 @@
     border-color: rgba(0,0,0,0.09);
 }
 
+// Button Reset - remove the default browser styles from the button element
+// --------------------------------------------------
+
+.btn-reset {
+	padding: 0;
+	margin: 0;
+	border: none;
+    background: none;
+	color: currentColor;
+    font-family: @baseFontFamily;
+    font-size: @baseFontSize;
+    line-height: @baseLineHeight;
+	cursor: pointer;
+}
+
 // Button Sizes
 // --------------------------------------------------
 

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
@@ -16,27 +16,26 @@
     margin-right: -10px;
 }
 
-.umb-app-header__action a {
+.umb-app-header__button {
     padding-left: 10px;
     padding-right: 10px;
     text-decoration: none;
     display: flex;
     align-items: center;
     height: @appHeaderHeight;
-}
-
-.umb-app-header__action a {
     outline: none;
+
     &:focus {
         .tabbing-active & {
             .umb-app-header__action-icon::after {
                 content: '';
                 position: absolute;
                 z-index:10000;
-                top: -7px;
-                left: -7px;
+                top: 50%;
+                left: 50%;
                 width: 36px;
                 height: 35px;
+                transform: translate(-50%, -50%);
                 border-radius: 3px;
                 box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight;
             }
@@ -51,7 +50,7 @@
     font-size: 22px;
 }
 
-.umb-app-header__action a:hover .umb-app-header__action-icon,
-.umb-app-header__action a:focus .umb-app-header__action-icon {
+.umb-app-header__button:hover .umb-app-header__action-icon,
+.umb-app-header__button:focus .umb-app-header__action-icon {
     opacity: 1;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
@@ -1,3 +1,4 @@
+
 <div>
 
     <div class="umb-app-header">
@@ -10,25 +11,28 @@
         <div class="flex items-center">
             <ul class="umb-app-header__actions">
                 <li data-element="global-search" class="umb-app-header__action">
-                    <a href="#" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" prevent-default style="font-size: 20px;">
+                    <button class="umb-app-header__button btn-reset" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" prevent-default style="font-size: 20px;">
+                        <span class="visually-hidden">Open/Close backoffice search</span>
                         <i class="umb-app-header__action-icon icon-search"></i>
-                    </a>
+                    </button>
                 </li>
                 <li data-element="global-help" class="umb-app-header__action">
-                    <a href="#" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
+                    <button class="umb-app-header__button btn-reset" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
+                        <span class="visually-hidden">Open/Close backoffice help window</span>
                         <i class="umb-app-header__action-icon icon-help-alt"></i>
-                    </a>
+                    </button>
                 </li>
                 <li data-element="global-user" class="umb-app-header__action">
-                    <a href="#" hotkey="ctrl+shift+u" ng-click="avatarClick()" prevent-default title="{{user.name}}" >
+                   <button class="umb-app-header__button btn-reset" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" aria-label="Open/Close your profile options window" prevent-default>
                         <umb-avatar
+                            class="umb-app-header__action-icon"
                             size="xxs"
                             color="secondary"
                             name="{{user.name}}"
                             img-src="{{avatar[0].value}}"
                             img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
                         </umb-avatar>
-                    </a>
+                    </button>
                 </li>
             </ul>
         </div>