Accessibility: Fixes for "insert code snippet" view in macro pickers (#…

…8711)
umbraco · Aug 26, 2020 · 52e40d4 · 52e40d4
1 parent 824d2fd
commit 52e40d4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 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
@@ -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/...o.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html b/...o.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>