Accessibility: No alt text on any icons (#5905)

umbraco · Sep 5, 2019 · 5def93f · 5def93f
1 parent a68bc34
commit 5def93f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 17 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
@@ -2,12 +2,16 @@
     position: relative;
     display: block;
 }
+
+.umb-sub-views-nav-item__action,
 .umb-sub-views-nav-item > a {
+  background: transparent;
   text-align: center;
   cursor: pointer;
   display: block;
   padding: 4px 10px 0 10px;
   min-width: 70px;
+  border: 0 none;
   border-right: 1px solid @gray-9;
   box-sizing: border-box;
   display: flex;
@@ -19,6 +23,7 @@
 
   color: @ui-active-type;
 
+  &:focus,
   &:hover {
       color: @ui-active-type-hover !important;
   }
@@ -37,18 +42,23 @@
   }
 }
 
+.umb-sub-views-nav-item__action:focus,
+.umb-sub-views-nav-item__action:active,
 .umb-sub-views-nav-item > a:active {
   .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
 }
+.umb-sub-views-nav-item__action:focus,
 .umb-sub-views-nav-item > a:focus {
   outline: none;
 }
 
+.umb-sub-views-nav-item__action:hover,
+.umb-sub-views-nav-item__action:focus,
 .umb-sub-views-nav-item > a:hover,
 .umb-sub-views-nav-item > a:focus {
   text-decoration: none;
 }
-
+.umb-sub-views-nav-item__action.is-active,
 .umb-sub-views-nav-item > a.is-active {
 
     color: @ui-light-active-type;
@@ -59,6 +69,7 @@
     }
 }
 
+.umb-sub-views-nav-item__action.-has-error,
 .show-validation .umb-sub-views-nav-item > a.-has-error {
   color: @red;
   &::after {
@@ -114,24 +125,40 @@
     // center align horizontal
     left: 50%;
     transform: translateX(-50%);
-
-    visibility:hidden;
     opacity: 0;
-    transition: visibility 0s 500ms, opacity 250ms 250ms;
+    transition: opacity 250ms 250ms;
 }
+
+// Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76
+// See https://caniuse.com/#search=focus-within
+@supports (-ms-ime-align:auto) { 
+    .umb-sub-views-nav-item__anchor_dropdown {
+        visibility: hidden;
+        transition: visibility 0 500ms, opacity 250ms 250ms;
+    }
+}
+
 .umb-sub-views-nav-item__anchor_dropdown li a {
     border-left: 4px solid transparent;
 }
 .umb-sub-views-nav-item__anchor_dropdown li.is-active a {
     border-left-color: @ui-selected-border;
 }
 
+.umb-sub-views-nav-item:focus-within .umb-sub-views-nav-item__anchor_dropdown,
 .umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown {
     visibility:visible;
     opacity: 1;
-    transition: visibility 0s 0s, opacity 20ms 0s;
+    transition: opacity 20ms 0;
 }
 
+// Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76
+// See https://caniuse.com/#search=focus-within
+@supports (-ms-ime-align:auto) { 
+    .umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown {
+        transition: visibility 0 0, opacity 20ms 0;
+    }
+}
 
 
 // --------------------------------

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
@@ -3,7 +3,7 @@
         <div class="umb-group-panel" retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)" data-app-anchor="{{group.id}}" data-element="group-{{group.alias}}" ng-repeat="group in content.tabs track by group.label">
 
             <div class="umb-group-panel__header">
-                <div>{{ group.label }}</div>
+                <div id="group-{{group.id}}">{{ group.label }}</div>
             </div>
 
             <div class="umb-group-panel__content">

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
@@ -1,19 +1,19 @@
-<a data-element="sub-view-{{vm.item.alias}}"
-   tabindex="-1"
-   ng-href=""
+<button data-element="sub-view-{{vm.item.alias}}"
+   type="button"
    ng-click="vm.clicked()"
    hotkey="{{::vm.hotkey}}"
    hotkey-when-hidden="true"
-   ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}">
-    <i class="icon {{ vm.item.icon }}"></i>
+   ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}"
+   class="umb-sub-views-nav-item__action">
+    <i class="icon {{ vm.item.icon }}" aria-hidden="true"></i>
     <span class="umb-sub-views-nav-item-text">{{ vm.item.name }}</span>
     <div ng-show="vm.item.badge" class="badge -type-{{vm.item.badge.type}}">{{vm.item.badge.count}}</div>
-</a>
+</button>
 
 <ul class="dropdown-menu umb-sub-views-nav-item__anchor_dropdown" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
     <li ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
-        <a href="" ng-click="vm.anchorClicked(anchor, $event)">
-            {{anchor.label}}
+        <a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default>
+            <span class="sr-only"><localize key="visuallyHiddenTexts_jumpTo">Jump to</localize></span> {{anchor.label}} <span class="sr-only"><localize key="visuallyHiddenTexts_group"> group</localize></span>
         </a>
     </li>
 </ul>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1614,6 +1614,8 @@ Mange hilsner fra Umbraco robotten
   </area>
   <area alias="visuallyHiddenTexts">
     <key alias="goBack">Gå tilbage</key>
-    <key alias="activeListLayout">Aktivt layout:</key>
+    <key alias="activeListLayout">Aktivt layout:</key>
+    <key alias="jumpTo">Gå til</key>
+    <key alias="group">gruppe</key>    
   </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2132,6 +2132,8 @@ To manage your website, simply open the Umbraco back office and start adding con
   </area>
   <area alias="visuallyHiddenTexts">
     <key alias="goBack">Go back</key>
-    <key alias="activeListLayout">Active layout:</key>
+    <key alias="activeListLayout">Active layout:</key>
+    <key alias="jumpTo">Jump to</key>
+    <key alias="group">group</key>    
   </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2146,6 +2146,8 @@ To manage your website, simply open the Umbraco back office and start adding con
   </area>
   <area alias="visuallyHiddenTexts">
     <key alias="goBack">Go back</key>
-    <key alias="activeListLayout">Active layout:</key>
+    <key alias="activeListLayout">Active layout:</key>
+    <key alias="jumpTo">Jump to</key>
+    <key alias="group">group</key>    
   </area>
 </language>