diff --git a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html index 4423c4b7a..a193a8dbe 100644 --- a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html +++ b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html @@ -17,12 +17,12 @@ - - diff --git a/src/core/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/editor/components/rich-text-editor/rich-text-editor.ts index 6d51f3515..648567082 100644 --- a/src/core/editor/components/rich-text-editor/rich-text-editor.ts +++ b/src/core/editor/components/rich-text-editor/rich-text-editor.ts @@ -84,8 +84,8 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe toolbarPrevHidden = true; toolbarNextHidden = false; toolbarStyles = { - b: 'false', - i: 'false', + strong: 'false', + em: 'false', u: 'false', strike: 'false', p: 'false', @@ -193,6 +193,10 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe this.element.setAttribute('id', this.elementId); } + // Update tags for a11y. + this.replaceTags('b', 'strong'); + this.replaceTags('i', 'em'); + if (this.shouldAutoSaveDrafts()) { this.restoreDraft(); @@ -301,7 +305,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe * * @param $event The event. */ - onChange($event: Event): void { + onChange($event?: Event): void { if (this.rteEnabled) { if (this.isNullOrWhiteSpace(this.editorElement.innerText)) { this.clearText(); @@ -468,6 +472,9 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe // Set focus and cursor at the end. // Modify the DOM directly so the keyboard stays open. if (this.rteEnabled) { + // Update tags for a11y. + this.replaceTags('b', 'strong'); + this.replaceTags('i', 'em'); this.editorElement.removeAttribute('hidden'); this.textarea.getNativeElement().setAttribute('hidden', ''); this.editorElement.focus(); @@ -598,10 +605,43 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe } document.execCommand(command, false); + + // Modern browsers are using non a11y tags, so replace them. + if (command == 'bold') { + this.replaceTags('b', 'strong'); + } else if (command == 'italic') { + this.replaceTags('i', 'em'); + } } } } + /** + * Replace tags for a11y. + * + * @param originTag Origin tag to be replaced. + * @param destinationTag Destination tag to replace. + */ + protected replaceTags(originTag: string, destinationTag: string): void { + const elems = Array.from(this.editorElement.getElementsByTagName(originTag)); + + elems.forEach((elem) => { + const newElem = document.createElement(destinationTag); + newElem.innerHTML = elem.innerHTML; + + if (elem.hasAttributes()) { + const attrs = Array.from(elem.attributes); + attrs.forEach((attr) => { + newElem.setAttribute(attr.name, attr.value); + }); + } + + elem.parentNode.replaceChild(newElem, elem); + }); + + this.onChange(); + } + /** * Focus editor when click the area. *