Accessibilty improvement to media picker (#6805)

umbraco · Nov 1, 2019 · 88af496 · 88af496
1 parent a873c91
commit 88af496
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -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 {

diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
@@ -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>

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -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>