From ab3202b56042c7ed65478fbbc18b9a83b4d74302 Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Fri, 9 Aug 2019 15:25:51 +0100
Subject: [PATCH] V8: Accessibility improvements for page name entry (#5760)

---
 .../umbeditorcontentheader.directive.js       | 21 +++++++++-
 .../editor/umb-editor-content-header.html     | 38 +++++++++++--------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  3 ++
 .../Umbraco/config/lang/en_us.xml             |  3 ++
 4 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
index 75fa0469bb6d..c82ca1481c85 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function EditorContentHeader(serverValidationManager) {
+    function EditorContentHeader(serverValidationManager, localizationService, editorState) {
 
         function link(scope, el, attr, ctrl) {
             
@@ -13,7 +13,24 @@
             if (!scope.serverValidationAliasField) {
                 scope.serverValidationAliasField = "Alias";
             }
-            
+
+            scope.isNew = scope.content.state == "NotCreated";
+
+            localizationService.localizeMany([
+                    scope.isNew ? "placeholders_a11yCreateItem" : "placeholders_a11yEdit",
+                    "placeholders_a11yName"]
+            ).then(function (data) {
+                scope.a11yMessage = data[0];
+                scope.a11yName = data[1];
+                if (!scope.isNew) {
+                    scope.a11yMessage += " " + scope.content.name;
+
+                } else {
+                    var name = editorState.current.contentTypeName;
+                    scope.a11yMessage += " " + name;
+                    scope.a11yName = name + " " + scope.a11yName;
+                }
+            });
             scope.vm = {};
             scope.vm.dropdownOpen = false;
             scope.vm.currentVariant = "";
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 37f363f50d4b..ba6714987c2c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -11,24 +11,30 @@
         <div class="flex items-center" style="flex: 1;">
 
             <div id="nameField" class="umb-editor-header__name-and-description" style="flex: 1 1 auto;">
+                <div>
+                    <p tabindex="0" class="sr-only">
+                        {{a11yMessage}}
+                    </p>
+                </div>
                 <div class="umb-editor-header__name-wrapper">
+                    <label for="headerName" class="sr-only">{{a11yName}}</label>
                     <ng-form name="headerNameForm">
-                        <input
-                            data-element="editor-name-field"
-                            type="text"
-                            class="umb-editor-header__name-input"
-                            localize="placeholder"
-                            placeholder="@placeholders_entername"
-                            name="headerName"
-                            ng-model="name"
-                            ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
-                            ng-disabled="nameDisabled"
-                            umb-auto-focus
-                            val-server-field="{{serverValidationNameField}}"
-                            required
-                            aria-required="true"
-                            aria-invalid="{{contentForm.headerNameForm.headerName.$invalid ? true : false}}"
-                            autocomplete="off" maxlength="255" />
+                        <input data-element="editor-name-field"
+                               type="text"
+                               class="umb-editor-header__name-input"
+                               localize="placeholder"
+                               placeholder="@placeholders_entername"
+                               name="headerName"
+                               id="headerName"
+                               ng-model="name"
+                               ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
+                               ng-disabled="nameDisabled"
+                               umb-auto-focus
+                               val-server-field="{{serverValidationNameField}}"
+                               required
+                               aria-required="true"
+                               aria-invalid="{{contentForm.headerNameForm.headerName.$invalid ? true : false}}"
+                               autocomplete="off" maxlength="255" />
                     </ng-form>
 
                     <a ng-if="content.variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 175146aafda4..f3e8ba135b3d 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -527,6 +527,9 @@
     <key alias="anchor">#value or ?key=value</key>
         <key alias="enterAlias">Enter alias...</key>
         <key alias="generatingAlias">Generating alias...</key>
+        <key alias="a11yCreateItem">Create item</key>
+        <key alias="a11yEdit">Edit</key>
+        <key alias="a11yName">Name</key>
   </area>
   <area alias="editcontenttype">
     <key alias="createListView" version="7.2">Create custom list view</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 6aa60549927c..a171d00d3202 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -530,6 +530,9 @@
     <key alias="anchor">#value or ?key=value</key>
     <key alias="enterAlias">Enter alias...</key>
     <key alias="generatingAlias">Generating alias...</key>
+    <key alias="a11yCreateItem">Create item</key>
+    <key alias="a11yEdit">Edit</key>
+    <key alias="a11yName">Name</key>
   </area>
   <area alias="editcontenttype">
     <key alias="createListView" version="7.2">Create custom list view</key>