diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index ee2e07244ca..dc598fbdf0a 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,7 +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(() => { + /** + * Check if alert has only one button and no inputs. + * If so, then focus on the button. Otherwise, focus the alert wrapper. + * This will map to the default native alert behavior. + */ + 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 +749,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 +763,7 @@ export class Alert implements ComponentInterface, OverlayInterface { return (