From 123514e83a8b65aa95512a182cdf46561d762819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=CC=81=20Rio?= Date: Thu, 27 Feb 2025 10:36:38 +0000 Subject: [PATCH 1/7] fix(ion-alert): fix a11y focus and keyboard navigation. --- core/src/components/alert/alert.tsx | 33 ++++++++++++++----- .../components/alert/test/a11y/alert.e2e.ts | 5 +-- .../components/alert/test/basic/alert.e2e.ts | 3 +- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index ee2e07244ca..f22d5d03eec 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -237,6 +237,18 @@ export class Alert implements ComponentInterface, OverlayInterface { return; } + /** + * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button. + */ + if(ev.target.classList.contains('alert-wrapper')) { + if (ev.key === 'Tab' && ev.shiftKey) { + ev.preventDefault(); + const lastChildBtn = this.wrapperEl?.querySelector('.alert-button:last-child') as HTMLButtonElement; + lastChildBtn.focus(); + return; + } + } + // The only inputs we want to navigate between using arrow keys are the radios // ignore the keydown event if it is not on a radio button if ( @@ -400,9 +412,19 @@ export class Alert implements ComponentInterface, OverlayInterface { await this.delegateController.attachViewToDom(); - await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation); + await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => { + if(this.buttons.length === 1 && this.inputs.length === 0) { + const queryBtn = this.wrapperEl?.querySelector('.alert-button') as HTMLButtonElement; + + queryBtn.focus(); + } + else { + this.wrapperEl?.focus(); + } + }); unlock(); + } /** @@ -725,8 +747,8 @@ export class Alert implements ComponentInterface, OverlayInterface { const { overlayIndex, header, subHeader, message, htmlAttributes } = this; const mode = getIonMode(this); const hdrId = `alert-${overlayIndex}-hdr`; - const subHdrId = `alert-${overlayIndex}-sub-hdr`; const msgId = `alert-${overlayIndex}-msg`; + const subHdrId = `alert-${overlayIndex}-sub-hdr`; const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'; /** @@ -739,12 +761,7 @@ export class Alert implements ComponentInterface, OverlayInterface { return (