Skip to content

Commit 9cb0557

Browse files
leekelleheriOvergaard
leekelleher
and
iOvergaard
authored
Tiptap RTE: A11Y label improvements (#19531)
* a11y: Adds labels to Tiptap RTE toolbar buttons/menus * a11y: Adds labels to Tiptap toolbar designer actions * a11y: Adds labels to Tiptap statusbar designer actions * a11y: Adds label to Overlay Size dropdown --------- Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
1 parent f7aab5e commit 9cb0557

File tree

5 files changed

+33
-24
lines changed

5 files changed

+33
-24
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,13 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme
4242
}
4343

4444
override render() {
45-
return html`<uui-select .options=${this._list} @change=${this.#onChange}></uui-select>`;
45+
return html`
46+
<uui-select
47+
label=${this.localize.term('rte_config_overlaySize')}
48+
.options=${this._list}
49+
@change=${this.#onChange}>
50+
</uui-select>
51+
`;
4652
}
4753
}
4854

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ManifestTiptapToolbarExtensionButtonKind } from '../../extensions/index.js';
22
import type { UmbTiptapToolbarElementApi } from '../../extensions/types.js';
33
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
4-
import { customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
4+
import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
55
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
66

77
@customElement('umb-tiptap-toolbar-button')
@@ -43,7 +43,7 @@ export class UmbTiptapToolbarButtonElement extends UmbLitElement {
4343
<uui-button
4444
compact
4545
look=${this.isActive ? 'outline' : 'default'}
46-
label=${ifDefined(this.manifest?.meta.label)}
46+
label=${label}
4747
title=${label}
4848
?disabled=${this.api && this.editor && this.api.isDisabled(this.editor)}
4949
@click=${() => this.api?.execute(this.editor)}>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type {
44
UmbTiptapToolbarElementApi,
55
} from '../../extensions/index.js';
66
import type { UmbCascadingMenuItem } from '../../components/cascading-menu-popover/cascading-menu-popover.element.js';
7-
import { css, customElement, html, ifDefined, state, when } from '@umbraco-cms/backoffice/external/lit';
7+
import { css, customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
88
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
99
import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
1010

@@ -122,7 +122,7 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
122122
() => html`
123123
<uui-button
124124
compact
125-
label=${ifDefined(label)}
125+
label=${label}
126126
look=${this.isActive ? 'outline' : 'default'}
127127
title=${label}
128128
popovertarget="popover-menu">
@@ -137,7 +137,7 @@ export class UmbTiptapToolbarMenuElement extends UmbLitElement {
137137
() => html`
138138
<uui-button
139139
compact
140-
label=${ifDefined(label)}
140+
label=${label}
141141
look=${this.isActive ? 'outline' : 'default'}
142142
popovertarget="popover-menu">
143143
<span>${label}</span>

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -128,14 +128,11 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
128128
}
129129

130130
#renderAvailableItems() {
131+
const label = this.localize.term('placeholders_filter');
131132
return html`
132133
<uui-box id="toolbox" headline=${this.localize.term('tiptap_statusbar_availableItems')}>
133134
<div slot="header-actions">
134-
<uui-input
135-
type="search"
136-
autocomplete="off"
137-
placeholder=${this.localize.term('placeholders_filter')}
138-
@input=${this.#onFilterInput}>
135+
<uui-input type="search" autocomplete="off" label=${label} placeholder=${label} @input=${this.#onFilterInput}>
139136
<div slot="prepend">
140137
<uui-icon name="search"></uui-icon>
141138
</div>
@@ -161,20 +158,22 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
161158
const forbidden = !this.#context.isExtensionEnabled(item.alias);
162159
const inUse = this.#context.isExtensionInUse(item.alias);
163160
if (inUse || forbidden) return nothing;
161+
const label = this.localize.string(item.label);
164162
return html`
165163
<uui-button
166164
compact
167165
class=${forbidden ? 'forbidden' : ''}
168166
data-mark="tiptap-toolbar-item:${item.alias}"
169167
draggable="true"
168+
label=${label}
170169
look=${forbidden ? 'placeholder' : 'outline'}
171170
?disabled=${forbidden || inUse}
172171
@click=${() => this.#onClick(item)}
173172
@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
174173
@dragend=${this.#onDragEnd}>
175174
<div class="inner">
176175
${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
177-
<span>${this.localize.string(item.label)}</span>
176+
<span>${label}</span>
178177
</div>
179178
</uui-button>
180179
`;
@@ -218,22 +217,24 @@ export class UmbPropertyEditorUiTiptapStatusbarConfigurationElement
218217
if (!item) return nothing;
219218

220219
const forbidden = !this.#context?.isExtensionEnabled(item.alias);
220+
const label = this.localize.string(item.label);
221221

222222
return html`
223223
<uui-button
224224
compact
225225
class=${forbidden ? 'forbidden' : ''}
226226
data-mark="tiptap-toolbar-item:${item.alias}"
227227
draggable="true"
228+
label=${label}
228229
look=${forbidden ? 'placeholder' : 'outline'}
229-
title=${this.localize.string(item.label)}
230+
title=${label}
230231
?disabled=${forbidden}
231232
@click=${() => this.#context.removeStatusbarItem([areaIndex, itemIndex])}
232233
@dragend=${this.#onDragEnd}
233234
@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [areaIndex, itemIndex])}>
234235
<div class="inner">
235236
${when(item.icon, (icon) => html`<umb-icon .name=${icon}></umb-icon>`)}
236-
<span>${this.localize.string(item.label)}</span>
237+
<span>${label}</span>
237238
</div>
238239
</uui-button>
239240
`;

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,11 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
133133
}
134134

135135
#renderAvailableItems() {
136+
const label = this.localize.term('placeholders_filter');
136137
return html`
137138
<uui-box id="toolbox" headline=${this.localize.term('tiptap_toobar_availableItems')}>
138139
<div slot="header-actions">
139-
<uui-input
140-
type="search"
141-
autocomplete="off"
142-
placeholder=${this.localize.term('placeholders_filter')}
143-
@input=${this.#onFilterInput}>
140+
<uui-input type="search" autocomplete="off" label=${label} placeholder=${label} @input=${this.#onFilterInput}>
144141
<div slot="prepend">
145142
<uui-icon name="search"></uui-icon>
146143
</div>
@@ -166,20 +163,22 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
166163
const forbidden = !this.#context.isExtensionEnabled(item.alias);
167164
const inUse = this.#context.isExtensionInUse(item.alias);
168165
if (inUse || forbidden) return nothing;
166+
const label = this.localize.string(item.label);
169167
return html`
170168
<uui-button
171169
compact
172170
class=${forbidden ? 'forbidden' : ''}
173171
data-mark="tiptap-toolbar-item:${item.alias}"
174172
draggable="true"
173+
label=${label}
175174
look=${forbidden ? 'placeholder' : 'outline'}
176175
?disabled=${forbidden || inUse}
177176
@click=${() => this.#onClick(item)}
178177
@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
179178
@dragend=${this.#onDragEnd}>
180179
<div class="inner">
181180
${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
182-
<span>${this.localize.string(item.label)}</span>
181+
<span>${label}</span>
183182
</div>
184183
</uui-button>
185184
`;
@@ -282,6 +281,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
282281
if (!item) return nothing;
283282

284283
const forbidden = !this.#context?.isExtensionEnabled(item.alias);
284+
const label = this.localize.string(item.label);
285285

286286
switch (item.kind) {
287287
case 'styleMenu':
@@ -291,14 +291,15 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
291291
compact
292292
class=${forbidden ? 'forbidden' : ''}
293293
draggable="true"
294+
label=${label}
294295
look=${forbidden ? 'placeholder' : 'outline'}
295-
title=${this.localize.string(item.label)}
296+
title=${label}
296297
?disabled=${forbidden}
297298
@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
298299
@dragend=${this.#onDragEnd}
299300
@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
300301
<div class="inner">
301-
<span>${this.localize.string(item.label)}</span>
302+
<span>${label}</span>
302303
</div>
303304
<uui-symbol-expand slot="extra" open></uui-symbol-expand>
304305
</uui-button>
@@ -313,7 +314,8 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
313314
data-mark="tiptap-toolbar-item:${item.alias}"
314315
draggable="true"
315316
look=${forbidden ? 'placeholder' : 'outline'}
316-
title=${this.localize.string(item.label)}
317+
label=${label}
318+
title=${label}
317319
?disabled=${forbidden}
318320
@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
319321
@dragend=${this.#onDragEnd}
@@ -322,7 +324,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
322324
${when(
323325
item.icon,
324326
() => html`<umb-icon .name=${item.icon}></umb-icon>`,
325-
() => html`<span>${this.localize.string(item.label)}</span>`,
327+
() => html`<span>${label}</span>`,
326328
)}
327329
</div>
328330
</uui-button>

0 commit comments

Comments
 (0)