From 8cf999e4a1916d26b3292b3da9861edc6f1046da Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Wed, 26 Aug 2020 20:25:30 +0200
Subject: [PATCH] Accessibility: Grid config datatype improvements (#8712)

---
 .../src/less/gridview.less                    | 39 +++++++++++--------
 .../grid/dialogs/layoutconfig.html            | 14 +++++--
 .../grid/dialogs/rowconfig.html               | 20 +++++++---
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  2 +
 .../Umbraco/config/lang/en_us.xml             |  2 +
 5 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 11ba7b2795..80f13fbf1f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -21,7 +21,7 @@
      overflow: hidden;
      padding: 5px;
      border-radius:5px;
-     box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
+     box-shadow: 3px 3px 12px 0 rgba(50, 50, 50, 0.45);
  }
 
  .usky-grid .ui-sortable-helper *{
@@ -150,7 +150,7 @@
 .usky-grid  .cell-tools-add {
     position: absolute;
     text-align: center;
-    bottom: 0px;
+    bottom: 0;
     left: 0;
     right: 0;
     margin: 0 45px 1px 0;
@@ -160,14 +160,14 @@
     }
 }
 
-.usky-grid  .usky-control:hover .cell-tools-add{
+.usky-grid .usky-control:hover .cell-tools-add{
     opacity: 1;
 }
 
-.usky-grid  .cell-tools-remove {
+.usky-grid .cell-tools-remove {
     display:inline-block;
     position: absolute;
-    top: 0px;
+    top: 0;
     right: 5px;
     text-align: right;
     z-index: 500;
@@ -221,7 +221,7 @@
     top: -22px;
     left: -1px;
     text-decoration: none;
-    padding: 0px 7px;
+    padding: 0 7px;
     display:none;
     font-size:0.8em;
     background-color: @white;
@@ -234,7 +234,7 @@
 
 .usky-grid .usky-row-inner > ins.item-label{
     top: -20px;
-    left: 0px;
+    left: 0;
 }
 
 .usky-grid .usky-control-inner.selectedControl , .usky-grid .usky-row-inner.selectedRow{
@@ -408,7 +408,7 @@
  .usky-grid  ul li {
      display: inline-block;
      width: 120px;
-     margin: 8px 8px 0px 8px;
+     margin: 8px 8px 0 8px;
  }
 
 
@@ -435,7 +435,7 @@
      padding: -1px;
      position: absolute;
      margin: -1px -1px 0 -1px;
-     box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.14);
+     box-shadow: 2px 2px 10px 0 rgba(50, 50, 50, 0.14);
      z-index: 9999999;
  }
 
@@ -558,7 +558,8 @@
      margin: 20px;
  }
 
- .usky-grid .uSky-templates-template a.tb:hover {
+ .usky-grid .uSky-templates-template button.tb:hover,
+ .usky-grid .uSky-templates-template button.tb:focus {
      border:5px solid @blueMid;
  }
 
@@ -587,7 +588,9 @@
      border-right: 1px dashed @gray-8 !important;
  }
 
- .usky-grid a.uSky-templates-column:hover, .usky-grid a.uSky-templates-column.selected{
+ .usky-grid button.uSky-templates-column:hover, 
+ .usky-grid button.uSky-templates-column:focus, 
+ .usky-grid button.uSky-templates-column.selected{
     background-color: @blueMid;
  }
 
@@ -628,13 +631,13 @@
 		transition: border 200ms linear;
 
         &.prevalues-rows {
-            margin: 0px 20px 20px 0px;
+            margin: 0 20px 20px 0;
             width: 80px;
             float:left;
         }
 
         &.prevalues-templates {
-            margin: 0px 20px 20px 0px;
+            margin: 0 20px 20px 0;
             float:left;
 
         }
@@ -803,7 +806,7 @@
 .usky-grid-configuration .uSky-templates .uSky-templates-template .tb{
     max-height: 50px;
     border-width: 2px !important;
-    padding: 0px;
+    padding: 0;
     border-spacing:2px;
     overflow: hidden;
 }
@@ -844,13 +847,13 @@
 }
 
 .usky-grid-configuration .uSky-templates-rows .uSky-templates-row{
-    margin: 0px 50px 20px 0px;
+    margin: 0 50px 20px 0;
     width: 60px;
 }
 
 .usky-grid-configuration .uSky-templates-rows .uSky-templates-row .tb{
     border-width: 2px !important;
-    padding: 0px;
+    padding: 0;
     border-spacing:2px;
 }
 
@@ -858,4 +861,6 @@
     height: 10px !important;
 }
 
-.usky-grid-configuration a.uSky-templates-column{height: 70px !important;}
+.usky-grid-configuration button.uSky-templates-column {
+    height: 70px !important;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
index 49e478a10b..7eb1fe1913 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
@@ -33,17 +33,23 @@
                                 <div class="tb" style="height: 70px; border-width: 2px; padding: 2px">
                                     <div class="tr">
 
-                                        <a class="td uSky-templates-column"
+                                        <button type="button" class="btn-reset td uSky-templates-column"
                                            ng-class="{last:$last, selected:section==currentSection}"
                                            ng-repeat="section in currentLayout.sections"
                                            ng-click="configureSection(section, currentLayout)"
                                            ng-style="{width: percentage(section.grid) +'%'}">
-                                        </a>
+                                           <span class="sr-only">
+                                            <localize key="grid_editGridLayout">Edit grid layout</localize>
+                                        </span>
+                                        </button>
 
-                                        <a class="td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
+                                        <button type="button" class="btn-reset td uSky-templates-column add" ng-if="availableLayoutSpace > 0"
                                            ng-click="configureSection(undefined, currentLayout)"
                                            ng-style="{width: percentage(availableLayoutSpace) + '%'}">
-                                            <i class="icon icon-add"></i>
+                                            <i class="icon icon-add" aria-hidden="true"></i>
+                                            <span class="sr-only">
+                                                <localize key="grid_addGridLayout">Add grid layout</localize>
+                                            </span>
                                         </a>
 
                                     </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
index b74ef6bf09..9d105e2629 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
@@ -40,18 +40,26 @@
                             <div class="tb" style="height: auto; border: none !important; background: none">
                                 <div class="tr">
 
-                                    <a class="td uSky-templates-column"
+                                    <button type="button" class="btn-reset td uSky-templates-column"
                                         ng-class="{last:$last, selected:cell==currentCell}"
                                         ng-repeat="cell in currentRow.areas"
                                         ng-click="configureCell(cell, currentRow)"
                                         ng-style="{width: percentage(cell.grid) + '%'}">
-                                    </a>
+                                        <span class="sr-only">
+                                            <span class="sr-only">
+                                                <localize key="grid_editRowConfiguration">Edit row configuration</localize>
+                                            </span>
+                                        </span>
+                                    </button>
 
-                                    <a class="td uSky-templates-column add"
+                                    <button type="button" class="btn-reset td uSky-templates-column add"
                                        ng-click="configureCell(null, currentRow)"
                                        ng-style="{width: percentage(availableRowSpace) + '%'}">
-                                        <i class="icon icon-add"></i>
-                                    </a>
+                                        <i class="icon icon-add" aria-hidden="true"></i>
+                                        <span class="sr-only">
+                                            <localize key="grid_addRowConfiguration">Add row configuration</localize>
+                                        </span>
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -104,7 +112,7 @@
                                                 <i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
                                                 <small class="input-label--small">({{editor.alias}})</small>
                                             </umb-checkbox>
-                                            
+
                                         </li>
                                     </ul>
                                 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 44cdcc41f0..7fa1249828 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -1599,10 +1599,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="gridLayouts">Grid Layouts</key>
     <key alias="gridLayoutsDetail">Layouts are the overall work area for the grid editor, usually you only need one or two different layouts</key>
     <key alias="addGridLayout">Add Grid Layout</key>
+    <key alias="editGridLayout">Edit Grid Layout</key>
     <key alias="addGridLayoutDetail">Adjust the layout by setting column widths and adding additional sections</key>
     <key alias="rowConfigurations">Row configurations</key>
     <key alias="rowConfigurationsDetail">Rows are predefined cells arranged horizontally</key>
     <key alias="addRowConfiguration">Add row configuration</key>
+    <key alias="editRowConfiguration">Edit row configuration</key>
     <key alias="addRowConfigurationDetail">Adjust the row by setting cell widths and adding additional cells</key>
     <key alias="columns">Columns</key>
     <key alias="columnsDetails">Total combined number of columns in the grid layout</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 5e2a11c24c..464e8bbb02 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -1616,10 +1616,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="gridLayouts">Grid Layouts</key>
     <key alias="gridLayoutsDetail">Layouts are the overall work area for the grid editor, usually you only need one or two different layouts</key>
     <key alias="addGridLayout">Add Grid Layout</key>
+    <key alias="editGridLayout">Edit Grid Layout</key>
     <key alias="addGridLayoutDetail">Adjust the layout by setting column widths and adding additional sections</key>
     <key alias="rowConfigurations">Row configurations</key>
     <key alias="rowConfigurationsDetail">Rows are predefined cells arranged horizontally</key>
     <key alias="addRowConfiguration">Add row configuration</key>
+    <key alias="editRowConfiguration">Edit row configuration</key>
     <key alias="addRowConfigurationDetail">Adjust the row by setting cell widths and adding additional cells</key>
     <key alias="columns">Columns</key>
     <key alias="columnsDetails">Total combined number of columns in the grid layout</key>