fix(alert): change focused element and improve keyboard navigation (#30220)

Issue number: internal ## What is the current behavior? > Once Alert gets open the focusable element was the ion-alert itself. > <img width="279" alt="Screenshot 2025-02-27 at 18 07 19" src="https://github.com/user-attachments/assets/50ad3b75-ba32-4dd1-b17e-c5a5bf16f93b" /> ## What is the new behavior? In order to mimick native alert a11y behaviour... Changed the focused element based on the amount of existing buttons. > If there is only 1 button, it should be that one focused > <img width="304" alt="Screenshot 2025-02-27 at 18 04 52" src="https://github.com/user-attachments/assets/e273f65a-5347-4a29-a156-f6e57852f0dc" /> > Otherwise it should focus the `.alert-wrapper` container > <img width="284" alt="Screenshot 2025-02-27 at 18 05 02" src="https://github.com/user-attachments/assets/4a8507f3-a31f-40b9-8cd7-478ec881e3ed" /> > > **NOTE**: The yellow outline it's just for demo purposes, it was not implemented 🤪 ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information - Also updated support to the shiftTab keyboard navigation. - Updated tests and screenshots with the latest changes. --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

Author: joselrio

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 (
  <Host
- role={role}
- aria-modal="true"
- aria-labelledby={ariaLabelledBy}
- aria-describedby={message !== undefined ? msgId : null}
  tabindex="-1"
- {...(htmlAttributes as any)}
  style={{
  zIndex: `${20000 + overlayIndex}`,
  }}
@@ -761,7 +780,16 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
  <div tabindex="0" aria-hidden="true"></div>
 
- <div class="alert-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
+ <div
+ class="alert-wrapper ion-overlay-wrapper"
+ role={role}
+ aria-modal="true"
+ aria-labelledby={ariaLabelledBy}
+ aria-describedby={message !== undefined ? msgId : null}
+ tabindex="0"
+ ref={(el) => (this.wrapperEl = el)}
+ {...(htmlAttributes as any)}
+ >
  <div class="alert-head">
  {header && (
  <h2 id={hdrId} class="alert-title">

core/src/components/alert/test/a11y/alert.e2e.ts

@@ -16,6 +16,7 @@ const testAria = async (
  await didPresent.next();
 
  const alert = page.locator('ion-alert');
+ const alertwrapper = alert.locator('.alert-wrapper');
 
  const header = alert.locator('.alert-title');
  const subHeader = alert.locator('.alert-sub-title');
@@ -42,8 +43,8 @@ const testAria = async (
  * expect().toHaveAttribute() can't check for a null value, so grab and check
  * the values manually instead.
  */
- const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
- const ariaDescribedBy = await alert.getAttribute('aria-describedby');
+ const ariaLabelledBy = await alertwrapper.getAttribute('aria-labelledby');
+ const ariaDescribedBy = await alertwrapper.getAttribute('aria-describedby');
 
  expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
  expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);