Tiptap RTE: A11Y label improvements

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

@@ -42,7 +42,13 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme
 	}
 
 	override render() {
-		return html`<uui-select .options=${this._list} @change=${this.#onChange}></uui-select>`;
+		return html`
+			<uui-select
+				label=${this.localize.term('rte_config_overlaySize')}
+				.options=${this._list}
+				@change=${this.#onChange}>
+			</uui-select>
+		`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-button.element.ts

@@ -1,7 +1,7 @@
 import type { ManifestTiptapToolbarExtensionButtonKind } from '../../extensions/index.js';
 import type { UmbTiptapToolbarElementApi } from '../../extensions/types.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
-import { customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-tiptap-toolbar-button')
@@ -43,7 +43,7 @@ export class UmbTiptapToolbarButtonElement extends UmbLitElement {
 			<uui-button
 				compact
 				look=${this.isActive ? 'outline' : 'default'}
-				label=${ifDefined(this.manifest?.meta.label)}
+				label=${label}
 				title=${label}
 				?disabled=${this.api && this.editor && this.api.isDisabled(this.editor)}
 				@click=${() => this.api?.execute(this.editor)}>

src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts

@@ -4,7 +4,7 @@ import type {
 	UmbTiptapToolbarElementApi,
 } from '../../extensions/index.js';
 import type { UmbCascadingMenuItem } from '../../components/cascading-menu-popover/cascading-menu-popover.element.js';
-import { css, customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
@@ -118,7 +118,7 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
 					<uui-button
 						compact
 						look=${this.isActive ? 'outline' : 'default'}
-						label=${ifDefined(label)}
+						label=${label}
 						title=${label}
 						popovertarget="popover-menu">
 						${when(
@@ -130,7 +130,7 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
 					</uui-button>
 				`,
 				() => html`
-					<uui-button compact label=${ifDefined(label)} popovertarget="popover-menu">
+					<uui-button compact label=${label} popovertarget="popover-menu">
 						<span>${label}</span>
 						<uui-symbol-expand slot="extra" open></uui-symbol-expand>
 					</uui-button>

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-statusbar-configuration.element.ts

@@ -128,14 +128,11 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 	}
 
 	#renderAvailableItems() {
+		const label = this.localize.term('placeholders_filter');
 		return html`
 			<uui-box id="toolbox" headline=${this.localize.term('tiptap_statusbar_availableItems')}>
 				<div slot="header-actions">
-					<uui-input
-						type="search"
-						autocomplete="off"
-						placeholder=${this.localize.term('placeholders_filter')}
-						@input=${this.#onFilterInput}>
+					<uui-input type="search" autocomplete="off" label=${label} placeholder=${label} @input=${this.#onFilterInput}>
 						<div slot="prepend">
 							<uui-icon name="search"></uui-icon>
 						</div>
@@ -161,20 +158,22 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 		const forbidden = !this.#context.isExtensionEnabled(item.alias);
 		const inUse = this.#context.isExtensionInUse(item.alias);
 		if (inUse || forbidden) return nothing;
+		const label = this.localize.string(item.label);
 		return html`
 			<uui-button
 				compact
 				class=${forbidden ? 'forbidden' : ''}
 				data-mark="tiptap-toolbar-item:${item.alias}"
 				draggable="true"
+				label=${label}
 				look=${forbidden ? 'placeholder' : 'outline'}
 				?disabled=${forbidden || inUse}
 				@click=${() => this.#onClick(item)}
 				@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
 				@dragend=${this.#onDragEnd}>
 				<div class="inner">
 					${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
-					<span>${this.localize.string(item.label)}</span>
+					<span>${label}</span>
 				</div>
 			</uui-button>
 		`;
@@ -218,22 +217,24 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
 		if (!item) return nothing;
 
 		const forbidden = !this.#context?.isExtensionEnabled(item.alias);
+		const label = this.localize.string(item.label);
 
 		return html`
 			<uui-button
 				compact
 				class=${forbidden ? 'forbidden' : ''}
 				data-mark="tiptap-toolbar-item:${item.alias}"
 				draggable="true"
+				label=${label}
 				look=${forbidden ? 'placeholder' : 'outline'}
-				title=${this.localize.string(item.label)}
+				title=${label}
 				?disabled=${forbidden}
 				@click=${() => this.#context.removeStatusbarItem([areaIndex, itemIndex])}
 				@dragend=${this.#onDragEnd}
 				@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [areaIndex, itemIndex])}>
 				<div class="inner">
 					${when(item.icon, (icon) => html`<umb-icon .name=${icon}></umb-icon>`)}
-					<span>${this.localize.string(item.label)}</span>
+					<span>${label}</span>
 				</div>
 			</uui-button>
 		`;

src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts

@@ -133,14 +133,11 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	}
 
 	#renderAvailableItems() {
+		const label = this.localize.term('placeholders_filter');
 		return html`
 			<uui-box id="toolbox" headline=${this.localize.term('tiptap_toobar_availableItems')}>
 				<div slot="header-actions">
-					<uui-input
-						type="search"
-						autocomplete="off"
-						placeholder=${this.localize.term('placeholders_filter')}
-						@input=${this.#onFilterInput}>
+					<uui-input type="search" autocomplete="off" label=${label} placeholder=${label} @input=${this.#onFilterInput}>
 						<div slot="prepend">
 							<uui-icon name="search"></uui-icon>
 						</div>
@@ -166,20 +163,22 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 		const forbidden = !this.#context.isExtensionEnabled(item.alias);
 		const inUse = this.#context.isExtensionInUse(item.alias);
 		if (inUse || forbidden) return nothing;
+		const label = this.localize.string(item.label);
 		return html`
 			<uui-button
 				compact
 				class=${forbidden ? 'forbidden' : ''}
 				data-mark="tiptap-toolbar-item:${item.alias}"
 				draggable="true"
+				label=${label}
 				look=${forbidden ? 'placeholder' : 'outline'}
 				?disabled=${forbidden || inUse}
 				@click=${() => this.#onClick(item)}
 				@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
 				@dragend=${this.#onDragEnd}>
 				<div class="inner">
 					${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
-					<span>${this.localize.string(item.label)}</span>
+					<span>${label}</span>
 				</div>
 			</uui-button>
 		`;
@@ -282,6 +281,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 		if (!item) return nothing;
 
 		const forbidden = !this.#context?.isExtensionEnabled(item.alias);
+		const label = this.localize.string(item.label);
 
 		switch (item.kind) {
 			case 'styleMenu':
@@ -291,14 +291,15 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 						compact
 						class=${forbidden ? 'forbidden' : ''}
 						draggable="true"
+						label=${label}
 						look=${forbidden ? 'placeholder' : 'outline'}
-						title=${this.localize.string(item.label)}
+						title=${label}
 						?disabled=${forbidden}
 						@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
 						@dragend=${this.#onDragEnd}
 						@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
 						<div class="inner">
-							<span>${this.localize.string(item.label)}</span>
+							<span>${label}</span>
 						</div>
 						<uui-symbol-expand slot="extra" open></uui-symbol-expand>
 					</uui-button>
@@ -313,7 +314,8 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 						data-mark="tiptap-toolbar-item:${item.alias}"
 						draggable="true"
 						look=${forbidden ? 'placeholder' : 'outline'}
-						title=${this.localize.string(item.label)}
+						label=${label}
+						title=${label}
 						?disabled=${forbidden}
 						@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
 						@dragend=${this.#onDragEnd}
@@ -322,7 +324,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 							${when(
 								item.icon,
 								() => html`<umb-icon .name=${item.icon}></umb-icon>`,
-								() => html`<span>${this.localize.string(item.label)}</span>`,
+								() => html`<span>${label}</span>`,
 							)}
 						</div>
 					</uui-button>