From 161faec2b1fa43f8cec3f154f505e132c1b9b6e2 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Mon, 6 Jan 2020 22:27:36 +0100
Subject: [PATCH] User group picker: Fix accessibility issues (#6994)

---
 .../users/umb-user-group-picker-list.less     | 14 +++++--
 .../usergrouppicker/usergrouppicker.html      | 37 +++++++++++--------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  1 +
 .../Umbraco/config/lang/en_us.xml             |  1 +
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less
index dff78ce627..0a06120b11 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-picker-list.less
@@ -7,11 +7,17 @@
     display: flex;
     margin-bottom: 5px;
     padding: 10px;
+    position: relative;
 }
 
-.umb-user-group-picker-list-item:active,
-.umb-user-group-picker-list-item:focus {
-    text-decoration: none;
+.umb-user-group-picker__action{
+    background: transparent;
+    border: 0 none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .umb-user-group-picker-list-item:hover {
@@ -35,4 +41,4 @@
 .umb-user-group-picker-list-item__permission {
     font-size: 13px;
     color: @gray-4;
-}
\ No newline at end of file
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
index e2ae1ab524..b82b919f9f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
@@ -13,10 +13,10 @@
         <umb-editor-container>
 
             <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
-                
+
             <umb-box>
                 <umb-box-content>
-                
+
                     <div class="form-search" style="margin-bottom: 15px;">
                         <i class="icon-search"></i>
                         <input type="text"
@@ -27,26 +27,31 @@
                                 umb-auto-focus
                                 no-dirty-check />
                     </div>
-                
+
                     <div class="umb-user-group-picker-list">
-            
-                        <a href="" class="umb-user-group-picker-list-item" ng-repeat="userGroup in vm.userGroups | filter:searchTerm" ng-click="vm.selectUserGroup(userGroup)">
-            
+
+                        <div class="umb-user-group-picker-list-item" ng-repeat="userGroup in vm.userGroups | filter:searchTerm">
+
+                            <button type="button" class="umb-user-group-picker__action" ng-click="vm.selectUserGroup(userGroup)">
+                                <span class="sr-only" ng-if="!userGroup.selected"><localize key="buttons_select">Select</localize> {{userGroup.name}}</span>
+                                <span class="sr-only" ng-if="userGroup.selected">{{userGroup.name}} <localize key="general_selected">Selected</localize></span>
+                            </button>
+
                             <div class="umb-user-group-picker-list-item__icon">
-                                <i ng-if="!userGroup.selected" class="{{userGroup.icon}}"></i>
+                                <i ng-if="!userGroup.selected" class="{{userGroup.icon}}" aria-hidden="true"></i>
                                 <umb-checkmark ng-if="userGroup.selected" checked="userGroup.selected" size="xs"></umb-checkmark>
                             </div>
-            
+
                             <div>
                                 <div class="umb-user-group-picker-list-item__name">{{ userGroup.name }}</div>
-            
+
                                 <div class="umb-user-group-picker-list-item__permission" ng-if="userGroup.sections">
                                     <span>
                                         <span class="bold"><localize key="main_sections">Sections</localize>:</span>
                                         <span ng-repeat="section in userGroup.sections">{{ section.name }}<span ng-if="!$last">, </span></span>
                                     </span>
                                 </div>
-            
+
                                 <div class="umb-user-group-picker-list-item__permission">
                                     <span>
                                         <span class="bold"><localize key="user_startnode">Content start node</localize>:</span>
@@ -54,7 +59,7 @@
                                         <span ng-if="userGroup.contentStartNode">{{ userGroup.contentStartNode.name }}</span>
                                     </span>
                                 </div>
-            
+
                                 <div class="umb-user-group-picker-list-item__permission">
                                     <span>
                                         <span class="bold"><localize key="user_mediastartnode">Media start node</localize>:</span>
@@ -63,16 +68,16 @@
                                     </span>
                                 </div>
                             </div>
-                        </a>
-            
+                        </div>
+
                     </div>
-                
+
                     <umb-empty-state
                         ng-if="vm.userGroups.length === 0 && !vm.loading"
                         position="center">
-                        No user groups have been added
+                        <localize key="user_noUserGroupsAdded">No user groups have been added</localize>
                     </umb-empty-state>
-                    
+
                 </umb-box-content>
             </umb-box>
 
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 9fd83c8947..82a6718c18 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -1981,6 +1981,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="sortCreateDateAscending">Newest</key>
     <key alias="sortCreateDateDescending">Oldest</key>
     <key alias="sortLastLoginDateDescending">Last login</key>
+    <key alias="noUserGroupsAdded">No user groups have been added</key>
   </area>
   <area alias="validation">
     <key alias="validation">Validation</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 46c3cd9681..6a77ceda67 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -1994,6 +1994,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="sortCreateDateAscending">Newest</key>
     <key alias="sortCreateDateDescending">Oldest</key>
     <key alias="sortLastLoginDateDescending">Last login</key>
+    <key alias="noUserGroupsAdded">No user groups have been added</key>
   </area>
   <area alias="validation">
     <key alias="validation">Validation</key>