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

MOBILE-3320 a11y: Add label to RTE

Browse Source
This commit is contained in:
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"
role="textbox"
contenteditable="true"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.data-placeholder-text]="placeholder"
(focus)="showToolbar($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,
OnDestroy,
Optional,
AfterViewInit,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { IonTextarea, IonContent, IonSlides } from '@ionic/angular';
@ -51,7 +52,7 @@ import { CoreEditorOffline } from '../../services/editor-offline';
templateUrl: 'core-editor-rich-text-editor.html',
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/
// @todo: Anchor button, fullscreen...
@ -87,6 +88,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
protected valueChangeSubscription?: Subscription;
protected keyboardObserver?: CoreEventObserver;
protected resetObserver?: CoreEventObserver;
protected labelObserver?: MutationObserver;
protected initHeightInterval?: number;
protected isCurrentView = true;
protected toolbarButtonWidth = 44;
@ -109,6 +111,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
toolbarPrevHidden = true;
toolbarNextHidden = false;
canScanQR = false;
ariaLabelledBy?: string;
infoMessage?: string;
direction = 'ltr';
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.
*/
@ -1118,6 +1135,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.resizeObserver?.disconnect();
this.resetObserver?.off();
this.keyboardObserver?.off();
this.labelObserver?.disconnect();
}
}