Merge branch 'feature-8.5' into ROU-11552

Author: thetaPC

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
         with:
-          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
+          assignees: brandyscarney, thetaPC, ShaneK
           numOfAssignee: 1
           allowSelfAssign: false

core/package-lock.json

@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
-    "@capacitor/core": "^6.0.0",
-    "@capacitor/haptics": "^6.0.0",
-    "@capacitor/keyboard": "^6.0.0",
-    "@capacitor/status-bar": "^6.0.0",
+    "@capacitor/core": "^7.0.0",
+    "@capacitor/haptics": "^7.0.0",
+    "@capacitor/keyboard": "^7.0.0",
+    "@capacitor/status-bar": "^7.0.0",
     "@clack/prompts": "^0.10.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",

core/package.json

@@ -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/alert.tsx

@@ -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);