V15/feature/toggle property editor UI (#18171)

* update the setting for the toggle satet

* update the setting for the toggle satet

* adds a fallback label if no ariaLabel is set in the manifest, using toggleFor

Author: Welander1994

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

@@ -822,6 +822,7 @@ export default {
 		error: 'Error',
 		field: 'Field',
 		fieldFor: 'Field for %0%',
+		toggleFor: 'Toggle for %0%',
 		findDocument: 'Find',
 		first: 'First',
 		focalPoint: 'Focal point',

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

@@ -819,6 +819,7 @@ export default {
 		error: 'Error',
 		field: 'Field',
 		fieldFor: 'Field for %0%',
+		toggleFor: 'Toggle for %0%',
 		findDocument: 'Find',
 		first: 'First',
 		focalPoint: 'Focal point',

src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts

@@ -26,6 +26,9 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 	@property({ type: String })
 	labelOff?: string;
 
+	@property({ type: String, attribute: 'aria-label' })
+	override ariaLabel: string | null = null;
+
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
@@ -42,6 +45,8 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 		return undefined;
 	}
 
+	// test
+
 	override connectedCallback(): void {
 		super.connectedCallback();
 		this.#updateLabel();
@@ -54,15 +59,15 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 	}
 
 	#updateLabel() {
-		this._currentLabel = this.showLabels ? (this.checked ? this.labelOn : this.labelOff) : '';
+		this._currentLabel = this.showLabels ? (this.checked ? this.labelOn : this.labelOff) : ''; 
 	}
 
 	override render() {
 		return html`<uui-toggle
 			.checked=${this.#checked}
-			.label=${this._currentLabel}
+			.label="${this.ariaLabel}"
 			@change=${this.#onChange}
-			?readonly=${this.readonly}></uui-toggle>`;
+			?readonly=${this.readonly}><span>${this._currentLabel}</span> </uui-toggle>`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/manifests.ts

@@ -16,27 +16,43 @@ export const manifests: Array<UmbExtensionManifest> = [
 				properties: [
 					{
 						alias: 'default',
-						label: 'Initial State',
-						description:
-							'The initial state for the toggle, when it is displayed for the first time in the backoffice, eg. for a new content item.',
+						label: 'Preset value',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+						config: [
+	
+							{
+								alias: "ariaLabel",
+								value: 'toggle for the initial state of this data type'
+							}
+						]
 					},
 					{
 						alias: 'showLabels',
-						label: 'Show toggle labels',
-						description: 'Show labels next to toggle button.',
+						label: 'Show on/off labels',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+						config: [
+	
+							{
+								alias: "ariaLabel",
+								value: 'toggle for weather if label should be displayed'
+							}
+						]
 					},
 					{
 						alias: 'labelOn',
 						label: 'Label On',
-						description: 'Label text when enabled.',
+						description: 'Displays text when enabled.',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
 					},
 					{
 						alias: 'labelOff',
 						label: 'Label Off',
-						description: 'Label text when disabled.',
+						description: 'Displays text when disabled.',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+					},
+					{
+						alias: 'ariaLabel',
+						label: 'Screen Reader Label',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
 					},
 				],

src/Umbraco.Web.UI.Client/src/packages/property-editors/toggle/property-editor-ui-toggle.element.ts

@@ -24,21 +24,30 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
 
+	@state()
+	_ariaLabel?: string;
+
 	@state()
 	_labelOff?: string;
 
 	@state()
 	_labelOn?: string;
 
+	@property({ type: String })
+	name?: string;
+
 	@state()
 	_showLabels = false;
 
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		this.value ??= config.getValueByAlias('default') ?? false;
+
 		this._labelOff = config.getValueByAlias('labelOff');
 		this._labelOn = config.getValueByAlias('labelOn');
 		this._showLabels = Boolean(config.getValueByAlias('showLabels'));
+		this._ariaLabel = config.getValueByAlias('ariaLabel');
 	}
 
 	#onChange(event: CustomEvent & { target: UmbInputToggleElement }) {
@@ -49,7 +58,8 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 	override render() {
 		return html`
 			<umb-input-toggle
-				.labelOn=${this._labelOn}
+
+				.ariaLabel=${this._ariaLabel ? this.localize.string(this._ariaLabel) : this.localize.term('general_toggleFor', [this.name])}
 				.labelOff=${this._labelOff}
 				?checked=${this.value}
 				?showLabels=${this._showLabels}