From bced145be690086b2549cd3c38ba5c8ae22adbca Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Wed, 22 Jul 2020 20:25:57 +0200
Subject: [PATCH] Improve the accessibility of the cog icon (#8206)

---
 .../src/views/propertyeditors/grid/grid.html  | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 0628766638..dd3ae63ec7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -22,7 +22,7 @@
         <div class="templates-preview"
              ng-show="!model.value || model.value == ''">
 
-             <p><strong><localize key="grid_chooseLayout" /></strong></p>
+             <p><strong><localize key="grid_chooseLayout">Choose a layout</localize></strong></p>
 
             <div class="preview-rows layout"
                  ng-repeat="template in model.config.items.templates"
@@ -83,7 +83,7 @@
                                     <div class="umb-row-title">{{row.label || row.name}}</div>
 
                                     <div class="umb-grid-has-config" ng-if="row.hasConfig && !sortMode">
-                                            <localize key="grid_settingsApplied" />
+                                            <p><localize key="grid_settingsApplied">Settings applied</localize></p>
                                     </div>
                                 </div>
 
@@ -138,24 +138,27 @@
 
                                                       <!-- disable drop overlay -->
                                                       <div class="drop-overlay -disable" ng-if="area.dropNotAllowed">
-                                                          <i class="icon-delete drop-icon"></i>
-                                                          <localize key="grid_contentNotAllowed" />
+                                                          <i class="icon-delete drop-icon" aria-hidden="true"></i>
+                                                          <p><localize key="grid_contentNotAllowed">This content is not allowed here</localize></p>
                                                       </div>
 
                                                       <!-- allow drop overlay -->
                                                       <div class="drop-overlay -allow" ng-if="area.dropOnEmpty">
-                                                          <i class="icon-download drop-icon"></i>
-                                                          <localize key="grid_contentAllowed" />
+                                                          <i class="icon-download drop-icon" aria-hidden="true"></i>
+                                                          <p><localize key="grid_contentAllowed">This content is allowed here</localize></p>
                                                       </div>
 
                                                       <div class="umb-grid-has-config" ng-if="area.hasConfig && !sortMode">
-                                                         <localize key="grid_settingsApplied" />
+                                                         <p>
+                                                            <localize key="grid_settingsApplied">Settings applied</localize>
+                                                         </p>
                                                       </div>
 
                                                       <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
-                                                         <div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
-                                                            <i class="icon-settings"></i>
-                                                         </div>
+                                                         <button type="button" aria-haspopup="true" class="btn-reset cell-tool" ng-click="editGridItemSettings(area, 'cell')">
+                                                            <i class="icon-settings" aria-hidden></i>
+                                                            <span class="sr-only">Open column settings</span>
+                                                         </button>
                                                       </div>
 
                                                       <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
@@ -163,8 +166,10 @@
                                                           <!-- Control placeholder -->
                                                           <button class="umb-cell-placeholder btn-reset" type="button" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
                                                                <div class="cell-tools-add -center">
-                                                                   <localize ng-if="!sortMode" key="grid_addElement" />
-                                                                   <localize ng-if="sortMode" key="grid_dropElement" />
+                                                                   <p>
+                                                                        <localize ng-if="!sortMode" key="grid_addElement">Add content</localize>
+                                                                        <localize ng-if="sortMode" key="grid_dropElement">Drop element</localize>
+                                                                   </p>
                                                                </div>
                                                           </button>
 
@@ -226,7 +231,7 @@
 
                                                       <!-- if area is empty tools -->
                                                       <div class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
-                                                          <button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement" /></button>
+                                                          <button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement">Add element</localize></button>
                                                       </div>
 
                                                  </div>
@@ -266,7 +271,7 @@
 
                     <div class="templates-preview" ng-if="showRowConfigurations">
 
-                        <p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows" /></strong></p>
+                        <p ng-hide="section.rows.length > 0"><strong><localize key="grid_addRows">Add row</localize></strong></p>
 
                         <button class="preview-rows columns btn-reset"
                              ng-repeat="layout in  section.$allowedLayouts"