From 9d30b1acc00bf09d75f5bdd43a68c4e29c46e491 Mon Sep 17 00:00:00 2001
From: Poornima Nayar <poornimakrishnav@gmail.com>
Date: Fri, 3 Jan 2020 19:23:47 +0000
Subject: [PATCH] Feature/media provide screen reader context remove files
 (#6919)

---
 .../views/components/upload/umb-property-file-upload.html    | 5 +++--
 .../src/views/propertyeditors/imagecropper/imagecropper.html | 3 ++-
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml                | 5 ++++-
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml             | 2 ++
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html
index 13cc5ab34f..9b4e60a413 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html
@@ -44,9 +44,10 @@
                         </div>
                     </div>
                 </div>
-
                 <div>
-                    <a href class="btn btn-link btn-crop-delete" ng-click="vm.clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
+                    <button class="btn btn-link btn-crop-delete" aria-hidden="true" ng-click="vm.clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></button>
+                    <button class="sr-only" ng-if="file.isImage" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
+                    <button class="sr-only" ng-if="!file.isImage" ng-click="vm.clear()"><localize key="content_uploadClearFileContext">Click here to remove the file from the media item</localize></button>
                 </div>
 
             </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
index a0faefe690..3164a6964c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
@@ -41,7 +41,8 @@
                                        on-value-changed="focalPointChanged(left, top)"
                                        on-image-loaded="imageLoaded(isCroppable, hasDimensions)">
                     </umb-image-gravity>
-                    <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
+                    <button class="btn btn-link btn-crop-delete" aria-hidden="true" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></button>
+                    <button class="sr-only" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
                 </div>
 
                 
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index e8c2e8d58a..a36fc1be83 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -264,7 +264,9 @@
     <key alias="unpublished">Unpublished</key>
     <key alias="updateDate">Last edited</key>
     <key alias="updateDateDesc" version="7.0">Date/time this document was edited</key>
-    <key alias="uploadClear">Remove file(s)</key>
+    <key alias="uploadClear">Remove file(s)</key>
+	<key alias="uploadClearImageContext">Click here to remove the image from the media item</key>
+    <key alias="uploadClearFileContext">Click here to remove the file from the media item</key>
     <key alias="urls">Link to document</key>
     <key alias="memberof">Member of group(s)</key>
     <key alias="notmemberof">Not a member of group(s)</key>
@@ -2346,3 +2348,4 @@ To manage your website, simply open the Umbraco back office and start adding con
     </key>
   </area>
 </language>
+
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 9d077941db..24a286ff6c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -269,6 +269,8 @@
     <key alias="updateDate">Last edited</key>
     <key alias="updateDateDesc" version="7.0">Date/time this document was edited</key>
     <key alias="uploadClear">Remove file(s)</key>
+	<key alias="uploadClearImageContext">Click here to remove the image from the media item</key>
+    <key alias="uploadClearFileContext">Click here to remove the file from the media item</key>
     <key alias="urls">Link to document</key>
     <key alias="memberof">Member of group(s)</key>
     <key alias="notmemberof">Not a member of group(s)</key>