From 88af496f295d3d0af6cb5f46527720a9012fad3e Mon Sep 17 00:00:00 2001
From: Mike <mike.masey@yoyodesign.com>
Date: Fri, 1 Nov 2019 09:17:28 +0000
Subject: [PATCH] Accessibilty improvement to media picker (#6805)

---
 .../src/less/property-editors.less             | 11 +++++++----
 .../prevalueeditors/mediafolderpicker.html     | 12 ++++++------
 .../mediapicker/mediapicker.html               | 18 +++++++++---------
 3 files changed, 22 insertions(+), 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
index dc2d40267169..823daedf22b2 100644
--- 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
index 1d7c3fa98dfd..87ccf08d626c 100644
--- 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
index c4f334200072..1f9bd4e3c01b 100644
--- 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>