EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 a11y: Add label to RTE

main
Noel De Martin 2021-06-07 17:18:43 +02:00
parent a5accde64a
commit 70d14de8ec
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@
class="core-rte-editor" class="core-rte-editor"
role="textbox" role="textbox"
contenteditable="true" contenteditable="true"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.data-placeholder-text]="placeholder" [attr.data-placeholder-text]="placeholder"
(focus)="showToolbar($event)" (focus)="showToolbar($event)"
(blur)="hideToolbar($event)" (blur)="hideToolbar($event)"

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

@ -23,6 +23,7 @@ import {
AfterContentInit, AfterContentInit,
OnDestroy, OnDestroy,
Optional, Optional,
AfterViewInit,
} from '@angular/core'; } from '@angular/core';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
import { IonTextarea, IonContent, IonSlides } from '@ionic/angular'; import { IonTextarea, IonContent, IonSlides } from '@ionic/angular';
@ -51,7 +52,7 @@ import { CoreEditorOffline } from '../../services/editor-offline';
templateUrl: 'core-editor-rich-text-editor.html', templateUrl: 'core-editor-rich-text-editor.html',
styleUrls: ['rich-text-editor.scss'], styleUrls: ['rich-text-editor.scss'],
}) })
export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentInit, OnDestroy { export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
// Based on: https://github.com/judgewest2000/Ionic3RichText/ // Based on: https://github.com/judgewest2000/Ionic3RichText/
// @todo: Anchor button, fullscreen... // @todo: Anchor button, fullscreen...
@ -87,6 +88,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
protected valueChangeSubscription?: Subscription; protected valueChangeSubscription?: Subscription;
protected keyboardObserver?: CoreEventObserver; protected keyboardObserver?: CoreEventObserver;
protected resetObserver?: CoreEventObserver; protected resetObserver?: CoreEventObserver;
protected labelObserver?: MutationObserver;
protected initHeightInterval?: number; protected initHeightInterval?: number;
protected isCurrentView = true; protected isCurrentView = true;
protected toolbarButtonWidth = 44; protected toolbarButtonWidth = 44;
@ -109,6 +111,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
toolbarPrevHidden = true; toolbarPrevHidden = true;
toolbarNextHidden = false; toolbarNextHidden = false;
canScanQR = false; canScanQR = false;
ariaLabelledBy?: string;
infoMessage?: string; infoMessage?: string;
direction = 'ltr'; direction = 'ltr';
toolbarStyles = { toolbarStyles = {
@ -209,6 +212,20 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
} }
} }
/**
* @inheritdoc
*/
async ngAfterViewInit(): Promise<void> {
const label = this.element.closest('ion-item')?.querySelector('ion-label');
if (!label) {
return;
}
this.labelObserver = new MutationObserver(() => this.ariaLabelledBy = label.getAttribute('id') ?? undefined);
this.labelObserver.observe(label, { attributes: true, attributeFilter: ['id'] });
}
/** /**
* Set listeners and observers. * Set listeners and observers.
*/ */
@ -1118,6 +1135,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.resizeObserver?.disconnect(); this.resizeObserver?.disconnect();
this.resetObserver?.off(); this.resetObserver?.off();
this.keyboardObserver?.off(); this.keyboardObserver?.off();
this.labelObserver?.disconnect();
} }
} }