From 2853448963bfafdb57e76e9b58b8bf9ce321a36e Mon Sep 17 00:00:00 2001
From: Poornima Nayar <poornimakrishnav@gmail.com>
Date: Sat, 29 Feb 2020 20:50:50 +0000
Subject: [PATCH] Improve accessibility of grid prevalues screen (#6949)

* WIP Improve accessibility of grid prevalues screen

* Clean up of the view, improve accessibility and add localization fallbacks

* forgot to commit the stylesheet

* formatting fixes
---
 .../src/less/gridview.less                    | 22 +++++
 .../propertyeditors/grid/grid.prevalues.html  | 91 +++++++++++--------
 2 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 238feead90..11ba7b2795 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -101,6 +101,9 @@
      position:relative;
  }
 
+ .usky-grid .grid-layout {
+    max-width: 600px;
+}
 
  // ROW
  // -------------------------
@@ -517,6 +520,25 @@
     position:relative;
  }
 
+ .usky-grid .uSky-templates .layout {
+    margin-top: 5px;
+    margin-bottom: 20px;
+    float: left;
+}
+
+
+.usky-grid .uSky-templates .columns {
+    margin-top: 5px;
+    margin-bottom: 25px;
+    float: left;
+}
+
+
+.usky-grid .uSky-templates .columns .preview-cell p {
+    font-size: 6px;
+    line-height: 8px;
+    text-align: center;
+}
 
 
  /**************************************************************************************************/
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
index 92d1a9ef26..986f0cbc7e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
@@ -1,9 +1,15 @@
 <div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
-    <div style="max-width: 600px">
+    <div class="grid-layout">
         <div class="control-group uSky-templates">
 
-            <h4><localize key="grid_gridLayouts" /></h4>
-            <p><localize key="grid_gridLayoutsDetail" /></p>
+            <h4>
+                <localize key="grid_gridLayouts">
+                    Grid Layouts
+                </localize>
+            </h4>
+            <p>
+                <localize key="grid_gridLayoutsDetail">Layouts are the overall work area for the grid editor, usually you only need one or two different layouts</localize>
+            </p>
 
             <ul class="unstyled"
                 ui-sortable
@@ -12,7 +18,7 @@
                 <li ng-repeat="template in model.value.templates" class="clearfix">
 
                     <div ng-click="configureTemplate(template)"
-                         class="preview-rows layout" style="margin-top: 5px; margin-bottom: 20px; float:left">
+                         class="preview-rows layout">
 
                         <div class="preview-row">
                             <div class="preview-col"
@@ -26,28 +32,33 @@
 
                     <div>
                         {{template.name}} <br />
-                        <i class="icon-delete red"></i>
-                        <a class="btn btn-small btn-link"
-                           href
-                           ng-click="deleteTemplate($index)"><localize key="general_delete" /></a>
+                        <button class="btn btn-small btn-link" ng-click="deleteTemplate($index)">
+                            <i class="icon-delete red" aria-hidden="true"></i>
+                            <localize key="general_delete">Delete</localize>
+                        </button>
                     </div>
 
                 </li>
             </ul>
 
-            <button class="btn btn-small"
+            <button class="btn btn-small btn-info"
                     prevent-default
                     ng-click="configureTemplate()">
-                <i class="icon-add"></i> <localize key="grid_addGridLayout" />
+                <i class="icon-add" aria-hidden="true"></i>
+                <localize key="grid_addGridLayout" />
             </button>
         </div>
     </div>
-    <div style="max-width: 600px">
+    <div class="grid-layout">
 
         <div class="control-group uSky-templates">
 
-            <h4><localize key="grid_rowConfigurations" /></h4>
-            <p><localize key="grid_rowConfigurationsDetail" /></p>
+            <h4>
+                <localize key="grid_rowConfigurations">Row Configurations</localize>
+            </h4>
+            <p>
+                <localize key="grid_rowConfigurationsDetail">Rows are predefined cells arranged horizontally</localize>
+            </p>
 
             <div class="control-group uSky-templates-rows">
                 <ul class="unstyled"
@@ -57,7 +68,7 @@
                     <li ng-repeat="layout in model.value.layouts" class="clearfix">
 
                         <div ng-click="configureLayout(layout)"
-                             class="preview-rows columns" style="margin-top: 5px; margin-bottom: 25px; float:left">
+                             class="preview-rows columns">
 
                             <div class="preview-row">
                                 <div class="preview-col"
@@ -66,7 +77,7 @@
                                      ng-style="{width: percentage(area.grid) + '%', 'max-width': '100%'}">
 
                                     <div class="preview-cell">
-                                        <p style="font-size: 6px; line-height: 8px; text-align: center" ng-show="area.maxItems > 0">{{area.maxItems}}</p>
+                                        <p ng-show="area.maxItems > 0">{{area.maxItems}}</p>
                                     </div>
                                 </div>
                             </div>
@@ -74,17 +85,18 @@
 
                         <div>
                             {{layout.label || layout.name}}<br />
-                            <i class="icon-delete red"></i>
-                            <a class="btn btn-small btn-link" href ng-click="deleteLayout($index)">
-                                <localize key="general_delete" />
-                            </a>
+                            <button class="btn btn-small btn-link" ng-click="deleteLayout($index)">
+                                <i class="icon-delete red" aria-hidden="true"></i>
+                                <localize key="general_delete">Delete</localize>
+                            </button>
                         </div>
 
                     </li>
                 </ul>
 
                 <button class="btn btn-small" prevent-default ng-click="configureLayout()">
-                    <i class="icon-add"></i> <localize key="grid_addRowConfiguration" />
+                    <i class="icon-add" aria-hidden="true"></i>
+                    <localize key="grid_addRowConfiguration">Add row configuration</localize>
                 </button>
 
             </div>
@@ -93,7 +105,7 @@
     </div>
 
 
-    <div style="max-width: 600px">
+    <div class="grid-layout">
 
         <umb-control-group label="@grid_columns"
                            description="@grid_columnsDetails">
@@ -108,22 +120,21 @@
                 ng-model="model.value.config">
 
                 <li ng-repeat="configValue in model.value.config">
-                    <i class="icon icon-navigation handle"></i>
+                    <i class="icon icon-navigation handle" aria-hidden="true"></i>
 
-                    <a href="#" prevent-default ng-click="removeConfigValue(model.value.config, $index)">
-                        <i class="icon icon-delete red"></i>
+                    <button class="btn-link" prevent-default ng-click="removeConfigValue(model.value.config, $index)">
+                        <i class="icon icon-delete red" aria-hidden="true"></i>
                         {{configValue.label}}
-                    </a>
+                    </button>
                 </li>
             </ul>
 
             <ul class="unstyled list-icons">
-                <li>
-                    <i class="icon icon-settings-alt-2 turquoise"></i>
-
-                    <a href="#" ng-click="editConfig()" prevent-default>
-                        <localize key="general_edit" />
-                    </a>
+                <li>                    
+                    <button ng-click="editConfig()" class="btn-link" prevent-default>
+                        <i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
+                        <localize key="general_edit">Edit</localize>
+                    </button>
                 </li>
             </ul>
         </umb-control-group>
@@ -137,22 +148,22 @@
                 ng-model="model.value.styles">
 
                 <li ng-repeat="style in model.value.styles">
-                    <i class="icon icon-navigation handle"></i>
+                    <i class="icon icon-navigation handle" aria-hidden="true"></i>
 
-                    <a href="#" prevent-default ng-click="removeConfigValue(model.value.styles, $index)">
-                        <i class="icon icon-delete red"></i>
+                    <button class="btn-link" prevent-default ng-click="removeConfigValue(model.value.styles, $index)">
+                        <i class="icon icon-delete red" aria-hidden="true"></i>
                         {{style.label}}
-                    </a>
+                    </button>
 
                 </li>
             </ul>
 
             <ul class="unstyled list-icons">
-                <li>
-                    <i class="icon icon-settings-alt-2 turquoise"></i>
-                    <a href="#" ng-click="editStyles()" prevent-default>
-                        <localize key="general_edit" />
-                    </a>
+                <li>                    
+                    <button ng-click="editStyles()" class="btn-link" prevent-default>
+                        <i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
+                        <localize key="general_edit">Edit</localize>
+                    </button>
                 </li>
             </ul>
         </umb-control-group>