GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3419 rte: Change italics anb bold to a11y tag

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2020-05-26 12:16:35 +02:00
parent 2752580203
commit 049d1e2d4a
2 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
View File

@ -17,12 +17,12 @@
<ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold', 'b')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.bold' | translate">
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" (click)="buttonAction($event, 'bold', 'strong')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.bold' | translate">
<core-icon name="fa-bold"></core-icon>
</button>
</ion-slide>
<ion-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic', 'i')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.italic' | translate">
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" (click)="buttonAction($event, 'italic', 'em')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.italic' | translate">
<core-icon name="fa-italic"></core-icon>
</button>
</ion-slide>

46
src/core/editor/components/rich-text-editor/rich-text-editor.ts
View File

@ -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.
*