merge release-6.2.5

Release 6.2.5

CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.5](https://github.com/ionic-team/ionic-framework/compare/v6.2.4...v6.2.5) (2022-08-31)
+
+
+### Bug Fixes
+
+* **action-sheet:** add aria-labelledby ([#25837](https://github.com/ionic-team/ionic-framework/issues/25837)) ([5270151](https://github.com/ionic-team/ionic-framework/commit/527015184e9413c1037277d3197bcaa33044c38c))
+* **angular:** router outlet has mode property ([#25816](https://github.com/ionic-team/ionic-framework/issues/25816)) ([afd0bbc](https://github.com/ionic-team/ionic-framework/commit/afd0bbc60aa8f4edc88dc311d6484ac60117fce5)), closes [#25813](https://github.com/ionic-team/ionic-framework/issues/25813)
+* **datetime:** next and previous buttons have correct labels ([#25845](https://github.com/ionic-team/ionic-framework/issues/25845)) ([41e3387](https://github.com/ionic-team/ionic-framework/commit/41e338730d32837fc9dd8a15477e37dea4cc76c9)), closes [#25844](https://github.com/ionic-team/ionic-framework/issues/25844)
+* **datetime:** only log out of bounds warning if value set ([#25835](https://github.com/ionic-team/ionic-framework/issues/25835)) ([85af6ce](https://github.com/ionic-team/ionic-framework/commit/85af6ce436890eb922d2ba32053fb8b8bc7fd4ff)), closes [#25833](https://github.com/ionic-team/ionic-framework/issues/25833)
+* **input:** clear button is not activated on swipe ([#25825](https://github.com/ionic-team/ionic-framework/issues/25825)) ([ff71ad4](https://github.com/ionic-team/ionic-framework/commit/ff71ad492d7671f8e550da7e08dbde30cb05ebf7)), closes [#24857](https://github.com/ionic-team/ionic-framework/issues/24857)
+* **modal:** handleBehavior can be used with controller ([#25821](https://github.com/ionic-team/ionic-framework/issues/25821)) ([79ef1b5](https://github.com/ionic-team/ionic-framework/commit/79ef1b57dc74fd856ed7c2904d7400d283cc081e)), closes [#25820](https://github.com/ionic-team/ionic-framework/issues/25820)
+* **searchbar:** clear button has focus indicator ([#25828](https://github.com/ionic-team/ionic-framework/issues/25828)) ([373b4ff](https://github.com/ionic-team/ionic-framework/commit/373b4ffe216ba584b92014cef501f64668e1f177))
+* **searchbar:** keypress can activate clear button ([#25824](https://github.com/ionic-team/ionic-framework/issues/25824)) ([c270756](https://github.com/ionic-team/ionic-framework/commit/c270756356c7b23a1959ac5f4b8206a5cd1825c2))
+
+
+
+
+
 ## [6.2.4](https://github.com/ionic-team/ionic-framework/compare/v6.2.3...v6.2.4) (2022-08-24)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.5](https://github.com/ionic-team/ionic/compare/v6.2.4...v6.2.5) (2022-08-31)
+
+
+### Bug Fixes
+
+* **angular:** router outlet has mode property ([#25816](https://github.com/ionic-team/ionic/issues/25816)) ([afd0bbc](https://github.com/ionic-team/ionic/commit/afd0bbc60aa8f4edc88dc311d6484ac60117fce5)), closes [#25813](https://github.com/ionic-team/ionic/issues/25813)
+
+
+
+
+
 ## [6.2.4](https://github.com/ionic-team/ionic/compare/v6.2.3...v6.2.4) (2022-08-24)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.4",
+  "version": "6.2.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.2.4",
+      "version": "6.2.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.2.4",
+        "@ionic/core": "^6.2.5",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,12 +1023,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.4.tgz",
-      "integrity": "sha512-LDRIwG5plwTHELxQ/j3uEfLJ7YkzJzR1V4QGE+X59aE/l7XoXZyLb1NWFjY7glBbFHGQgSuPFWNhXFkyRBxRFQ==",
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.5.tgz",
+      "integrity": "sha512-PLnG182RYydXB71cjkMk2TLxFVKabvEc9wjeK5SsvxI1/QE9+wPfxDnvKWag8UeXgaGUhby1bitWkV5pniDaXA==",
       "dependencies": {
         "@stencil/core": "^2.17.4",
-        "ionicons": "^6.0.2",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       }
     },
@@ -1234,9 +1234,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3569,9 +3569,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
       "dependencies": {
         "@stencil/core": "~2.16.0"
       }
@@ -7951,12 +7951,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.4.tgz",
-      "integrity": "sha512-LDRIwG5plwTHELxQ/j3uEfLJ7YkzJzR1V4QGE+X59aE/l7XoXZyLb1NWFjY7glBbFHGQgSuPFWNhXFkyRBxRFQ==",
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.5.tgz",
+      "integrity": "sha512-PLnG182RYydXB71cjkMk2TLxFVKabvEc9wjeK5SsvxI1/QE9+wPfxDnvKWag8UeXgaGUhby1bitWkV5pniDaXA==",
       "requires": {
         "@stencil/core": "^2.17.4",
-        "ionicons": "^6.0.2",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -8111,9 +8111,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
     },
     "@types/estree": {
       "version": "0.0.39",
@@ -9818,9 +9818,9 @@
       }
     },
     "ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
       "requires": {
         "@stencil/core": "~2.16.0"
       }

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.4",
+  "version": "6.2.5",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.2.4",
+    "@ionic/core": "^6.2.5",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/directives/navigation/ion-router-outlet.ts

@@ -33,7 +33,7 @@ import { RouteView, getUrl } from './stack-utils';
   selector: 'ion-router-outlet',
   exportAs: 'outlet',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'animation', 'swipeGesture'],
+  inputs: ['animated', 'animation', 'mode', 'swipeGesture'],
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class IonRouterOutlet implements OnDestroy, OnInit {

core/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.5](https://github.com/ionic-team/ionic/compare/v6.2.4...v6.2.5) (2022-08-31)
+
+
+### Bug Fixes
+
+* **action-sheet:** add aria-labelledby ([#25837](https://github.com/ionic-team/ionic/issues/25837)) ([5270151](https://github.com/ionic-team/ionic/commit/527015184e9413c1037277d3197bcaa33044c38c))
+* **datetime:** next and previous buttons have correct labels ([#25845](https://github.com/ionic-team/ionic/issues/25845)) ([41e3387](https://github.com/ionic-team/ionic/commit/41e338730d32837fc9dd8a15477e37dea4cc76c9)), closes [#25844](https://github.com/ionic-team/ionic/issues/25844)
+* **datetime:** only log out of bounds warning if value set ([#25835](https://github.com/ionic-team/ionic/issues/25835)) ([85af6ce](https://github.com/ionic-team/ionic/commit/85af6ce436890eb922d2ba32053fb8b8bc7fd4ff)), closes [#25833](https://github.com/ionic-team/ionic/issues/25833)
+* **input:** clear button is not activated on swipe ([#25825](https://github.com/ionic-team/ionic/issues/25825)) ([ff71ad4](https://github.com/ionic-team/ionic/commit/ff71ad492d7671f8e550da7e08dbde30cb05ebf7)), closes [#24857](https://github.com/ionic-team/ionic/issues/24857)
+* **modal:** handleBehavior can be used with controller ([#25821](https://github.com/ionic-team/ionic/issues/25821)) ([79ef1b5](https://github.com/ionic-team/ionic/commit/79ef1b57dc74fd856ed7c2904d7400d283cc081e)), closes [#25820](https://github.com/ionic-team/ionic/issues/25820)
+* **searchbar:** clear button has focus indicator ([#25828](https://github.com/ionic-team/ionic/issues/25828)) ([373b4ff](https://github.com/ionic-team/ionic/commit/373b4ffe216ba584b92014cef501f64668e1f177))
+* **searchbar:** keypress can activate clear button ([#25824](https://github.com/ionic-team/ionic/issues/25824)) ([c270756](https://github.com/ionic-team/ionic/commit/c270756356c7b23a1959ac5f4b8206a5cd1825c2))
+
+
+
+
+
 ## [6.2.4](https://github.com/ionic-team/ionic/compare/v6.2.3...v6.2.4) (2022-08-24)
 
 

core/package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.4",
+  "version": "6.2.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.2.4",
+      "version": "6.2.5",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.17.4",
-        "ionicons": "^6.0.2",
+        "ionicons": "^6.0.3",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -6527,9 +6527,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
       "dependencies": {
         "@stencil/core": "~2.16.0"
       }
@@ -19091,9 +19091,9 @@
       }
     },
     "ionicons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
-      "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
+      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
       "requires": {
         "@stencil/core": "~2.16.0"
       },

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.4",
+  "version": "6.2.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^2.17.4",
-    "ionicons": "^6.0.2",
+    "ionicons": "^6.0.3",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

core/src/components/action-sheet/action-sheet.tsx

@@ -239,16 +239,18 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   render() {
-    const { htmlAttributes } = this;
+    const { header, htmlAttributes, overlayIndex } = this;
     const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
     const buttons = allButtons.filter((b) => b.role !== 'cancel');
+    const headerID = `action-sheet-${overlayIndex}-header`;
 
     return (
       <Host
         role="dialog"
         aria-modal="true"
+        aria-labelledby={header !== undefined ? headerID : null}
         tabindex="-1"
         {...(htmlAttributes as any)}
         style={{
@@ -256,7 +258,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         }}
         class={{
           [mode]: true,
-
           ...getClassMap(this.cssClass),
           'overlay-hidden': true,
           'action-sheet-translucent': this.translucent,
@@ -268,17 +269,18 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
         <div tabindex="0"></div>
 
-        <div class="action-sheet-wrapper ion-overlay-wrapper" role="dialog" ref={(el) => (this.wrapperEl = el)}>
+        <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
             <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
-              {this.header !== undefined && (
+              {header !== undefined && (
                 <div
+                  id={headerID}
                   class={{
                     'action-sheet-title': true,
                     'action-sheet-has-sub-title': this.subHeader !== undefined,
                   }}
                 >
-                  {this.header}
+                  {header}
                   {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
                 </div>
               )}

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -0,0 +1,57 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy: string | null) => {
+  const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+  const button = page.locator(`#${buttonID}`);
+
+  await button.click();
+  await didPresent.next();
+
+  const alert = page.locator('ion-action-sheet');
+
+  /**
+   * expect().toHaveAttribute() can't check for a null value, so grab and check
+   * the value manually instead.
+   */
+  const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
+
+  expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
+};
+
+test.describe('action-sheet: a11y', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    await page.goto(`/src/components/action-sheet/test/a11y`);
+  });
+
+  test('should not have accessibility violations when header is defined', async ({ page }) => {
+    const button = page.locator('#bothHeaders');
+    const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+    await button.click();
+    await didPresent.next();
+
+    /**
+     * action-sheet overlays the entire screen, so
+     * Axe will be unable to verify color contrast
+     * on elements under the backdrop.
+     */
+    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should have aria-labelledby when header is set', async ({ page }) => {
+    await testAria(page, 'bothHeaders', 'action-sheet-1-header');
+  });
+
+  test('should not have aria-labelledby when header is not set', async ({ page }) => {
+    await testAria(page, 'noHeaders', null);
+  });
+
+  test('should allow for manually specifying aria attributes', async ({ page }) => {
+    await testAria(page, 'customAria', 'Custom title');
+  });
+});

core/src/components/action-sheet/test/a11y/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Action Sheet - A11y</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+  <script type="module">
+    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    window.actionSheetController = actionSheetController;
+  </script>
+
+  <body>
+    <main class="ion-padding">
+      <h1>Action Sheet - A11y</h1>
+
+      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
+    </main>
+
+    <script>
+      async function openActionSheet(opts) {
+        const actionSheet = await actionSheetController.create(opts);
+        await actionSheet.present();
+      }
+
+      function presentBothHeaders() {
+        openActionSheet({
+          header: 'Header',
+          subHeader: 'Subtitle',
+          buttons: ['Confirm'],
+        });
+      }
+
+      function presentSubHeaderOnly() {
+        openActionSheet({
+          subHeader: 'Subtitle',
+          buttons: ['Confirm'],
+        });
+      }
+
+      function presentNoHeaders() {
+        openActionSheet({
+          buttons: ['Confirm'],
+        });
+      }
+
+      function presentCustomAria() {
+        openActionSheet({
+          header: 'Header',
+          subHeader: 'Subtitle',
+          buttons: ['Confirm'],
+          htmlAttributes: {
+            'aria-labelledby': 'Custom title',
+            'aria-describedby': 'Custom description',
+          },
+        });
+      }
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,90 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+const openAlert = async (page: E2EPage, buttonID: string) => {
+  const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+  await page.click(`#${buttonID}`);
+  await didPresent.next();
+
+  return page.locator('ion-alert');
+};
+
+const testAlert = async (page: E2EPage, buttonID: string) => {
+  await page.goto(`/src/components/alert/test/basic`);
+
+  const didDismiss = await page.spyOnEvent('ionAlertDidDismiss');
+  const alert = await openAlert(page, buttonID);
+
+  await expect(alert).toBeVisible();
+  expect(await alert.screenshot()).toMatchSnapshot(`alert-${buttonID}-${page.getSnapshotSettings()}.png`);
+
+  await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
+  await didDismiss.next();
+
+  await expect(alert).toHaveCount(0);
+};
+
+test.describe('alert: basic', () => {
+  test('focus trap should work correctly', async ({ page, skip, browserName }) => {
+    skip.rtl();
+    await page.goto(`/src/components/alert/test/basic`);
+
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+    const alert = await openAlert(page, 'multipleButtons');
+    const alertBtns = alert.locator('button');
+
+    await page.keyboard.press(tabKey);
+    await expect(alertBtns.nth(0)).toBeFocused();
+
+    await page.keyboard.press(`Shift+${tabKey}`);
+    await expect(alertBtns.nth(2)).toBeFocused();
+
+    await page.keyboard.press(tabKey);
+    await expect(alertBtns.nth(0)).toBeFocused();
+  });
+
+  test('should set custom attributes', async ({ page, skip }) => {
+    skip.rtl();
+    await page.goto(`/src/components/alert/test/basic`);
+
+    const alert = await openAlert(page, 'basic');
+    expect(alert).toHaveAttribute('data-testid', 'basic-alert');
+  });
+
+  test.describe('should not have visual regressions', () => {
+    test('header, subheader, message', async ({ page }) => {
+      await testAlert(page, 'basic');
+    });
+
+    test('long message', async ({ page }) => {
+      await testAlert(page, 'longMessage');
+    });
+
+    test('more than two buttons', async ({ page }) => {
+      await testAlert(page, 'multipleButtons');
+    });
+
+    test('no message', async ({ page }) => {
+      await testAlert(page, 'noMessage');
+    });
+
+    test('two buttons', async ({ page }) => {
+      await testAlert(page, 'confirm');
+    });
+
+    test('form prompt', async ({ page }) => {
+      await testAlert(page, 'prompt');
+    });
+
+    test('radios', async ({ page }) => {
+      await testAlert(page, 'radio');
+    });
+
+    test('checkboxes', async ({ page }) => {
+      await testAlert(page, 'checkbox');
+    });
+  });
+});