V8: Accessibility improvements for page name entry (#5760)

(cherry picked from commit ab3202b)
umbraco · Aug 9, 2019 · 9cab789 · 9cab789
1 parent a0cd542
commit 9cab789
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/...Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/...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
@@ -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
@@ -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
@@ -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>