diff --git a/src/core/directives/link.ts b/src/core/directives/link.ts index daac1bc79..ca6eeca1d 100644 --- a/src/core/directives/link.ts +++ b/src/core/directives/link.ts @@ -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 { + 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; } diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html index 8a837aa6a..423cf7031 100644 --- a/src/core/features/course/components/course-format/course-format.html +++ b/src/core/features/course/components/course-format/course-format.html @@ -54,12 +54,10 @@ diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts index e67b78ba4..367418436 100644 --- a/src/core/singletons/dom.ts +++ b/src/core/singletons/dom.ts @@ -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');