Accessibility: Open User Details - Back icon arrow is identifie… (#5970)

umbraco · Aug 14, 2019 · 8d0df6c · 8d0df6c
1 parent 5997e0c
commit 8d0df6c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 7 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -74,8 +74,11 @@
 }
 
 .umb-editor-header__back {
-	color: @gray-6;
-    margin-bottom: 1px;
+    background: transparent;
+    border: 0;
+    color: @gray-6;
+    margin: 0 0 1px 0;
+    padding: 0;
 	transition: color 0.1s ease-in-out;
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -3,9 +3,10 @@
     <div class="flex items-center" style="height: 100%;">
 
         <div ng-if="showBackButton === true && splitViewOpen !== true" style="margin-right: 15px;">
-            <a class="umb-editor-header__back" href="#" ng-click="goBack()" prevent-default>
+            <button type="button" class="umb-editor-header__back" ng-click="goBack()" prevent-default>
                 <i class="fa fa-arrow-left" aria-hidden="true"></i>
-            </a>
+                <span class="sr-only"><localize key="visuallyHiddenTexts_goBack">Go back</localize></span>
+            </button>
         </div>
 
         <div class="flex items-center" style="flex: 1;">

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -3,9 +3,10 @@
     <div class="flex items-center" style="height: 100%;">
 
         <div ng-if="showBackButton === true && splitViewOpen !== true" style="margin-right: 15px;">
-            <a class="umb-editor-header__back" href="#" ng-click="goBack()" prevent-default>
+            <button type="button" class="umb-editor-header__back" ng-click="goBack()" prevent-default>
                 <i class="fa fa-arrow-left" aria-hidden="true"></i>
-            </a>
+                <span class="sr-only"><localize key="visuallyHiddenTexts_goBack">Go back</localize></span>
+            </button>
         </div>
 
         <div class="flex items-center" style="flex: 1;">

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1610,4 +1610,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="memberIntro">Kom godt i gang</key>
     <key alias="formsInstall">Installer Umbraco Forms</key>
   </area>
+  <area alias="visuallyHiddenTexts">
+    <key alias="goBack">Gå tilbage</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
@@ -2127,5 +2127,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="settingsProfiler">Profiling</key>
     <key alias="memberIntro">Getting Started</key>
     <key alias="formsInstall">Install Umbraco Forms</key>
-  </area>>
+  </area>
+  <area alias="visuallyHiddenTexts">
+    <key alias="goBack">Go back</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
@@ -2142,4 +2142,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="memberIntro">Getting Started</key>
     <key alias="formsInstall">Install Umbraco Forms</key>
   </area>
+  <area alias="visuallyHiddenTexts">
+    <key alias="goBack">Go back</key>
+  </area>
 </language>