From a70f95b4e563e8468f033c675d2537728bb8217c Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Tue, 23 Jun 2020 18:12:24 +0200
Subject: [PATCH] Sort dialog: Accessibility optimizations (#8156)

---
 src/Umbraco.Web.UI.Client/src/less/main.less  |  8 +++-
 .../src/views/content/sort.html               | 42 +++++++++----------
 .../src/views/media/sort.html                 | 30 +++++++------
 3 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index b34f313435..ee8dafebc2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -347,10 +347,16 @@ label:not([for]) {
   border: none !important;
 }
 
-table thead a {
+table thead a,
+table thead button {
   color: @gray-2;
 }
 
+table thead button:hover,
+table thead button:focus{
+    text-decoration: underline;
+}
+
 /* UI interactions */
 
 .umb-table tbody.ui-sortable tr
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/sort.html b/src/Umbraco.Web.UI.Client/src/views/content/sort.html
index 471f3de956..e6cc58c8be 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/sort.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/sort.html
@@ -1,37 +1,35 @@
 <div ng-controller="Umbraco.Editors.Content.SortController as vm" ng-cloak>
-    
+
         <div class="umb-dialog-body with-footer sort-order">
-            
+
             <div class="umb-pane">
 
-                <div ng-if="vm.error">
-                    <div class="alert alert-error">
-                        <div>{{vm.error.errorMsg}}</div>
-                    </div>
+                <div ng-if="vm.error" class="alert alert-error">
+                    <p>{{vm.error.errorMsg}}</p>
                 </div>
-    
+
                 <umb-load-indicator
                     ng-show="vm.loading">
                 </umb-load-indicator>
-    
+
                 <div ng-if="!vm.loading">
-                    <p class="abstract"><localize key="sort_sortHelp"></localize></p>
+                    <p class="abstract"><localize key="sort_sortHelp">Drag the different items up or down below to set how they should be arranged. Or click the column headers to sort the entire collection of items</localize></p>
                     <table class="table table-condensed table-sortable" ng-if="vm.children">
                         <thead>
                             <tr>
                                 <th colspan="2">
-                                    <a ng-href="#" ng-click="vm.sort('name')" prevent-default>
-                                        <localize key="general_name"></localize>
-                                        <span ng-if="vm.sortOrder.column === 'name'">
+                                    <button type="button" class="btn-reset" ng-click="vm.sort('name')">
+                                        <b><localize key="general_name">Name</localize></b>
+                                        <span ng-if="vm.sortOrder.column === 'name'" aria-hidden="true">
                                             <i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
                                             <i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
                                         </span>
-                                    </a>
+                                    </button>
                                 </th>
                                 <th>
-                                    <a ng-href="#" ng-click="vm.sort('createDate')" prevent-default>
-                                        <localize key="sort_sortCreationDate"></localize>
-                                        <span ng-if="vm.sortOrder.column === 'createDate'">
+                                    <button type="button" class="btn-reset" ng-click="vm.sort('createDate')">
+                                        <b><localize key="sort_sortCreationDate">Creation date</localize></b>
+                                        <span ng-if="vm.sortOrder.column === 'createDate'" aria-hidden="true">
                                             <i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
                                             <i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
                                         </span>
@@ -51,14 +49,14 @@
                     <umb-empty-state
                         ng-if="!vm.children"
                         position="center">
-                        <localize key="sort_sortEmptyState"></localize>
+                        <localize key="sort_sortEmptyState">This node has no child nodes to sort</localize>
                     </umb-empty-state>
                 </div>
-    
+
             </div>
-    
+
         </div>
-    
+
         <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
             <umb-button
                 type="button"
@@ -68,12 +66,12 @@
             </umb-button>
             <umb-button
                 ng-if="vm.children"
-                type="button" 
+                type="button"
                 action="vm.save()"
                 state="vm.saveButtonState"
                 button-style="success"
                 label-key="buttons_save">
             </umb-button>
         </div>
-    
+
     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/media/sort.html b/src/Umbraco.Web.UI.Client/src/views/media/sort.html
index b893517f1c..a483e9c7dc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/media/sort.html
+++ b/src/Umbraco.Web.UI.Client/src/views/media/sort.html
@@ -1,13 +1,11 @@
 <div ng-controller="Umbraco.Editors.Media.SortController as vm" ng-cloak>
-    
+
     <div class="umb-dialog-body with-footer sort-order">
-        
+
         <div class="umb-pane">
 
-            <div ng-if="vm.error">
-                <div class="alert alert-error">
-                    <div>{{vm.error.errorMsg}}</div>
-                </div>
+            <div ng-if="vm.error" class="alert alert-error">
+                <p>{{vm.error.errorMsg}}</p>
             </div>
 
             <umb-load-indicator
@@ -15,27 +13,27 @@
             </umb-load-indicator>
 
             <div ng-if="!vm.loading">
-                <p class="abstract"><localize key="sort_sortHelp"></localize></p>
+                <p class="abstract"><localize key="sort_sortHelp">Drag the different items up or down below to set how they should be arranged. Or click the column headers to sort the entire collection of items</localize></p>
                 <table class="table table-condensed table-sortable" ng-if="vm.children">
                     <thead>
                         <tr>
                             <th colspan="2">
-                                <a ng-href="#" ng-click="vm.sort('name')" prevent-default>
-                                    <localize key="general_name"></localize>
-                                    <span ng-if="vm.sortOrder.column === 'name'">
+                                <button type="button" class="btn-reset" ng-click="vm.sort('name')">
+                                    <b><localize key="general_name">Name</localize></b>
+                                    <span ng-if="vm.sortOrder.column === 'name'" aria-hidden="true">
                                         <i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
                                         <i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
                                     </span>
-                                </a>
+                                </button>
                             </th>
                             <th>
-                                <a ng-href="#" ng-click="vm.sort('createDate')" prevent-default>
-                                    <localize key="sort_sortCreationDate"></localize>
-                                    <span ng-if="vm.sortOrder.column === 'createDate'">
+                                <button type="button" class="btn-reset" ng-click="vm.sort('createDate')">
+                                    <b><localize key="sort_sortCreationDate">Creation date</localize></b>
+                                    <span ng-if="vm.sortOrder.column === 'createDate'" aria-hidden="true">
                                         <i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
                                         <i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
                                     </span>
-                                </a>
+                                </button>
                             </th>
                         </tr>
                     </thead>
@@ -68,7 +66,7 @@
         </umb-button>
         <umb-button
             ng-if="vm.children"
-            type="button" 
+            type="button"
             action="vm.save()"
             state="vm.saveButtonState"
             button-style="success"