V8: Accessibility Changes For umbEditorHeader Directive

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

@@ -195,22 +195,55 @@ Use this directive to construct a header inside the main editor window.
 @param {string=} icon Show and edit the content icon. Opens an overlay to change the icon.
 @param {boolean=} hideIcon Set to <code>true</code> to hide icon.
 @param {string=} alias show and edit the content alias.
-@param {boolean=} aliasLocked Set to <code>true</code> to lock the alias.
 @param {boolean=} hideAlias Set to <code>true</code> to hide alias.
 @param {string=} description Add a description to the content.
 @param {boolean=} hideDescription Set to <code>true</code> to hide description.
-
+@param {boolean=} setpagetitle If true the page title will be set to reflect the type of data the header is working with 
+@param {string=} editorfor The localization to use to aid accessibility on the edit and create screen
 **/
 
 (function () {
     'use strict';
 
-    function EditorHeaderDirective(editorService) {
+    function EditorHeaderDirective(editorService, localizationService, editorState) {
+
+        function link(scope, $injector) {
 
-        function link(scope) {
             scope.vm = {};
             scope.vm.dropdownOpen = false;
             scope.vm.currentVariant = "";
+            scope.loading = true;
+            scope.accessibility = {};
+            scope.accessibility.a11yMessage = "";
+            scope.accessibility.a11yName = "";
+            scope.accessibility.a11yMessageVisible = false;
+            scope.accessibility.a11yNameVisible = false;
+
+            // need to call localizationService service outside of routine to set a11y due to promise requirements
+            if (editorState.current) {
+                //to do make work for user create/edit
+                // to do make it work for user group create/ edit
+                // to make it work for language edit/create
+                scope.isNew = editorState.current.id === 0 ||
+                    editorState.current.id === "0" ||
+                    editorState.current.id === -1 ||
+                    editorState.current.id === 0 ||
+                    editorState.current.id === "-1";
+
+                var localizeVars = [
+                    scope.isNew ? "placeholders_a11yCreateItem" : "placeholders_a11yEdit",
+                    "placeholders_a11yName",
+                    scope.isNew ? "general_new" : "general_edit"
+                ];
+
+                if (scope.editorfor) {
+                    localizeVars.push(scope.editorfor);
+                }
+                localizationService.localizeMany(localizeVars).then(function (data) {
+                    setAccessibilityForEditor(data);
+                    scope.loading = false;
+                });
+            }
 
             scope.goBack = function () {
                 if (scope.onBack) {
@@ -247,6 +280,57 @@ Use this directive to construct a header inside the main editor window.
                 editorService.iconPicker(iconPicker);
             };
 
+            function setAccessibilityForEditor(data) {
+
+               if (editorState.current) {
+                   if (scope.nameLocked) {
+                       scope.accessibility.a11yName = scope.name;
+                       SetPageTitle(scope.name);
+                   } else {
+
+                       scope.accessibility.a11yMessage = data[0];
+                       scope.accessibility.a11yName = data[1];
+                           var title = data[2] + ":";
+                           if (!scope.isNew) {
+                               scope.accessibility.a11yMessage += " " + scope.name;
+                               title += " " + scope.name;
+                           } else {
+                               var name = "";
+                               if (editorState.current.contentTypeName) {
+                                   name = editorState.current.contentTypeName;
+                               } else if (scope.editorfor) {
+                                   name = data[3];
+                               }
+                               if (name !== "") {
+                                   scope.accessibility.a11yMessage += " " + name;
+                                   scope.accessibility.a11yName = name + " " + scope.accessibility.a11yName;
+                                   title += " " + name;
+                               }
+                           }
+                           if (title !== data[2] + ":") {
+                               SetPageTitle(title);
+                           }
+
+                   }
+                   scope.accessibility.a11yMessageVisible = !isEmptyOrSpaces(scope.accessibility.a11yMessage);
+                   scope.accessibility.a11yNameVisible = !isEmptyOrSpaces(scope.accessibility.a11yName);
+                }
+
+            }
+
+           function isEmptyOrSpaces(str) {
+               return str === null || str===undefined || str.trim ==='';
+            }
+
+            function SetPageTitle(title) {
+                var setTitle = false;
+                if (scope.setpagetitle !== undefined) {
+                    setTitle = scope.setpagetitle;
+                }
+                if (setTitle) {
+                    scope.$emit("$changeTitle", title);
+                }
+            }
         }
 
         var directive = {
@@ -262,7 +346,6 @@ Use this directive to construct a header inside the main editor window.
                 icon: "=",
                 hideIcon: "@",
                 alias: "=",
-                aliasLocked: "<",
                 hideAlias: "=",
                 description: "=",
                 hideDescription: "@",
@@ -271,7 +354,9 @@ Use this directive to construct a header inside the main editor window.
                 onSelectNavigationItem: "&?",
                 key: "=",
                 onBack: "&?",
-                showBackButton: "<?"
+                showBackButton: "<?",
+                editorfor: "=",
+                setpagetitle:"="
             },
             link: link
         };

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

@@ -1,6 +1,6 @@
 <div data-element="editor-header" class="umb-editor-header" ng-class="{'-split-view-active': splitViewOpen === true}">
-
-    <div class="flex items-center" style="height: 100%;">
+    <umb-loader ng-show="loading"></umb-loader>
+    <div class="flex items-center" style="height: 100%;" ng-hide="loading">
 
         <div ng-if="showBackButton === true && splitViewOpen !== true" style="margin-right: 15px;">
             <button type="button" class="umb-editor-header__back" ng-click="goBack()" prevent-default>
@@ -22,11 +22,18 @@
             </ng-form>
 
             <div id="nameField" class="umb-editor-header__name-and-description" style="flex: 1 1 auto;">
+                <div>
+                    <p tabindex="0" class="sr-only" ng-show="accessibility.a11yMessageVisible">
+                        {{accessibility.a11yMessage}}
+                    </p>
+                </div>
                 <div class="umb-editor-header__name-wrapper" ng-show="!nameLocked || !hideAlias">
+                    <label for="headerName" class="sr-only" ng-show="accessibility.a11yNameVisible">{{accessibility.a11yName}}</label>
                     <ng-form name="headerNameForm">
                         <input data-element="editor-name-field"
                                no-password-manager
                                type="text"
+                               id="headerName"
                                class="umb-editor-header__name-input"
                                localize="placeholder"
                                placeholder="@placeholders_entername"
@@ -38,7 +45,10 @@
                                focus-on-filled="true"
                                val-server-field="Name"
                                required
-                               autocomplete="off" />
+                               aria-required="true"
+                               aria-invalid="{{contentForm.headerNameForm.headerName.$invalid ? true : false}}"
+                               autocomplete="off"
+                               maxlength="255"/>
                     </ng-form>
 
                     <umb-generate-alias data-element="editor-alias"
@@ -62,7 +72,7 @@
                        localize="placeholder"
                        placeholder="@placeholders_enterDescription"
                        ng-if="!hideDescription && !descriptionLocked"
-                       ng-model="$parent.description" />
+                       ng-model="$parent.description"/>
 
                 <div class="umb-panel-header-locked-description" ng-if="descriptionLocked">{{ description }}</div>
 

src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.edit.controller.js

@@ -12,6 +12,10 @@ function DictionaryEditController($scope, $routeParams, $location, dictionaryRes
 
     //setup scope vars
     vm.nameDirty = false;
+    vm.header = {};
+    vm.header.editorfor = "template_insertDictionaryItem";
+    vm.header.setPageTitle = true;
+
     vm.page = {};
     vm.page.loading = false;
     vm.page.nameLocked = false;

src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html

@@ -13,7 +13,9 @@
                 hide-description="true"
                 hide-alias="true"
                 on-back="vm.back()"
-                show-back-button="vm.showBackButton">
+                show-back-button="vm.showBackButton"
+                editorfor="vm.header.editorfor"
+                setpagetitle="vm.header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container class="form-horizontal">

src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js

@@ -25,6 +25,9 @@
 
         vm.currentNode = null;
         vm.contentType = {};
+        vm.header = {};
+        vm.header.editorfor = "content_documentType";
+        vm.header.setPageTitle = true;
         vm.labels = {};
         vm.submitButtonKey = "buttons_save";
         vm.generateModelsKey = "buttons_saveAndGenerateModels";
@@ -33,7 +36,7 @@
         vm.page.loading = false;
         vm.page.saveButtonState = "init";
         vm.page.navigation = [];
-
+     
         var labelKeys = [
             "general_design",
             "general_listView",

src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html

@@ -12,7 +12,9 @@
                 key="vm.contentType.key"
                 description="vm.contentType.description"
                 navigation="vm.page.navigation"
-                icon="vm.contentType.icon">
+                icon="vm.contentType.icon"
+                editorfor="vm.header.editorfor"
+                setpagetitle="vm.header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container class="editors-document-type-container">

src/Umbraco.Web.UI.Client/src/views/media/edit.html

@@ -16,7 +16,8 @@
                                navigation="content.apps"
                                on-select-navigation-item="appChanged(item)"
                                show-back-button="showBack()"
-                               on-back="onBack()">
+                               on-back="onBack()"
+                               setpagetitle="header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container>

src/Umbraco.Web.UI.Client/src/views/media/media.edit.controller.js

@@ -35,7 +35,8 @@ function mediaEditController($scope, $routeParams, $q, appState, mediaResource,
     //setup scope vars
     $scope.currentSection = appState.getSectionState("currentSection");
     $scope.currentNode = null; //the editors affiliated node
-
+    $scope.header = {};
+    $scope.header.setPageTitle = $scope.currentSection ==="media";
     $scope.page = {};
     $scope.page.loading = false;
     $scope.page.menu = {};

src/Umbraco.Web.UI.Client/src/views/mediatypes/edit.controller.js

@@ -24,6 +24,9 @@
         vm.close = close;
 
         vm.currentNode = null;
+        vm.header = {};
+        vm.header.editorfor = "content_mediatype";
+        vm.header.setPageTitle = true;
         vm.contentType = {};
         vm.page = {};
         vm.page.loading = false;

src/Umbraco.Web.UI.Client/src/views/mediatypes/edit.html

@@ -12,7 +12,9 @@
                 key="vm.contentType.key"
                 description="vm.contentType.description"
                 navigation="vm.page.navigation"
-                icon="vm.contentType.icon">
+                icon="vm.contentType.icon"
+                editorfor="vm.header.editorfor"
+                setpagetitle="vm.header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container class="editors-document-type-container">

src/Umbraco.Web.UI.Client/src/views/member/edit.html

@@ -15,7 +15,9 @@
             hide-description="true"
             hide-alias="true"
             show-back-button="showBack()"
-            on-back="onBack()">
+            on-back="onBack()"
+            editorfor="header.editorfor"
+            setpagetitle="header.setPageTitle">
           </umb-editor-header>
 
          <umb-editor-container class="form-horizontal">

src/Umbraco.Web.UI.Client/src/views/member/member.edit.controller.js

@@ -14,6 +14,10 @@ function MemberEditController($scope, $routeParams, $location, appState, memberR
     var listName = infiniteMode ? $scope.model.listname : $routeParams.listName;
     var docType = infiniteMode ? $scope.model.doctype : $routeParams.doctype;
 
+    $scope.header = {};
+    $scope.header.editorfor = "visuallyHiddenTexts_newMember";
+    $scope.header.setPageTitle = true;
+
     //setup scope vars
     $scope.page = {};
     $scope.page.loading = true;

src/Umbraco.Web.UI.Client/src/views/membergroups/edit.controller.js

@@ -11,6 +11,9 @@ function MemberGroupsEditController($scope, $routeParams, appState, navigationSe
     //setup scope vars
     $scope.page = {};
     $scope.page.loading = false;
+    $scope.header = {};
+    $scope.header.editorfor = "content_membergroup";
+    $scope.header.setPageTitle = true;
     $scope.page.menu = {};
     $scope.page.menu.currentSection = appState.getSectionState("currentSection");
     $scope.page.menu.currentNode = null;

src/Umbraco.Web.UI.Client/src/views/membergroups/edit.html

@@ -14,7 +14,9 @@
                                name-locked="page.nameLocked"
                                hide-icon="true"
                                hide-description="true"
-                               hide-alias="true">
+                               hide-alias="true"
+                               editorfor="header.editorfor"
+                               setpagetitle="header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container class="form-horizontal">

src/Umbraco.Web.UI.Client/src/views/membertypes/edit.controller.js

@@ -15,7 +15,10 @@
         var vm = this;
 
         vm.save = save;
-
+        vm.editorfor = "visuallyHiddenTexts_newMember";
+        vm.header = {};
+        vm.header.editorfor = "content_membergroup";
+        vm.header.setPageTitle = true;
         vm.currentNode = null;
         vm.contentType = {};
         vm.page = {};

src/Umbraco.Web.UI.Client/src/views/membertypes/edit.html

@@ -11,7 +11,9 @@
                 alias="vm.contentType.alias"
                 description="vm.contentType.description"
                 navigation="vm.page.navigation"
-                icon="vm.contentType.icon">
+                icon="vm.contentType.icon"
+                editorfor="vm.header.editorfor"
+                setpagetitle="vm.header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container class="editors-document-type-container">

src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.controller.js

@@ -5,6 +5,9 @@
 
         var vm = this;
 
+        vm.header = {};
+        vm.header.editorfor = "visuallyHiddenTexts_newPartialViewMacro";
+        vm.header.setPageTitle = true;
         vm.page = {};
         vm.page.loading = true;
         vm.partialViewMacroFile = {};

src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.html

@@ -14,7 +14,9 @@
                 hide-alias="true"
                 description="vm.partialViewMacro.virtualPath"
                 description-locked="true"
-                hide-icon="true">
+                hide-icon="true"
+                editorfor="vm.header.editorfor"
+                setpagetitle="vm.header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container>

src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js

@@ -17,6 +17,10 @@
 
         vm.close = close;
 
+        vm.header = {};
+        vm.header.editorfor = "visuallyHiddenTexts_newPartialView";
+        vm.header.setPageTitle = true;
+
         vm.page = {};
         vm.page.loading = true;
         vm.partialView = {};

src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html

@@ -14,7 +14,9 @@
                 hide-alias="true"
                 description="vm.partialView.virtualPath"
                 description-locked="true"
-                hide-icon="true">
+                hide-icon="true"
+                editorfor="vm.header.editorfor"
+                setpagetitle="vm.header.setPageTitle">
             </umb-editor-header>
 
             <umb-editor-container>

src/Umbraco.Web.UI.Client/src/views/relationtypes/create.controller.js

@@ -16,6 +16,7 @@ function RelationTypeCreateController($scope, $location, relationTypeResource, n
     init();
 
     function init() {
+        $scope.$emit("$changeTitle", "");
         relationTypeResource.getRelationObjectTypes().then(function(data) {
                 vm.objectTypes = data;
             },