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

Sort dialog: Accessibility optimizations (#8156)

Browse Source
This commit is contained in:
Jan Skovgaard
2020-06-23 18:12:24 +02:00
committed by GitHub
parent 9723c81d27
commit a70f95b4e5
3 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/less/main.less
View File

@@ -347,10 +347,16 @@ label:not([for]) {
border: none !important;
}
table thead a {
table thead a,
table thead button {
color: @gray-2;
}
table thead button:hover,
table thead button:focus{
text-decoration: underline;
}
/* UI interactions */
.umb-table tbody.ui-sortable tr

42
src/Umbraco.Web.UI.Client/src/views/content/sort.html
View File

@@ -1,37 +1,35 @@
<div ng-controller="Umbraco.Editors.Content.SortController as vm" ng-cloak>
<div class="umb-dialog-body with-footer sort-order">
<div class="umb-pane">
<div ng-if="vm.error">
<div class="alert alert-error">
<div>{{vm.error.errorMsg}}</div>
</div>
<div ng-if="vm.error" class="alert alert-error">
<p>{{vm.error.errorMsg}}</p>
</div>
<umb-load-indicator
ng-show="vm.loading">
</umb-load-indicator>
<div ng-if="!vm.loading">
<p class="abstract"><localize key="sort_sortHelp"></localize></p>
<p class="abstract"><localize key="sort_sortHelp">Drag the different items up or down below to set how they should be arranged. Or click the column headers to sort the entire collection of items</localize></p>
<table class="table table-condensed table-sortable" ng-if="vm.children">
<thead>
<tr>
<th colspan="2">
<a ng-href="#" ng-click="vm.sort('name')" prevent-default>
<localize key="general_name"></localize>
<span ng-if="vm.sortOrder.column === 'name'">
<button type="button" class="btn-reset" ng-click="vm.sort('name')">
<b><localize key="general_name">Name</localize></b>
<span ng-if="vm.sortOrder.column === 'name'" aria-hidden="true">
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
</span>
</a>
</button>
</th>
<th>
<a ng-href="#" ng-click="vm.sort('createDate')" prevent-default>
<localize key="sort_sortCreationDate"></localize>
<span ng-if="vm.sortOrder.column === 'createDate'">
<button type="button" class="btn-reset" ng-click="vm.sort('createDate')">
<b><localize key="sort_sortCreationDate">Creation date</localize></b>
<span ng-if="vm.sortOrder.column === 'createDate'" aria-hidden="true">
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
</span>
@@ -51,14 +49,14 @@
<umb-empty-state
ng-if="!vm.children"
position="center">
<localize key="sort_sortEmptyState"></localize>
<localize key="sort_sortEmptyState">This node has no child nodes to sort</localize>
</umb-empty-state>
</div>
</div>
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
<umb-button
type="button"
@@ -68,12 +66,12 @@
</umb-button>
<umb-button
ng-if="vm.children"
type="button"
type="button"
action="vm.save()"
state="vm.saveButtonState"
button-style="success"
label-key="buttons_save">
</umb-button>
</div>
</div>

30
src/Umbraco.Web.UI.Client/src/views/media/sort.html
View File

@@ -1,13 +1,11 @@
<div ng-controller="Umbraco.Editors.Media.SortController as vm" ng-cloak>
<div class="umb-dialog-body with-footer sort-order">
<div class="umb-pane">
<div ng-if="vm.error">
<div class="alert alert-error">
<div>{{vm.error.errorMsg}}</div>
</div>
<div ng-if="vm.error" class="alert alert-error">
<p>{{vm.error.errorMsg}}</p>
</div>
<umb-load-indicator
@@ -15,27 +13,27 @@
</umb-load-indicator>
<div ng-if="!vm.loading">
<p class="abstract"><localize key="sort_sortHelp"></localize></p>
<p class="abstract"><localize key="sort_sortHelp">Drag the different items up or down below to set how they should be arranged. Or click the column headers to sort the entire collection of items</localize></p>
<table class="table table-condensed table-sortable" ng-if="vm.children">
<thead>
<tr>
<th colspan="2">
<a ng-href="#" ng-click="vm.sort('name')" prevent-default>
<localize key="general_name"></localize>
<span ng-if="vm.sortOrder.column === 'name'">
<button type="button" class="btn-reset" ng-click="vm.sort('name')">
<b><localize key="general_name">Name</localize></b>
<span ng-if="vm.sortOrder.column === 'name'" aria-hidden="true">
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
</span>
</a>
</button>
</th>
<th>
<a ng-href="#" ng-click="vm.sort('createDate')" prevent-default>
<localize key="sort_sortCreationDate"></localize>
<span ng-if="vm.sortOrder.column === 'createDate'">
<button type="button" class="btn-reset" ng-click="vm.sort('createDate')">
<b><localize key="sort_sortCreationDate">Creation date</localize></b>
<span ng-if="vm.sortOrder.column === 'createDate'" aria-hidden="true">
<i ng-if="vm.sortOrder.reverse" class="icon-navigation-up"></i>
<i ng-if="!vm.sortOrder.reverse" class="icon-navigation-down"></i>
</span>
</a>
</button>
</th>
</tr>
</thead>
@@ -68,7 +66,7 @@
</umb-button>
<umb-button
ng-if="vm.children"
type="button"
type="button"
action="vm.save()"
state="vm.saveButtonState"
button-style="success"