From 1bac8141f55832dc4547f2c5da6b5195228df330 Mon Sep 17 00:00:00 2001 From: Rachel Breeze Date: Wed, 30 Oct 2019 10:14:47 +0000 Subject: [PATCH] V8: Accessibility Changes For umbEditorHeader Directive (#6315) * Umb editor control contains a11y support for the media section * Started work to align to the settings section * A11Y Amends for umbraco header directive specifically to support document type * Fixed error when creating a new user * This change makes sure that if a relationship type is edited, followed by a create, the title of the page is reset, a seperate PR will address the a11y requirements for this controller * Umbraco Header directive now uses "create" rather than create item * Made the ediorFor property more generic * Made the ediorFor property more generic Umbraco Header directive now uses "create" rather than create item * Edit and create template now aligns to the more a11y header directive * Added support for a11y name and title on settings->scripts * Added support for a11y name and title on settings->stylesheets * Added support for a11y name and title on settings->partial views * Added support for a11y name and title on settings->partial view macros * Added support for a11y name and title when editing members * Added support for a11y name and title when editing member groups * Updated to ignore package-lock * Added support for a11y name and title when editing media types * Added the ability to prevent the title being set via the umbeditorheader directive, currently for use when the content editor is editing media via a content page * No longer sets the page title by default * No longer sets the page title by default * Added support for a11y name and title when editing members * Added support for a11y name and title when editing dictionary items * Removed bug where by screen reader was reading "blank" when the name-locked value was set to true or there was no message/ name to display * Fixing redering issues following refactor * Don't ignore package-lock.json * Merged languages * Fix up merge errors --- .../editor/umbeditorheader.directive.js | 97 +- .../components/editor/umb-editor-header.html | 18 +- .../dictionary/dictionary.edit.controller.js | 4 + .../src/views/dictionary/edit.html | 4 +- .../views/documenttypes/edit.controller.js | 5 +- .../src/views/documenttypes/edit.html | 4 +- .../src/views/media/edit.html | 3 +- .../src/views/media/media.edit.controller.js | 3 +- .../src/views/mediatypes/edit.controller.js | 3 + .../src/views/mediatypes/edit.html | 4 +- .../src/views/member/edit.html | 4 +- .../views/member/member.edit.controller.js | 4 + .../src/views/membergroups/edit.controller.js | 3 + .../src/views/membergroups/edit.html | 4 +- .../src/views/membertypes/edit.controller.js | 5 +- .../src/views/membertypes/edit.html | 4 +- .../partialviewmacros/edit.controller.js | 3 + .../src/views/partialviewmacros/edit.html | 4 +- .../src/views/partialviews/edit.controller.js | 4 + .../src/views/partialviews/edit.html | 4 +- .../views/relationtypes/create.controller.js | 1 + .../src/views/scripts/edit.controller.js | 4 + .../src/views/scripts/edit.html | 6 +- .../src/views/stylesheets/edit.controller.js | 4 + .../src/views/stylesheets/edit.html | 4 +- .../src/views/templates/edit.controller.js | 4 + .../src/views/templates/edit.html | 4 +- src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 17 +- .../Umbraco/config/lang/en_us.xml | 4449 +++++++++-------- 29 files changed, 2423 insertions(+), 2254 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js index ebb780c36ee1..5607251a7f36 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js +++ b/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 true to hide icon. @param {string=} alias show and edit the content alias. -@param {boolean=} aliasLocked Set to true to lock the alias. @param {boolean=} hideAlias Set to true to hide alias. @param {string=} description Add a description to the content. @param {boolean=} hideDescription Set to true 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: " - -
+ +