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

MOBILE-3814 a11y: Add aria-controls to collapsible-item

main
Pau Ferrer Ocaña 2022-03-18 09:46:07 +01:00
parent 43ed7495bf
commit 4f36e6c1e8
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/core/directives/collapsible-item.ts
View File

@ -16,6 +16,7 @@ import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { CoreCancellablePromise } from '@classes/cancellable-promise'; import { CoreCancellablePromise } from '@classes/cancellable-promise';
import { CoreLoadingComponent } from '@components/loading/loading'; import { CoreLoadingComponent } from '@components/loading/loading';
import { CoreDomUtils } from '@services/utils/dom'; import { CoreDomUtils } from '@services/utils/dom';
import { CoreUtils } from '@services/utils/utils';
import { Translate } from '@singletons'; import { Translate } from '@singletons';
import { CoreComponentsRegistry } from '@singletons/components-registry'; import { CoreComponentsRegistry } from '@singletons/components-registry';
import { CoreEventObserver } from '@singletons/events'; import { CoreEventObserver } from '@singletons/events';
@ -50,11 +51,14 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
protected expandedHeight = 0; protected expandedHeight = 0;
protected resizeListener?: CoreEventObserver; protected resizeListener?: CoreEventObserver;
protected domPromise?: CoreCancellablePromise<void>; protected domPromise?: CoreCancellablePromise<void>;
protected uniqueId: string;
constructor(el: ElementRef<HTMLElement>) { constructor(el: ElementRef<HTMLElement>) {
this.element = el.nativeElement; this.element = el.nativeElement;
this.element.addEventListener('click', this.elementClicked.bind(this)); this.element.addEventListener('click', this.elementClicked.bind(this));
this.uniqueId = 'collapsible-item-' + CoreUtils.getUniqueId('CoreCollapsibleItemDirective');
this.element.id = this.uniqueId;
} }
/** /**
@ -153,6 +157,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
const toggleButton = document.createElement('ion-button'); const toggleButton = document.createElement('ion-button');
toggleButton.classList.add('collapsible-toggle'); toggleButton.classList.add('collapsible-toggle');
toggleButton.setAttribute('fill', 'clear'); toggleButton.setAttribute('fill', 'clear');
toggleButton.setAttribute('aria-controls', this.uniqueId);
const toggleText = document.createElement('span'); const toggleText = document.createElement('span');
toggleText.classList.add('collapsible-toggle-text'); toggleText.classList.add('collapsible-toggle-text');
@ -163,7 +168,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
expandArrow.classList.add('collapsible-toggle-arrow'); expandArrow.classList.add('collapsible-toggle-arrow');
toggleButton.appendChild(expandArrow); toggleButton.appendChild(expandArrow);
this.element.appendChild(toggleButton); this.element.append(toggleButton);
this.toggleExpand(this.expanded); this.toggleExpand(this.expanded);
} }
@ -194,6 +199,9 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
expand = !this.expanded; expand = !this.expanded;
} }
this.expanded = expand; this.expanded = expand;
// Reset scroll inside the element to show always the top part.
this.element.scrollTo(0, 0);
this.element.classList.toggle('collapsible-collapsed', !expand); this.element.classList.toggle('collapsible-collapsed', !expand);
this.setHeight(!expand ? this.maxHeight: undefined); this.setHeight(!expand ? this.maxHeight: undefined);