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

src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html

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

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',
+        strong: 'false',
-        i: '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,9 +605,42 @@ 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.