From dc7277771c41883c76c19ae6b4b3002902a6940f Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Sun, 24 May 2020 22:59:57 +0200
Subject: [PATCH] Improve accessibility and UX

---
 .../datatypeconfigurationpicker.html          | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
index 06162d2961..cbc5b102cc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
@@ -18,29 +18,28 @@
                     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
                     <div ng-if="!vm.loading">
-                        <a href="" tabindex="0" umb-auto-focus></a>
                         <ul class="umb-card-grid -three-in-row">
-                            <li ng-repeat="dataTypeConfig in vm.configs | orderBy:'name'"
+                            <li ng-repeat="dataTypeConfig in vm.configs | orderBy:'name' track by $index"
                                 data-element="datatypeconfig-{{dataTypeConfig.name}}">
                                 <div ng-if="dataTypeConfig.loading" class="umb-card-grid-item__loading">
                                     <div class="umb-button__progress"></div>
                                 </div>
-                                <a class="umb-card-grid-item" href="" ng-click="vm.pickDataType(dataTypeConfig)" title="{{ dataTypeConfig.name }}">
+                                <button umb-auto-focus="{{$index === 0}}" class="btn-reset umb-card-grid-item" type="button" ng-click="vm.pickDataType(dataTypeConfig)" title="Select {{ dataTypeConfig.name }}">
                                     <span>
-                                        <i class="{{ dataTypeConfig.icon }}" ng-class="{'icon-autofill': dataTypeConfig.icon == null}"></i>
-                                        {{ dataTypeConfig.name }}
+                                        <i class="{{ dataTypeConfig.icon }}" ng-class="{'icon-autofill': dataTypeConfig.icon == null}" aria-hidden="true"></i>
+                                        <span class="sr-only">Select</span> {{ dataTypeConfig.name }}
                                     </span>
-                                </a>
+                                </button>
                             </li>
                         </ul>
                         <ul class="umb-card-grid -three-in-row">
                             <li>
-                                <a class="umb-card-grid-item-slot" href="" ng-click="vm.newDataType()" title="Create a new configuration of {{ model.editor.name }}">
+                                <button umb-auto-focus="{{vm.configs.length === 0}}" class="btn-reset umb-card-grid-item-slot" type="button" ng-click="vm.newDataType()" title="Create a new configuration of {{ model.editor.name }}">
                                     <span>
-                                        <i class="icon icon-add"></i>
-                                        Create new
+                                        <i class="icon icon-add" aria-hidden="true"></i>
+                                        Create new <span class="sr-only">configuration of {{ model.editor.name }}</span>
                                     </span>
-                                </a>
+                                </button>
                             </li>
                         </ul>