From 81e37985959a489ccd64d4a4e4d6299567fc8a67 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Sat, 5 Dec 2020 00:00:35 +0100
Subject: [PATCH] NestedContent DoctyperPicker view: Various a11y fixes (#9049)

* Add buttons and convert icons to use the umb-icon directive

* removes class attribute from umb-icon, fixes self-closing th elements (th is non-void)

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 .../less/components/umb-nested-content.less    |  6 +++---
 src/Umbraco.Web.UI.Client/src/less/navs.less   |  5 ++++-
 .../nestedcontent.doctypepicker.html           | 18 ++++++++++--------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index 05824ba425..29a19bbba9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -240,17 +240,17 @@
 }
 
 .umb-nested-content__doctypepicker table td.icon-navigation,
-.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
+.umb-nested-content__doctypepicker .umb-nested-content__help-icon {
     vertical-align: middle;
     color: @gray-7;
 }
 
 .umb-nested-content__doctypepicker table td.icon-navigation:hover,
-.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
+.umb-nested-content__doctypepicker .umb-nested-content__help-icon:hover {
     color: @gray-2;
 }
 
-.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
+.umb-nested-content__doctypepicker .umb-nested-content__help-action {
     margin-left: 10px;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index e45a4d46bb..6dab771c94 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -12,7 +12,10 @@
   padding-right: 7px;
 }
 
-.icon.handle{color: @gray-8;}
+.umb-icon.handle,
+.icon.handle {
+  color: @gray-8;
+}
 
 
 // BASE CLASS
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
index f62894e043..fa146f12f0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
@@ -3,7 +3,7 @@
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th />
+                    <th></th>
                     <th>
                         <localize key="contentTypeEditor_elementType">Element Type</localize>
                     </th>
@@ -13,20 +13,20 @@
                     <th>
                         <localize key="template_template">Template</localize>
                     </th>
-                    <th />
+                    <th></th>
                 </tr>
             </thead>
             <tbody ui-sortable="sortableOptions" ng-model="model.value">
                 <tr ng-repeat="config in model.value">
                     <td>
-                        <i class="icon icon-navigation handle"></i>
+                        <umb-icon icon="icon-navigation" class="handle"></umb-icon>
                     </td>
                     <td>
                         {{ph = placeholder(config);""}}
-                        <div class="umb-nested-content__placeholder" ng-class="{'umb-nested-content__placeholder--selected':ph}" ng-click="openElemTypeModal($event, config)">
+                        <button type="button" class="btn-reset umb-nested-content__placeholder" ng-class="{'umb-nested-content__placeholder--selected':ph}" ng-click="openElemTypeModal($event, config)">
                             <umb-node-preview ng-if="ph" icon="ph.icon" name="ph.name"></umb-node-preview>
                             <localize key="content_nestedContentAddElementType" ng-if="!ph">Add element type</localize>
-                        </div>
+                        </button>
 
                     </td>
                     <td>
@@ -49,17 +49,19 @@
             <button type="button" class="btn" ng-click="add()" ng-disabled="!canAdd()">
                 <localize key="general_add">Add</localize>
             </button>
-            <i class="icon icon-help-alt medium umb-nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
+            <button type="button" class="btn-reset umb-nested-content__help-action" ng-click="showHelpText = !showHelpText">
+                <umb-icon icon="icon-help-alt" class="medium umb-nested-content__help-icon"></umb-icon>
+            </button>
         </div>
     </div>
     <br />
     <div class="umb-nested-content__help-text" ng-show="showHelpText">
         <p>
-            <b><localize key="general_group">Group</localize>:</b><br />
+            <strong><localize key="general_group">Group</localize>:</strong><br />
             <localize key="content_nestedContentGroupHelpText">Select the group whose properties should be displayed. If left blank, the first group on the element type will be used.</localize>
         </p>
         <p>
-            <b><localize key="template_template">Template</localize>:</b><br />
+            <strong><localize key="template_template">Template</localize>:</strong><br />
             <localize key="content_nestedContentTemplateHelpTextPart1">Enter an angular expression to evaluate against each item for its name. Use</localize>
             <code ng-non-bindable>{{$index}}</code>
             <localize key="content_nestedContentTemplateHelpTextPart2">to display the item index</localize>