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

Accessibilty improvement to media picker (#6805)

Browse Source
This commit is contained in:
Mike
2019-11-01 09:17:28 +00:00
committed by Sebastiaan Janssen
parent a873c9188f
commit 88af496f29
3 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -415,8 +415,6 @@
text-decoration: none;
display: flex;
flex-direction: row;
opacity: 0;
visibility: hidden;
}
.umb-sortable-thumbnails.ui-sortable:not(.ui-sortable-disabled) {
@@ -425,9 +423,8 @@
}
}
.umb-sortable-thumbnails li:hover .umb-sortable-thumbnails__actions {
.umb-sortable-thumbnails li:hover .umb-sortable-thumbnails__action {
opacity: 1;
visibility: visible;
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__action {
@@ -443,6 +440,12 @@
margin-left: 5px;
text-decoration: none;
.box-shadow(0 1px 2px rgba(0,0,0,0.25));
opacity: 0;
transition: opacity .1s ease-in-out;
.tabbing-active &:focus {
opacity: 1;
}
}
.umb-sortable-thumbnails .umb-sortable-thumbnails__action.-red {

12
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
View File

@@ -20,16 +20,16 @@
<div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
<a role="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red" data-element="action-remove" ng-click="remove()">
<i class="icon icon-delete"></i>
</a>
<button aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" data-element="action-remove" ng-click="remove()">
<i class="icon icon-delete" aria-hidden="true"></i>
</button>
</div>
</li>
<li style="border: none;" class="add-wrapper unsortable" ng-hide="model.value">
<a role="button" aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square" ng-click="add()" prevent-default>
<i class="icon icon-add large"></i>
</a>
<button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset" ng-click="add()" prevent-default>
<i class="icon icon-add large" aria-hidden="true"></i>
</button>
</li>
</ul>
</div>

18
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
View File

@@ -36,18 +36,18 @@
</umb-file-icon>
<div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
<a role="button" aria-label="Edit media" ng-if="allowEditMedia" class="umb-sortable-thumbnails__action" data-element="action-edit" ng-click="vm.editItem(media)">
<i class="icon icon-edit"></i>
</a>
<a role="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red" data-element="action-remove" ng-click="vm.remove($index)">
<i class="icon icon-delete"></i>
</a>
<button aria-label="Edit media" ng-if="allowEditMedia" class="umb-sortable-thumbnails__action btn-reset" data-element="action-edit" ng-click="vm.editItem(media)">
<i class="icon icon-edit" aria-hidden="true"></i>
</button>
<button aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" data-element="action-remove" ng-click="vm.remove($index)">
<i class="icon icon-delete" aria-hidden="true"></i>
</button>
</div>
</li>
<li style="border: none;" class="add-wrapper unsortable" ng-if="vm.showAdd() && allowAddMedia">
<a role="button" aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link" ng-click="vm.add()" ng-class="{'add-link-square': (mediaItems.length === 0 || isMultiPicker)}" prevent-default>
<i class="icon icon-add large"></i>
</a>
<button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link btn-reset" ng-click="vm.add()" ng-class="{'add-link-square': (mediaItems.length === 0 || isMultiPicker)}" prevent-default>
<i class="icon icon-add large" aria-hidden="true"></i>
</button>
</li>
</ul>
</div>