yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve accessibility and UX

Browse Source
This commit is contained in:
BatJan
2020-05-24 22:59:57 +02:00
committed by Sebastiaan Janssen
parent 4b673815a1
commit dc7277771c
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html
View File

@@ -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>