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

MOBILE-4565 a11y: Fix ion-fab-button focus

main
Pau Ferrer Ocaña 2024-04-23 12:46:32 +02:00
parent 23fccb22e5
commit a67cf4de7f
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/core/directives/link.ts
View File

@ -44,7 +44,7 @@ export class CoreLinkDirective implements OnInit {
@Input() autoLogin: boolean | string = true; // Whether to try to use auto-login. Values yes/no/check are deprecated.
@Input() showBrowserWarning = true; // Whether to show a warning before opening browser. Defaults to true.
protected element: HTMLElement;
protected element: HTMLElement | HTMLIonFabButtonElement | HTMLIonButtonElement | HTMLIonItemElement;
constructor(
element: ElementRef,
@ -54,10 +54,18 @@ export class CoreLinkDirective implements OnInit {
}
/**
* Function executed when the component is initialized.
* @inheritdoc
*/
ngOnInit(): void {
CoreDom.initializeClickableElementA11y(this.element, (event) => this.performAction(event));
async ngOnInit(): Promise<void> {
let hasNativeButton = false;
if ('componentOnReady' in this.element) {
await this.element.componentOnReady();
// Native buttons may be already accessible and does not neet to set TabIndex and role.
hasNativeButton = !!this.element.shadowRoot?.querySelector('.button-native');
}
CoreDom.initializeClickableElementA11y(this.element, (event) => this.performAction(event), !hasNativeButton);
}
/**
@ -79,7 +87,7 @@ export class CoreLinkDirective implements OnInit {
href = href || this.element.getAttribute('href') || this.element.getAttribute('xlink:href');
if (!href || CoreUrlUtils.getUrlScheme(href) == 'javascript') {
if (!href || CoreUrlUtils.getUrlScheme(href) === 'javascript') {
return;
}

2
src/core/features/course/components/course-format/course-format.html
View File

@ -54,12 +54,10 @@
<ion-fab-button size="small" *ngIf="communicationRoomUrl" [href]="communicationRoomUrl" core-link capture="false"
[attr.aria-label]="'core.course.communicationroomlink' | translate">
<ion-icon name="far-comments" aria-hidden="true" />
<span class="sr-only">{{'core.course.communicationroomlink' | translate }}</span>
</ion-fab-button>
<ion-fab-button *ngIf="displayCourseIndex" (click)="openCourseIndex()" [userTour]="courseIndexTour"
[attr.aria-label]="'core.course.courseindex' | translate" color="secondary">
<ion-icon name="fas-list-ul" aria-hidden="true" />
<span class="sr-only">{{'core.course.courseindex' | translate }}</span>
</ion-fab-button>
</ion-fab>

8
src/core/singletons/dom.ts
View File

@ -537,10 +537,12 @@ export class CoreDom {
*
* @param element Element to listen to events.
* @param callback Callback to call when clicked or the key is pressed.
* @param setTabIndex Whether to set tabindex and role.
*/
static initializeClickableElementA11y(
element: HTMLElement & {disabled?: boolean},
callback: (event: MouseEvent | KeyboardEvent) => void,
setTabIndex = true,
): void {
const enabled = () => !CoreUtils.isTrueOrOne(element.dataset.disabledA11yClicks ?? 'false');
@ -563,14 +565,14 @@ export class CoreDom {
}
if (event.key === ' ' || event.key === 'Enter') {
callback(event);
event.preventDefault();
event.stopPropagation();
callback(event);
}
});
if (element.tagName !== 'BUTTON' && element.tagName !== 'A') {
if (setTabIndex && element.tagName !== 'BUTTON' && element.tagName !== 'A') {
// Set tabindex if not previously set.
if (element.getAttribute('tabindex') === null) {
element.setAttribute('tabindex', element.disabled ? '-1' : '0');