Health Check - Text alternatives for icons missing (In Groups) (#6453)

umbraco · Sep 26, 2019 · d67a891 · d67a891
1 parent 6beb844
commit d67a891
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/dashboards/healthcheck.less b/src/Umbraco.Web.UI.Client/src/less/dashboards/healthcheck.less
@@ -120,7 +120,10 @@
 /* DETAILS */
 
 .umb-healthcheck-back-link {
-	font-weight: bold;
+    background: transparent;
+    border: 0 none;
+    padding: 0;
+    font-weight: bold;
 	color: @black;
 }
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/healthcheck.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/healthcheck.html
@@ -82,7 +82,9 @@ <h3 class="bold">Health Check</h3>
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-healthcheck-back-link" href="" ng-click="vm.setViewState('list');">&larr; Back to overview</a>
+                <button type="button" class="umb-healthcheck-back-link" ng-click="vm.setViewState('list');">
+                    <span aria-hidden="true">&larr;</span> Back to overview
+                </button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 
@@ -111,7 +113,7 @@ <h3 class="bold">Health Check</h3>
 
                         <div class="umb-panel-group__details-status" ng-repeat="status in check.status">
 
-                            <div class="umb-panel-group__details-status-icon-container">
+                            <div class="umb-panel-group__details-status-icon-container" aria-hidden="true">
                                 <i class="umb-healthcheck-status-icon icon-check color-green" ng-if="status.resultType === 0"></i>
                                 <i class="umb-healthcheck-status-icon icon-alert icon-alert color-yellow" ng-if="status.resultType === 1"></i>
                                 <i class="umb-healthcheck-status-icon icon-delete icon-delete color-red" ng-if="status.resultType === 2"></i>
@@ -121,6 +123,18 @@ <h3 class="bold">Health Check</h3>
                             <div class="umb-panel-group__details-status-content">
 
                                 <div class="umb-panel-group__details-status-text">
+                                    <span class="sr-only" ng-if="status.resultType === 0">
+                                        <localize key="visuallyHiddenTexts_checkPassed">Check passed</localize>:
+                                    </span>
+                                    <span class="sr-only" ng-if="status.resultType === 1">
+                                        <localize key="visuallyHiddenTexts_warning">warning</localize>:
+                                    </span>
+                                    <span class="sr-only" ng-if="status.resultType === 2">
+                                        <localize key="visuallyHiddenTexts_checkFailed">Check failed</localize>:
+                                    </span>
+                                    <span class="sr-only" ng-if="status.resultType === 3">
+                                        <localize key="visuallyHiddenTexts_suggestion">suggestion</localize>:
+                                    </span>
                                     <div ng-bind-html="status.message"></div>
                                     <div ng-if="status.description" ng-bind-html="status.description"></div>
                                 </div>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1626,5 +1626,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="warning">advarsel</key>
     <key alias="failed">fejlet</key>
     <key alias="suggestion">forslag</key>
+    <key alias="checkPassed">Test bestået</key>
+    <key alias="checkFailed">Test fejlet</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
@@ -2143,6 +2143,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="passed">passed</key>
     <key alias="warning">warning</key>
     <key alias="failed">failed</key>
-    <key alias="suggestion">suggestion</key>
+    <key alias="suggestion">suggestion</key>
+    <key alias="checkPassed">Check passed</key>
+    <key alias="checkFailed">Check failed</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
@@ -2158,5 +2158,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="warning">warning</key>
     <key alias="failed">failed</key>
     <key alias="suggestion">suggestion</key>
+    <key alias="checkPassed">Check passed</key>
+    <key alias="checkFailed">Check failed</key>
   </area>
 </language>