Entity Actions: Create button discernible text (fixes #20205) (#20434)

* added hovering and focus border to RTE

* fix main to OG

* fix to main again

* I'm going to cry

* Missing localiztion feature, maybe UmbLitElement?

* added localization controller to fetch localized version

* localization successful for viewActionsFor and CreateFor

* clean up button text

* Changed label for content header to display proper name

* clean up code

* Included button labels for media section

* clean code

* Relocated localization keys,

as `actions_viewActionsFor` already existed.

Also made into a function, to support a fallback label.

* Simplified the "Create for" label/localization

Removed the need for a `getCreateAriaLabel()` method.

* Removed the double-localizations (of `actions_viewActionsFor`)

as the "umb-entity-actions-bundle" component handles this now.

* imports tidy-up

* Simplified localization key condition

---------

Co-authored-by: Oskar kruger <[email protected]>
Co-authored-by: leekelleher <[email protected]>

Author: 3 people

src/Umbraco.Web.UI.Client/src/assets/lang/de.ts

@@ -18,6 +18,7 @@ export default {
 		changeDataType: 'Datentyp ändern',
 		copy: 'Kopieren',
 		create: 'Neu',
+		createFor: (name: string) => (name ? `Neu erstellen für ${name}` : 'Neu'),
 		export: 'Exportieren',
 		createPackage: 'Neues Paket',
 		createGroup: 'Neue Gruppe',
@@ -63,6 +64,7 @@ export default {
 		unlock: 'Freigeben',
 		createblueprint: 'Inhaltsvorlage anlegen',
 		resendInvite: 'Einladung erneut versenden',
+		viewActionsFor: (name: string) => (name ? `Aktionen anzeigen für ${name}` : 'Aktionen anzeigen'),
 	},
 	actionCategories: {
 		content: 'Inhalt',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -23,6 +23,7 @@ export default {
 		copy: 'Duplicate',
 		copyTo: 'Duplicate to',
 		create: 'Create',
+		createFor: (name: string) => (name ? `Create item for ${name}` : 'Create'),
 		createblueprint: 'Create Document Blueprint',
 		createGroup: 'Create group',
 		createPackage: 'Create Package',

src/Umbraco.Web.UI.Client/src/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.ts

@@ -156,7 +156,7 @@ export class UmbClipboardEntryPickerElement extends UmbLitElement {
 				slot="actions"
 				.entityType=${item.entityType}
 				.unique=${item.unique}
-				.label=${this.localize.term('actions_viewActionsFor', [item.name])}>
+				.label=${this.localize.string(item.name)}>
 			</umb-entity-actions-bundle>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.ts

@@ -1,10 +1,10 @@
 import { UmbEntityContext } from '../../entity/entity.context.js';
-import type { UmbEntityAction, ManifestEntityActionDefaultKind } from '@umbraco-cms/backoffice/entity-action';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { html, nothing, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, customElement, html, ifDefined, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbEntityAction, ManifestEntityActionDefaultKind } from '@umbraco-cms/backoffice/entity-action';
 
 @customElement('umb-entity-actions-bundle')
 export class UmbEntityActionsBundleElement extends UmbLitElement {
@@ -114,28 +114,29 @@ export class UmbEntityActionsBundleElement extends UmbLitElement {
 
 	override render() {
 		if (this._numberOfActions === 0) return nothing;
-		return html`<uui-action-bar slot="actions">${this.#renderMore()} ${this.#renderFirstAction()} </uui-action-bar>`;
+		return html`<uui-action-bar slot="actions">${this.#renderMore()}${this.#renderFirstAction()}</uui-action-bar>`;
 	}
 
 	#renderMore() {
 		if (this._numberOfActions === 1) return nothing;
-
 		return html`
-			<umb-entity-actions-dropdown .label=${this.label} compact>
+			<umb-entity-actions-dropdown compact .label=${this.localize.term('actions_viewActionsFor', this.label)}>
 				<uui-symbol-more slot="label"></uui-symbol-more>
 			</umb-entity-actions-dropdown>
 		`;
 	}
 
 	#renderFirstAction() {
 		if (!this._firstActionApi || !this._firstActionManifest) return nothing;
-		return html`<uui-button
-			label=${this.localize.string(this._firstActionManifest.meta.label)}
-			data-mark=${'entity-action:' + this._firstActionManifest.alias}
-			@click=${this.#onFirstActionClick}
-			href="${ifDefined(this._firstActionHref)}">
-			<uui-icon name=${ifDefined(this._firstActionManifest.meta.icon)}></uui-icon>
-		</uui-button>`;
+		return html`
+			<uui-button
+				label=${this.localize.string(this._firstActionManifest.meta.label, this.label)}
+				data-mark=${'entity-action:' + this._firstActionManifest.alias}
+				href=${ifDefined(this._firstActionHref)}
+				@click=${this.#onFirstActionClick}>
+				<umb-icon name=${ifDefined(this._firstActionManifest.meta.icon)}></umb-icon>
+			</uui-button>
+		`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.kind.ts

@@ -15,7 +15,7 @@ export const manifest: UmbExtensionManifestKind = {
 		forEntityTypes: [],
 		meta: {
 			icon: 'icon-add',
-			label: '#actions_create',
+			label: '#actions_createFor',
 			additionalOptions: true,
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.ts

@@ -2,19 +2,15 @@ import { UmbEntityActionBase } from '../../entity-action-base.js';
 import type { UmbEntityActionArgs } from '../../types.js';
 import type { MetaEntityActionCreateKind } from './types.js';
 import { UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL } from './modal/constants.js';
+import { createExtensionApi, UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import {
-	type UmbExtensionManifestInitializer,
-	createExtensionApi,
-	UmbExtensionsManifestInitializer,
-	type PermittedControllerType,
-} from '@umbraco-cms/backoffice/extension-api';
 import type {
 	ManifestEntityCreateOptionAction,
 	UmbEntityCreateOptionAction,
 } from '@umbraco-cms/backoffice/entity-create-option-action';
+import type { PermittedControllerType, UmbExtensionManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbCreateEntityAction extends UmbEntityActionBase<MetaEntityActionCreateKind> {
 	#hasSingleOption = true;

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/global-components/entity-actions-table-column-view/entity-actions-table-column-view.element.ts

@@ -14,7 +14,7 @@ export class UmbEntityActionsTableColumnViewElement extends UmbLitElement {
 			<umb-entity-actions-bundle
 				.entityType=${this.value.entityType}
 				.unique=${this.value.unique}
-				.label=${this.localize.term('actions_viewActionsFor', [(this.value as any).name])}>
+				.label=${this.localize.string((this.value as any).name)}>
 			</umb-entity-actions-bundle>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item-layout/menu-item-layout.element.ts

@@ -1,4 +1,4 @@
-import { html, customElement, property, ifDefined, state } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, ifDefined, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { ensureSlash } from '@umbraco-cms/backoffice/router';
 import { debounce } from '@umbraco-cms/backoffice/utils';
@@ -72,24 +72,28 @@ export class UmbMenuItemLayoutElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-menu-item
-			href="${ifDefined(this.href)}"
-			label=${this.label}
-			.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this.label}
-			?active=${this._isActive}
-			?has-children=${this.hasChildren}
-			target=${ifDefined(this.href && this.target ? this.target : undefined)}>
-			<umb-icon slot="icon" name=${this.iconName}></umb-icon>
-			${this.entityType
-				? html`<umb-entity-actions-bundle
-						slot="actions"
-						.entityType=${this.entityType}
-						.unique=${null}
-						.label=${this.localize.term('actions_viewActionsFor', [this.label])}>
-					</umb-entity-actions-bundle>`
-				: ''}
-			<slot></slot>
-		</uui-menu-item>`;
+		return html`
+			<uui-menu-item
+				label=${this.label}
+				href=${ifDefined(this.href)}
+				target=${ifDefined(this.href && this.target ? this.target : undefined)}
+				.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this.label}
+				?active=${this._isActive}
+				?has-children=${this.hasChildren}>
+				<umb-icon slot="icon" name=${this.iconName}></umb-icon>
+				${when(
+					this.entityType,
+					() => html`
+						<umb-entity-actions-bundle
+							slot="actions"
+							.entityType=${this.entityType}
+							.unique=${null}
+							.label=${this.label}></umb-entity-actions-bundle>
+					`,
+				)}
+				<slot></slot>
+			</uui-menu-item>
+		`;
 	}
 
 	override disconnectedCallback() {

src/Umbraco.Web.UI.Client/src/packages/core/menu/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.ts

@@ -21,14 +21,15 @@ export class UmbSectionSidebarMenuWithEntityActionsElement extends UmbSectionSid
 	}
 
 	override renderHeader() {
+		const label = this.localize.string(this.manifest?.meta?.label ?? '');
 		return html`
 			<div id="header">
-				<h3>${this.localize.string(this.manifest?.meta?.label ?? '')}</h3>
+				<h3>${label}</h3>
 				<umb-entity-actions-bundle
 					slot="actions"
 					.unique=${this._unique}
 					.entityType=${this.manifest?.meta.entityType}
-					.label=${this.localize.term('actions_viewActionsFor', [this.manifest?.meta.label])}>
+					.label=${label}>
 				</umb-entity-actions-bundle>
 			</div>
 		`;

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts

@@ -138,6 +138,9 @@ export abstract class UmbTreeItemElementBase<
 	// Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
 	// If we like to be able to open items in selectable context, then we might want to make it as a menu item action, so you have to click ... and chose an action called 'Edit'
 	override render() {
+		const caretLabelKey = this._isOpen
+			? 'visuallyHiddenTexts_collapseChildItems'
+			: 'visuallyHiddenTexts_expandChildItems';
 		return html`
 			<uui-menu-item
 				@show-children=${this._onShowChildren}
@@ -151,11 +154,9 @@ export abstract class UmbTreeItemElementBase<
 				.loading=${this._isLoading}
 				.hasChildren=${this._hasChildren}
 				.showChildren=${this._isOpen}
-				.caretLabel=${this._isOpen
-					? this.localize.term('visuallyHiddenTexts_collapseChildItems') + ' ' + this._label
-					: this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this._label}
+				.caretLabel=${this.localize.term(caretLabelKey) + ' ' + this._label}
 				label=${ifDefined(this._label)}
-				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
+				href=${ifDefined(this._isSelectableContext ? undefined : this._href)}>
 				${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}
 				<slot></slot>
 				${this.#renderPaging()}
@@ -224,7 +225,7 @@ export abstract class UmbTreeItemElementBase<
 				slot="actions"
 				.entityType=${this.#api.entityType}
 				.unique=${this.#api.unique}
-				.label=${this.localize.term('actions_viewActionsFor', [this._label])}>
+				.label=${this._label}>
 			</umb-entity-actions-bundle>
 		`;
 	}