From 9b57ec5fa611706cc066c429203eb03e8bbebf06 Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Fri, 6 Aug 2021 14:27:18 +0100
Subject: [PATCH] Accessibility Amends for the Content Info Tab (#10541)

---
 .../content/umb-content-node-info.html        |  5 ++--
 .../views/components/umb-node-preview.html    | 24 +++++--------------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
index 5f8967c419..57d621a7a9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
@@ -157,17 +157,18 @@
                     </umb-node-preview>
                 </umb-control-group>
 
-                <umb-control-group ng-if="disableTemplates == false" data-element="node-info-template" label="@template_template">
+                <umb-control-group ng-if="disableTemplates == false" data-element="node-info-template" label="@template_template" alias="template">
 
                     <div class="flex items-center">
                         <select class="input-block-level"
+                                id="template"
                                 ng-model="node.template"
                                 ng-options="key as value for (key, value) in availableTemplates"
                                 ng-change="updateTemplate(node.template)">
                             <option value="">{{chooseLabel}}...</option>
                         </select>
                         <button type="button" ng-show="allowChangeTemplate && node.template !== null" class="umb-node-preview__action" style="margin-left:15px;" ng-click="openTemplate()">
-                            <localize key="general_open">Open</localize>
+                            <localize key="general_open">Open</localize><span class="sr-only">&nbsp;{{node.template}} <localize key="template_template"/></span>
                         </button>
                     </div>
                 </umb-control-group>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
index 34fb4d7dfd..f1b4b1aac2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
@@ -19,59 +19,47 @@
 
         <!-- If editUrl has a value we render a link otherwise a button -->
         <a class="umb-node-preview__action"
-           title="Edit {{name}}"
            ng-href="{{editUrl}}"
            ng-if="allowEdit && editUrl"
            ng-click="onEdit()">
-            <localize key="general_edit">Edit</localize>
-            <span class="sr-only">{{name}}</span>
+            <localize key="general_edit">Edit</localize><span class="sr-only">&nbsp;{{name}}</span>
         </a>
 
         <button type="button"
                 class="umb-node-preview__action"
-                title="Edit {{name}}"
                 ng-if="allowEdit && !editUrl"
                 ng-click="onEdit()">
-            <localize key="general_edit">Edit</localize>
-            <span class="sr-only">{{name}}...</span>
+            <localize key="general_edit">Edit</localize><span class="sr-only">&nbsp;{{name}}...</span>
         </button>
 
         <!-- If openUrl has a value we render a link otherwise a button -->
         <a class="umb-node-preview__action"
-           title="Open {{name}}"
            ng-href="{{openUrl}}"
            ng-if="allowOpen && openUrl"
            ng-click="onOpen()">
-            <localize key="general_open">Open</localize>
-            <span class="sr-only">{{name}}</span>
+            <localize key="general_open">Open</localize><span class="sr-only">&nbsp;{{name}}</span>
         </a>
 
         <button type="button"
                 class="umb-node-preview__action"
-                title="Open {{name}}"
                 ng-if="allowOpen && !openUrl"
                 ng-click="onOpen()">
-            <localize key="general_open">Open</localize>
-            <span class="sr-only">{{name}}...</span>
+            <localize key="general_open">Open</localize><span class="sr-only">&nbsp;{{name}}...</span>
         </button>
 
         <!-- If removeUrl has a value we render a link otherwise a button -->
         <a class="umb-node-preview__action umb-node-preview__action--red"
-           title="Remove {{name}}"
            ng-href="{{removeUrl}}"
            ng-if="allowRemove && removeUrl"
            ng-click="onRemove()">
-            <localize key="general_remove">Remove</localize>
-            <span class="sr-only">{{name}}</span>
+            <localize key="general_remove">Remove</localize><span class="sr-only">&nbsp;{{name}}</span>
         </a>
 
         <button type="button"
                 class="umb-node-preview__action umb-node-preview__action--red"
-                title="Remove {{name}}"
                 ng-if="allowRemove && !removeUrl"
                 ng-click="onRemove()">
-            <localize key="general_remove">Remove</localize>
-            <span class="sr-only">{{name}}</span>
+            <localize key="general_remove">Remove</localize><span class="sr-only">&nbsp;{{name}}</span>
         </button>
     </div>