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

MOBILE-4565 a11y: Do not let the user focus on elements in movement

main
Pau Ferrer Ocaña 2024-04-15 16:01:37 +02:00
parent 84ad9c1e97
commit 1b301dae58
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/components/swipe-slides/swipe-slides.html
View File

@ -1,4 +1,4 @@
<swiper-container #swiperRef *ngIf="loaded"> <swiper-container #swiperRef *ngIf="loaded" [attr.aria-busy]="activeSlideIndex ? 'true' : null">
<swiper-slide *ngFor="let item of items; index as index" [attr.aria-hidden]="!isActive(index)"> <swiper-slide *ngFor="let item of items; index as index" [attr.aria-hidden]="!isActive(index)">
<ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}" /> <ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{item: item, active: isActive(index)}" />
</swiper-slide> </swiper-slide>

12
src/core/components/swipe-slides/swipe-slides.ts
View File

@ -72,7 +72,7 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
protected hostElement: HTMLElement; protected hostElement: HTMLElement;
protected unsubscribe?: () => void; protected unsubscribe?: () => void;
protected resizeListener: CoreEventObserver; protected resizeListener: CoreEventObserver;
protected activeSlideIndexes: number[] = []; protected activeSlideIndex?: number;
protected onReadyPromise = new CorePromisedValue<void>(); protected onReadyPromise = new CorePromisedValue<void>();
constructor( constructor(
@ -112,7 +112,7 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
* @returns Whether the slide is active. * @returns Whether the slide is active.
*/ */
isActive(index: number): boolean { isActive(index: number): boolean {
return this.activeSlideIndexes.includes(index); return this.activeSlideIndex === index;
} }
/** /**
@ -153,7 +153,7 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
item: items[initialIndex], item: items[initialIndex],
}; };
this.activeSlideIndexes = [initialIndex]; this.activeSlideIndex = initialIndex;
this.manager.setSelectedItem(items[initialIndex]); this.manager.setSelectedItem(items[initialIndex]);
this.onWillChange.emit(initialItemData); this.onWillChange.emit(initialItemData);
@ -268,7 +268,7 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
return; return;
} }
this.activeSlideIndexes.push(currentItemData.index); this.activeSlideIndex = undefined;
this.manager?.setSelectedItem(currentItemData.item); this.manager?.setSelectedItem(currentItemData.item);
this.onWillChange.emit(currentItemData); this.onWillChange.emit(currentItemData);
@ -283,12 +283,12 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
async slideDidChange(): Promise<void> { async slideDidChange(): Promise<void> {
const currentItemData = await this.getCurrentSlideItemData(); const currentItemData = await this.getCurrentSlideItemData();
if (!currentItemData) { if (!currentItemData) {
this.activeSlideIndexes = []; this.activeSlideIndex = undefined;
return; return;
} }
this.activeSlideIndexes = [currentItemData.index]; this.activeSlideIndex = currentItemData.index;
this.onDidChange.emit(currentItemData); this.onDidChange.emit(currentItemData);