Accessibility: Health Check - unable to navigate to additional option…

…s via keyboard (#5928)
umbraco · Sep 5, 2019 · 626c6ba · 626c6ba
1 parent 428da6c
commit 626c6ba
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 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
@@ -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
@@ -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" aria-hidden="true"></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" aria-hidden="true"></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" 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>
-                            {{ group.totalInfo }}
-                        </div>
+                            <div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
+                                <i class="umb-healthcheck-status-icon icon-info" aria-hidden="true"></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>