Merge pull request #3186 from NoelDeMartin/MOBILE-3833

MOBILE-3833: Fix RTE & aria-label reactivity
main
Pau Ferrer Ocaña 2022-03-16 21:07:29 +01:00 committed by GitHub
commit 401f8aa2bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 9 deletions

View File

@ -33,15 +33,18 @@ export class CoreUpdateNonReactiveAttributesDirective implements OnInit, OnDestr
constructor(element: ElementRef<HTMLIonButtonElement>) { constructor(element: ElementRef<HTMLIonButtonElement>) {
this.element = element.nativeElement; this.element = element.nativeElement;
this.mutationObserver = new MutationObserver(() => { this.mutationObserver = new MutationObserver(() => {
const ariaLabel = this.element.getAttribute('aria-label'); const button = this.element.shadowRoot?.querySelector('button');
if (!ariaLabel) {
// Aria label unset by ionButton component (when first created). if (!button) {
return; return;
} }
// Propagate label to button. // Propagate label to button.
const button = this.element.shadowRoot?.querySelector('button'); const ariaLabel = this.element.getAttribute('aria-label');
button?.setAttribute('aria-label', ariaLabel);
ariaLabel
? button.setAttribute('aria-label', ariaLabel)
: button.removeAttribute('aria-label');
}); });
} }
@ -51,10 +54,6 @@ export class CoreUpdateNonReactiveAttributesDirective implements OnInit, OnDestr
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
await this.element.componentOnReady(); await this.element.componentOnReady();
if (!this.element.getAttribute('aria-label')) {
return;
}
this.mutationObserver.observe(this.element, { attributes: true, attributeFilter: ['aria-label'] }); this.mutationObserver.observe(this.element, { attributes: true, attributeFilter: ['aria-label'] });
} }

View File

@ -176,6 +176,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.editorElement.oninput = this.onChange.bind(this); this.editorElement.oninput = this.onChange.bind(this);
this.editorElement.onkeydown = this.moveCursor.bind(this); this.editorElement.onkeydown = this.moveCursor.bind(this);
await CoreDomUtils.waitToBeVisible(this.editorElement);
// Use paragraph on enter. // Use paragraph on enter.
document.execCommand('DefaultParagraphSeparator', false, 'p'); document.execCommand('DefaultParagraphSeparator', false, 'p');