V8: Accessibility improvements for page name entry

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js

@@ -1,31 +1,46 @@
 (function () {
     'use strict';
-
-    function EditorContentHeader() {
+    function EditorContentHeader(localizationService, editorState) {
 
         function link(scope, el, attr, ctrl) {
 
+
             if (!scope.serverValidationNameField) {
                 scope.serverValidationNameField = "Name";
             }
             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];
+                var contentTypeName = editorState.current.contentTypeName;
+                if (!scope.isNew) {
+                    scope.a11yMessage += " " + scope.content.name;
+                } else {
+                    scope.a11yMessage += " " + contentTypeName;                 
+                }
+                scope.a11yName = contentTypeName + " " + scope.a11yName;
+            });
+
             scope.vm = {};
             scope.vm.dropdownOpen = false;
             scope.vm.currentVariant = "";
 
             function onInit() {
 
                 setCurrentVariant();
-
                 angular.forEach(scope.content.apps, (app) => {
                     if (app.alias === "umbContent") {
                         app.anchors = scope.content.tabs;
                     }
                 });
-
             }
 
             function setCurrentVariant() {
@@ -132,10 +147,8 @@
             },
             link: link
         };
-
         return directive;
     }
-
     angular.module('umbraco.directives').directive('umbEditorContentHeader', EditorContentHeader);
-
 })();
+

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -81,6 +81,7 @@
 @import "forms/umb-validation-label.less";
 
 // Umbraco Components
+@import "components/application/umb-app-a11y.less";
 @import "components/application/umb-app-header.less";
 @import "components/application/umb-app-content.less";
 @import "components/application/umb-tour.less";

src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-a11y.less

@@ -0,0 +1,10 @@
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html

@@ -11,7 +11,13 @@
         <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"
@@ -20,13 +26,14 @@
                             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
-                            autocomplete="off" maxlength="255" />
+                            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">