From 9e6b2f7449d9c8fa5db2be156b802716288447fa Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Thu, 3 Dec 2020 00:42:39 +0100
Subject: [PATCH] Grid editors: Accessibility improvements (#9051)

* Change div and img with ng-click events to be buttons and add a label for the caption input field

* Change back to old way of inserting icon

* Fix semantics and adjust styling

* Fix a11y and semantics

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 .../src/less/components/umb-grid.less         |  5 +++--
 .../propertyeditors/grid/editors/embed.html   | 14 ++++++-------
 .../propertyeditors/grid/editors/macro.html   | 21 ++++++++-----------
 .../propertyeditors/grid/editors/media.html   | 21 +++++++++++--------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  1 +
 .../Umbraco/config/lang/en_us.xml             |  1 +
 6 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 784598e84a..e1fc5573e5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -392,7 +392,7 @@
 // EDITOR PLACEHOLDER
 // -------------------------
 .umb-grid .umb-editor-placeholder {
-    min-height: 65px;
+    min-height: 110px;
     padding: 20px;
     padding-bottom: 30px;
     position: relative;
@@ -400,7 +400,7 @@
     border: 4px dashed @gray-8;
     text-align: center;
     text-align: -moz-center;
-    cursor: pointer;
+    width: 100%;
 }
 
 .umb-grid .umb-editor-placeholder i {
@@ -413,6 +413,7 @@
 
 .umb-grid .umb-editor-preview {
     position: relative;
+    width: 100%;
 
     .umb-editor-preview-overlay {
         cursor: pointer;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
index de80b05760..14741d6ca6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
@@ -1,13 +1,13 @@
 <div ng-controller="Umbraco.PropertyEditors.Grid.EmbedController">
 
-    <div class="umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
+    <button type="button" class="btn-reset umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
         <i class="icon icon-movie-alt"></i>
-        <div class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></div>
-    </div>
+        <span class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></span>
+    </button>
 
-    <div class="umb-editor-preview" ng-if="control.value" ng-click="setEmbed()">
-        <div class="umb-editor-preview-overlay"></div>
-        <div ng-bind-html="trustedValue"></div>
-    </div>
+    <button type="button" class="btn-reset umb-editor-preview" ng-if="control.value" ng-click="setEmbed()">
+        <span class="umb-editor-preview-overlay"></span>
+        <span ng-bind-html="trustedValue"></span>
+    </button>
 
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
index cc581698fc..c07d29d89c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
@@ -1,16 +1,13 @@
 <div ng-controller="Umbraco.PropertyEditors.Grid.MacroController">
 
-	<div class="umb-editor-placeholder" ng-click="setMacro()">
-		<div ng-if="!preview">
+	<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setMacro()">
+		<span ng-if="!preview">
 			<i class="icon icon-settings-alt"></i>
-			<div class="help-text">{{title}}</div>
-		</div>
-		<div ng-if="preview">
-			<div
-				ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
-				ng-bind-html="preview">
-			</div>
-		</div>
-	</div>
-	
+			<span class="help-text">{{title}}</span>
+        </span>
+		<span ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
+			ng-bind-html="preview">
+		</span>
+	</button>
+
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
index fa32821917..2ab42807fd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
@@ -1,16 +1,19 @@
 <div ng-controller="Umbraco.PropertyEditors.Grid.MediaController">
-
-    <div class="umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
+    <button type="button" class="btn-reset umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
         <i class="icon icon-picture"></i>
-        <div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
-    </div>
+        <span ng-id="!control.$inserted" class="help-text">
+            <localize key="grid_clickToInsertImage">Click to insert image</localize>
+        </span>
+    </button>
 
     <div ng-if="thumbnailUrl !== null">
-        <img
-             ng-click="setImage()"
-             ng-src="{{thumbnailUrl}}"
-             class="fullSizeImage" />
-        <input type="text" class="caption" ng-model="control.value.caption" localize="placeholder" placeholder="@grid_placeholderImageCaption" />
+        <button type="button" class="btn-reset" ng-click="setImage()">
+            <img ng-src="{{thumbnailUrl}}" class="fullSizeImage" alt="" />
+        </button>
+        <label class="sr-only" for="grid-media-{{control.value.id}}">
+            <localize key="visuallyHiddenTexts_addImageCaption">Add image caption</localize>
+        </label>
+        <input id="grid-media-{{control.value.id}}" type="text" class="caption" ng-model="control.value.caption" localize="placeholder" placeholder="@grid_placeholderImageCaption" />
     </div>
 
 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 126facb994..f243b6f6f8 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2284,6 +2284,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="dictionaryListCaption">Dictionary items</key>
     <key alias="contextMenuDescription">Select one of the options to edit the node.</key>
     <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
+    <key alias="addImageCaption">Add image caption</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>
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 0f7c69ebfe..0dd3415f97 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2305,6 +2305,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="dictionaryListCaption">Dictionary items</key>
     <key alias="contextMenuDescription">Select one of the options to edit the node.</key>
     <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
+    <key alias="addImageCaption">Add image caption</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>