diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html index 8daa430f7..029b97c3d 100644 --- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html +++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html @@ -6,7 +6,7 @@
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts index 2d54bd8f6..48787de7f 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts @@ -231,11 +231,18 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit, return; } - const updateArialabelledBy = () => this.ariaLabelledBy = label.getAttribute('id') ?? undefined; + const updateArialabelledBy = () => { + this.ariaLabelledBy = label.getAttribute('id') ?? undefined; + }; this.labelObserver = new MutationObserver(updateArialabelledBy); this.labelObserver.observe(label, { attributes: true, attributeFilter: ['id'] }); + // Usually the label won't have an id, so we need to add one. + if (!label.getAttribute('id')) { + label.setAttribute('id', 'rte-'+CoreUtils.getUniqueId('CoreEditorRichTextEditor')); + } + updateArialabelledBy(); }