From 2e1cf6b46de0bfe3c030de8fcf8f41d789d6f510 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Wed, 17 Jul 2019 21:51:28 +0200
Subject: [PATCH 1/2] Add a button element so the different health checks can
 be navigated by keyboard - Also fixing the styling accordingly

---
 .../src/less/dashboards/healthcheck.less      |  9 ++-
 .../views/dashboard/settings/healthcheck.html | 58 +++++++++----------
 2 files changed, 35 insertions(+), 32 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
index 449cc4066b06..b3af47640643 100644
--- a/src/Umbraco.Web.UI.Client/src/less/dashboards/healthcheck.less
+++ b/src/Umbraco.Web.UI.Client/src/less/dashboards/healthcheck.less
@@ -22,15 +22,18 @@
 .umb-healthcheck-group {
 	display: flex;
 	flex-wrap: wrap;
-	flex-direction: column;
-	background: @white;
+    flex-direction: column;
+    align-items: center;
+    background: @white;
+    border: 0;
 	border-radius: 3px;
 	padding: 20px;
 	box-sizing: border-box;
 	text-align: center;
 	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
 	height: 100%;
-	box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
 }
 
 .umb-healthcheck-group:hover {
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
index 1f81bfc6e2fc..07199ff0edcc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/healthcheck.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/healthcheck.html
@@ -1,19 +1,19 @@
 <div ng-controller="Umbraco.Dashboard.HealthCheckController as vm">
 
     <div ng-if="vm.viewState === 'list'">
-        
+
         <umb-box>
             <umb-box-content>
                 <div class="flex justify-between items-center">
                     <h3 class="bold">Health Check</h3>
                     <umb-button
                         type="button"
-                        button-style="success" 
+                        button-style="success"
                         label="Check All Groups"
                         action="vm.checkAllGroups(vm.groups)">
                     </umb-button>
                 </div>
-        
+
                 <div class="umb-healthcheck-help-text">
                     <p>The health checker evaluates various areas of your site for best practice settings, configuration, potential problems, etc. You can easily fix problems by pressing a button.
                     You can add your own health checks, have a look at <a href="https://our.umbraco.com/documentation/Extending/Healthcheck/" target="_blank" class="btn-link -underline">the documentation for more information</a> about custom health checks.</p>
@@ -23,40 +23,40 @@ <h3 class="bold">Health Check</h3>
 
         <div class="umb-healthcheck">
 
-            <div class="umb-air" ng-repeat="group in vm.groups" ng-click="vm.openGroup(group);">
-                <div class="umb-healthcheck-group">
+            <div class="umb-air" ng-repeat="group in vm.groups">
+                <button type="button" class="umb-healthcheck-group" ng-click="vm.openGroup(group);">
 
-                    <div class="umb-healthcheck-title">{{group.name}}</div>
+                        <div class="umb-healthcheck-title">{{group.name}}</div>
 
-                    <div class="umb-healthcheck-group__load-container" ng-if="group.loading">
-                        <umb-load-indicator></umb-load-indicator>
-                    </div>
+                        <div class="umb-healthcheck-group__load-container" ng-if="group.loading">
+                            <umb-load-indicator></umb-load-indicator>
+                        </div>
 
-                    <div class="umb-healthcheck-messages" ng-hide="group.loading || !group.totalSuccess && !group.totalWarning && !group.totalError && !group.totalInfo">
+                        <div class="umb-healthcheck-messages" ng-hide="group.loading || !group.totalSuccess && !group.totalWarning && !group.totalError && !group.totalInfo">
 
-                        <div class="umb-healthcheck-message" ng-if="group.totalSuccess > 0">
-                            <i class="icon-check color-green"></i>
-                            {{ group.totalSuccess }}
-                        </div>
+                            <div class="umb-healthcheck-message" ng-if="group.totalSuccess > 0">
+                                <i class="icon-check color-green"></i>
+                                {{ group.totalSuccess }}
+                            </div>
 
-                        <div class="umb-healthcheck-message" ng-if="group.totalWarning > 0">
-                            <i class="icon-alert color-orange"></i>
-                            {{ group.totalWarning }}
-                        </div>
+                            <div class="umb-healthcheck-message" ng-if="group.totalWarning > 0">
+                                <i class="icon-alert color-orange"></i>
+                                {{ group.totalWarning }}
+                            </div>
 
-                        <div class="umb-healthcheck-message" ng-if="group.totalError > 0">
-                            <i class="icon-delete color-red"></i>
-                            {{ group.totalError }}
-                        </div>
+                            <div class="umb-healthcheck-message" ng-if="group.totalError > 0">
+                                <i class="icon-delete color-red"></i>
+                                {{ group.totalError }}
+                            </div>
 
-                        <div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
-                            <i class="umb-healthcheck-status-icon icon-info"></i>
-                            {{ group.totalInfo }}
-                        </div>
+                            <div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
+                                <i class="umb-healthcheck-status-icon icon-info"></i>
+                                {{ group.totalInfo }}
+                            </div>
 
-                    </div>
+                        </div>
 
-                </div>
+                </button>
             </div>
 
         </div>
@@ -79,7 +79,7 @@ <h3 class="bold">Health Check</h3>
                 <div class="umb-panel-group__details-group-title">
                     <div class="umb-panel-group__details-group-name">{{ vm.selectedGroup.name }}</div>
                     <umb-button
-                        type="button" 
+                        type="button"
                         action="vm.checkAllInGroup(vm.selectedGroup, vm.selectedGroup.checks)"
                         label="Check group">
                     </umb-button>

From 9226f47da14ddeaf9e5239b2ed381bd9e95f274b Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Wed, 17 Jul 2019 22:15:43 +0200
Subject: [PATCH 2/2] Hide the icons from screen readers

---
 .../src/views/dashboard/settings/healthcheck.html         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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
index 07199ff0edcc..67d8562f7e82 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/healthcheck.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/healthcheck.html
@@ -35,22 +35,22 @@ <h3 class="bold">Health Check</h3>
                         <div class="umb-healthcheck-messages" ng-hide="group.loading || !group.totalSuccess && !group.totalWarning && !group.totalError && !group.totalInfo">
 
                             <div class="umb-healthcheck-message" ng-if="group.totalSuccess > 0">
-                                <i class="icon-check color-green"></i>
+                                <i class="icon-check color-green" aria-hidden="true"></i>
                                 {{ group.totalSuccess }}
                             </div>
 
                             <div class="umb-healthcheck-message" ng-if="group.totalWarning > 0">
-                                <i class="icon-alert color-orange"></i>
+                                <i class="icon-alert color-orange" aria-hidden="true"></i>
                                 {{ group.totalWarning }}
                             </div>
 
                             <div class="umb-healthcheck-message" ng-if="group.totalError > 0">
-                                <i class="icon-delete color-red"></i>
+                                <i class="icon-delete color-red" aria-hidden="true"></i>
                                 {{ group.totalError }}
                             </div>
 
                             <div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
-                                <i class="umb-healthcheck-status-icon icon-info"></i>
+                                <i class="umb-healthcheck-status-icon icon-info" aria-hidden="true"></i>
                                 {{ group.totalInfo }}
                             </div>