From 52e40d41d23721767db6d6d969df209679c6bbb1 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Wed, 26 Aug 2020 20:23:08 +0200
Subject: [PATCH] Accessibility: Fixes for "insert code snippet" view in macro
 pickers (#8711)

---
 .../less/components/umb-insert-code-box.less  |  4 +-
 .../insertcodesnippet/insertcodesnippet.html  | 44 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
index f3b53f4def..006dae09dc 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
@@ -8,20 +8,20 @@
     padding: 15px 20px;
     margin-bottom: 10px;
     border-radius: 3px;
-    cursor: pointer;
+    text-align: left;
 }
 
 .umb-insert-code-box:hover,
 .umb-insert-code-box.-selected {
     background-color: @ui-option-hover;
     color: @ui-action-type-hover;
-    //border-color: @ui-action-border-hover;
 }
 
 .umb-insert-code-box__title {
     font-size: 15px;
     margin-bottom: 5px;
     font-weight: bold;
+    line-height: 1;
 }
 
 .umb-insert-code-box__description {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
index ea247c77e5..2ce7af8d9d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
@@ -9,32 +9,32 @@
             hide-icon="true"
             hide-description="true">
         </umb-editor-header>
-        
+
         <umb-editor-container>
 
             <umb-box>
                 <umb-box-content>
                     <div class="umb-insert-code-boxes">
-                        <div ng-if="model.allowedTypes.umbracoField" class="umb-insert-code-box" ng-click="vm.openPageFieldOverlay()">
-                            <div class="umb-insert-code-box__title"><localize key="template_insertPageField" />...</div>
-                            <div class="umb-insert-code-box__description"><localize key="template_insertPageFieldDesc" /></div>
-                        </div>
-                        <div ng-if="model.allowedTypes.partial" class="umb-insert-code-box" ng-click="vm.openPartialOverlay()">
-                            <div class="umb-insert-code-box__title"><localize key="template_insertPartialView" />...</div>
-                            <div class="umb-insert-code-box__description">
-                                <localize key="template_insertPartialViewDesc" />
-                            </div>
-                        </div>
-                        <div ng-if="model.allowedTypes.macro" class="umb-insert-code-box" ng-click="vm.openMacroPicker()">
-                            <div class="umb-insert-code-box__title"><localize key="template_insertMacro" />...</div>
-                            <div class="umb-insert-code-box__description">
-                                <localize key="template_insertMacroDesc" />
-                            </div>
-                        </div>
-                        <div ng-if="model.allowedTypes.dictionary" class="umb-insert-code-box" ng-click="vm.openDictionaryItemOverlay()">
-                            <div class="umb-insert-code-box__title"><localize key="template_insertDictionaryItem" />...</div>
-                            <div class="umb-insert-code-box__description"><localize key="template_insertDictionaryItemDesc" /></div>
-                        </div>
+                        <button type="button" ng-if="model.allowedTypes.umbracoField" class="btn-reset umb-insert-code-box" ng-click="vm.openPageFieldOverlay()">
+                            <h2 class="umb-insert-code-box__title"><localize key="template_insertPageField">Value</localize></h2>
+                            <p class="umb-insert-code-box__description"><localize key="template_insertPageFieldDesc">Displays the value of a named field from the current page, with options to modify the value or fallback to alternative values.</localize></p>
+                        </button>
+                        <button type="button" ng-if="model.allowedTypes.partial" class="btn-reset umb-insert-code-box" ng-click="vm.openPartialOverlay()">
+                            <h2 class="umb-insert-code-box__title"><localize key="template_insertPartialView">Partial view</localize></h2>
+                            <p class="umb-insert-code-box__description">
+                                <localize key="template_insertPartialViewDesc">A partial view is a separate template file which can be rendered inside another template, it's great for reusing markup or for separating complex templates into separate files.</localize>
+                            </p>
+                        </button>
+                        <button type="button" ng-if="model.allowedTypes.macro" class="btn-reset umb-insert-code-box" ng-click="vm.openMacroPicker()">
+                            <h2 class="umb-insert-code-box__title"><localize key="template_insertMacro">Macro</localize></h2>
+                            <p class="umb-insert-code-box__description">
+                                <localize key="template_insertMacroDesc">A Macro is a configurable component which is great for reusable parts of your design, where you need the option to provide parameters, such as galleries, forms and lists.</localize>
+                            </p>
+                        </button>
+                        <button type="button" ng-if="model.allowedTypes.dictionary" class="btn-reset umb-insert-code-box" ng-click="vm.openDictionaryItemOverlay()">
+                            <h2 class="umb-insert-code-box__title"><localize key="template_insertDictionaryItem">Dictionary item</localize></h2>
+                            <p class="umb-insert-code-box__description"><localize key="template_insertDictionaryItemDesc">A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create designs for multilingual websites.</localize></p>
+                        </button>
                     </div>
                 </umb-box-content>
             </umb-box>
@@ -54,5 +54,5 @@
         </umb-editor-footer>
 
     </umb-editor-view>
-    
+
 </div>