From d48b33d86d0b81666dec4d33d224b6de2d1ff74c Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Mon, 13 Jan 2020 22:03:34 +0100
Subject: [PATCH] Icon picker: Accessibility improvements (#6990)

---
 .../src/less/components/umb-iconpicker.less            | 10 ++++++----
 .../common/infiniteeditors/iconpicker/iconpicker.html  |  7 ++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
index e8a62f739d..98b2b1d72d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
@@ -15,7 +15,9 @@
     overflow: hidden;
 }
 
-.umb-iconpicker-item a {
+.umb-iconpicker-item button {
+    background: transparent;
+    border: 0 none;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -26,8 +28,8 @@
     border-radius: 3px;
 }
 
-.umb-iconpicker-item a:hover,
-.umb-iconpicker-item a:focus {
+.umb-iconpicker-item button:hover,
+.umb-iconpicker-item button:focus {
     background: @gray-10;
     outline: none;
 }
@@ -39,7 +41,7 @@
     box-sizing: border-box;
 }
 
-.umb-iconpicker-item a:active {
+.umb-iconpicker-item button:active {
     background: @gray-10;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index 3caa6ae03d..c2b0d0e458 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
@@ -46,9 +46,10 @@
                 <div class="umb-control-group" ng-show="!vm.loading && filtered.length > 0 ">
                     <ul class="umb-iconpicker" ng-class="vm.color.value" ng-show="vm.icons">
                         <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm) track by $id(icon)">
-                            <a href="#" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color.value)" prevent-default>
-                                <i class="{{icon}} large"></i>
-                            </a>
+                            <button type="button" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color.value)" prevent-default>
+                                <i class="{{icon}} large" aria-hidden="true"></i>
+                                <span class="sr-only"><localize key="buttons_select">Select</localize> {{icon}}</span>
+                            </button>
                         </li>
                     </ul>
                 </div>