Icon picker: Accessibility improvements (#6990)

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;
 }
 

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>