voyager-ionic-core 7.5.0 → 7.5.5

package/dist/collection/components/list/test/lines/list.e2e.js

@@ -22,3 +22,146 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+/**
+ * Padding and border color ensures the bottom border can be easily seen if it regresses.
+ * The background color ensures that any border radius values can be seen.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('list: lines with children'), () => {
+    test('only item in inset list should not have line', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28435',
+      });
+      await page.setContent(`
+        <style>
+          #container {
+            padding: 10px;
+            background: #0088cc;
+          }
+
+          ion-item {
+            --border-color: red;
+          }
+        </style>
+        <div id="container">
+          <ion-list inset="true">
+            <ion-item>
+              <ion-label>Item 0</ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      `, config);
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('inset-list-only-item-no-lines'));
+    });
+    test('last item in inset list with end options should not have line', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28435',
+      });
+      await page.setContent(`
+        <style>
+          #container {
+            padding: 10px;
+            background: #0088cc;
+          }
+
+          ion-item {
+            --border-color: red;
+          }
+        </style>
+        <div id="container">
+          <ion-list inset="true">
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 0</ion-label>
+              </ion-item>
+              <ion-item-options slot="end">
+                <ion-item-option color="warning">
+                  <ion-icon slot="icon-only" name="pin"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 1</ion-label>
+              </ion-item>
+              <ion-item-options slot="end">
+                <ion-item-option color="warning">
+                  <ion-icon slot="icon-only" name="pin"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>Item 2</ion-label>
+              </ion-item>
+              <ion-item-options slot="end">
+                <ion-item-option color="warning">
+                  <ion-icon slot="icon-only" name="pin"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+          </ion-list>
+        </div>
+      `, config);
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('inset-list-end-options-no-lines'));
+    });
+    test('last item in inset list with start options should not have line', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          #container {
+            padding: 10px;
+            background: #0088cc;
+          }
+
+          ion-item {
+            --border-color: red;
+          }
+        </style>
+        <div id="container">
+          <ion-list inset="true">
+            <ion-item-sliding>
+              <ion-item-options slot="start">
+                <ion-item-option color="warning">
+                  <ion-icon slot="icon-only" name="pin"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+              <ion-item>
+                <ion-label>Item 0</ion-label>
+              </ion-item>
+            </ion-item-sliding>
+
+            <ion-item-sliding>
+              <ion-item-options slot="start">
+                <ion-item-option color="warning">
+                  <ion-icon slot="icon-only" name="pin"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+              <ion-item>
+                <ion-label>Item 1</ion-label>
+              </ion-item>
+            </ion-item-sliding>
+
+            <ion-item-sliding>
+              <ion-item-options slot="start">
+                <ion-item-option color="warning">
+                  <ion-icon slot="icon-only" name="pin"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+              <ion-item>
+                <ion-label>Item 2</ion-label>
+              </ion-item>
+            </ion-item-sliding>
+          </ion-list>
+        </div>
+      `, config);
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot('inset-list-start-options-no-lines'));
+    });
+  });
+});

package/dist/collection/components/list-header/list-header.ios.css

@@ -172,14 +172,27 @@
   --background: transparent;
   --color: var(--ion-color-step-850, #262626);
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
-  -webkit-padding-start: calc(var(--ion-safe-area-left, 0px) + 16px);
-  padding-inline-start: calc(var(--ion-safe-area-left, 0px) + 16px);
+  /* stylelint-disable */
+  padding-right: var(--ion-safe-area-right);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);
+  /* stylelint-enable */
   position: relative;
   align-items: flex-end;
   font-size: min(1.375rem, 56.1px);
   font-weight: 700;
   letter-spacing: 0;
 }
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);
+  padding-left: var(--ion-safe-area-left);
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);
+    padding-left: var(--ion-safe-area-left);
+  }
+}
 
 ::slotted(ion-button),
 ::slotted(ion-label) {

package/dist/collection/components/list-header/list-header.md.css

@@ -172,11 +172,24 @@
   --background: transparent;
   --color: var(--ion-text-color, #000);
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
-  -webkit-padding-start: calc(var(--ion-safe-area-left, 0) + 16px);
-  padding-inline-start: calc(var(--ion-safe-area-left, 0) + 16px);
+  /* stylelint-disable */
+  padding-right: var(--ion-safe-area-right);
+  padding-left: calc(var(--ion-safe-area-left, 0px) + 16px);
+  /* stylelint-enable */
   min-height: 45px;
   font-size: 0.875rem;
 }
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);
+  padding-left: var(--ion-safe-area-left);
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + 16px);
+    padding-left: var(--ion-safe-area-left);
+  }
+}
 
 :host(.list-header-lines-full) {
   --border-width: 0 0 1px 0;

package/dist/collection/components/list-header/test/basic/list-header.e2e.js

@@ -12,3 +12,31 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('list-header: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }) => {
+        await page.setContent(`
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-list-header>
+            <ion-label>List Header</ion-label>
+            <ion-button>Button</ion-button>
+          </ion-list-header>
+        `, config);
+        const listHeader = page.locator('ion-list-header');
+        await expect(listHeader).toHaveScreenshot(screenshot(`list-header-safe-area`));
+      });
+    });
+  });
+});

package/dist/collection/components/menu/menu.ios.css

@@ -114,7 +114,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-start) .menu-inner:dir(rtl) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: auto;
@@ -142,7 +142,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
+  :host(.menu-side-start:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it
@@ -197,7 +197,7 @@
     right: auto;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-end) .menu-inner:dir(rtl) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: 0;
@@ -225,7 +225,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
+  :host(.menu-side-end:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it

package/dist/collection/components/menu/menu.js

@@ -173,6 +173,18 @@ export class Menu {
     this.contentEl = undefined;
   }
   onSplitPaneChanged(ev) {
+    const { target } = ev;
+    const closestSplitPane = this.el.closest('ion-split-pane');
+    /**
+     * Menu listens on the body for "ionSplitPaneVisible".
+     * However, this means the callback will run any time
+     * a SplitPane changes visibility. As a result, we only want
+     * Menu's visibility state to update if its parent SplitPane
+     * changes visibility.
+     */
+    if (target !== closestSplitPane) {
+      return;
+    }
     this.isPaneVisible = ev.detail.isPane(this.el);
     this.updateState();
   }
@@ -331,11 +343,11 @@ export class Menu {
       this.animation = undefined;
     }
     // Create new animation
-    this.animation = await menuController._createAnimation(this.type, this);
+    const animation = (this.animation = await menuController._createAnimation(this.type, this));
     if (!config.getBoolean('animated', true)) {
-      this.animation.duration(0);
+      animation.duration(0);
     }
-    this.animation.fill('both');
+    animation.fill('both');
   }
   async startAnimation(shouldOpen, animated) {
     const isReversed = !shouldOpen;

package/dist/collection/components/menu/menu.md.css

@@ -114,7 +114,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-start) .menu-inner:dir(rtl) {
+    :host(.menu-side-start:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: auto;
@@ -142,7 +142,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
+  :host(.menu-side-start:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it
@@ -197,7 +197,7 @@
     right: auto;
   }
   @supports selector(:dir(rtl)) {
-    :host(.menu-side-end) .menu-inner:dir(rtl) {
+    :host(.menu-side-end:dir(rtl)) .menu-inner {
       left: unset;
       right: unset;
       left: 0;
@@ -225,7 +225,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
+  :host(.menu-side-end:dir(rtl)) .menu-inner {
     /**
       * Menu does not cover the whole screen so we need to set the safe area for the
       * side that touches the screen edge only. Since safe area is not logical, it

package/dist/collection/components/modal/animations/ios.enter.js

@@ -38,8 +38,8 @@ export const iosEnterAnimation = (baseEl, opts) => {
       'transform-origin': 'top center',
       overflow: 'hidden',
     });
-    const bodyEl = document.body;
-    if (isMobile) {
+    const appEl = baseEl.closest('ion-app');
+    if (isMobile && appEl) {
       /**
        * Fallback for browsers that does not support `max()` (ex: Firefox)
        * No need to worry about statusbar padding since engines like Gecko
@@ -53,7 +53,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
         .afterStyles({
         transform: finalTransform,
       })
-        .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
+        .beforeAddWrite(() => appEl.style.setProperty('background-color', 'black'))
         .addElement(presentingEl)
         .keyframes([
         { offset: 0, filter: 'contrast(1)', transform: 'translateY(0px) scale(1)', borderRadius: '0px' },

package/dist/collection/components/modal/animations/ios.leave.js

@@ -24,7 +24,8 @@ export const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(duration)
     .addAnimation(wrapperAnimation);
-  if (presentingEl) {
+  const appEl = baseEl.closest('ion-app');
+  if (presentingEl && appEl) {
     const isMobile = window.innerWidth < 768;
     const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
     const presentingElRoot = getElementRoot(presentingEl);
@@ -37,12 +38,11 @@ export const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
         return;
       }
       presentingEl.style.setProperty('overflow', '');
-      const numModals = Array.from(bodyEl.querySelectorAll('ion-modal:not(.overlay-hidden)')).filter((m) => m.presentingElement !== undefined).length;
+      const numModals = Array.from(appEl.querySelectorAll('ion-modal:not(.overlay-hidden)')).filter((m) => m.presentingElement !== undefined).length;
       if (numModals <= 1) {
-        bodyEl.style.setProperty('background-color', '');
+        appEl.style.setProperty('background-color', '');
       }
     });
-    const bodyEl = document.body;
     if (isMobile) {
       const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
       const modalTransform = hasCardModal ? '-10px' : transformOffset;

package/dist/collection/components/modal/modal.ios.css

@@ -254,7 +254,7 @@ ion-backdrop {
     border-bottom-left-radius: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.modal-card) .modal-wrapper:dir(rtl) {
+    :host(.modal-card:dir(rtl)) .modal-wrapper {
       border-top-left-radius: var(--border-radius);
       border-top-right-radius: var(--border-radius);
       border-bottom-right-radius: 0;
@@ -304,7 +304,7 @@ ion-backdrop {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.modal-sheet) .modal-wrapper:dir(rtl) {
+  :host(.modal-sheet:dir(rtl)) .modal-wrapper {
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: 0;

package/dist/collection/components/picker/picker.ios.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker/picker.md.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host:dir(rtl) {
+    :host(:dir(rtl)) {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/picker-internal.ios.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-before:dir(rtl) {
+    :host(:dir(rtl)) .picker-before {
       left: unset;
       right: unset;
       right: 0;
@@ -113,7 +113,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-after:dir(rtl) {
+    :host(:dir(rtl)) .picker-after {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/picker-internal.md.css

@@ -86,7 +86,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-before:dir(rtl) {
+    :host(:dir(rtl)) .picker-before {
       left: unset;
       right: unset;
       right: 0;
@@ -113,7 +113,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host .picker-after:dir(rtl) {
+    :host(:dir(rtl)) .picker-after {
       left: unset;
       right: unset;
       right: 0;

package/dist/collection/components/picker-internal/test/basic/picker-internal.e2e.js

@@ -10,6 +10,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('picker-internal: rendering'), () => {
     test('inline pickers should not have visual regression', async ({ page }) => {
       await page.goto(`/src/components/picker-internal/test/basic`, config);
+      const fullStack = page.locator('#inline button[data-value="full-stack"]');
+      const onion = page.locator('#inline button[data-value="onion"]');
+      await expect(fullStack).toHaveClass(/picker-item-active/);
+      await expect(onion).toHaveClass(/picker-item-active/);
+      await page.waitForChanges();
       await expect(page.locator('#inline')).toHaveScreenshot(screenshot(`picker-internal-inline-diff`));
     });
   });

package/dist/collection/components/popover/popover.ios.css

@@ -138,7 +138,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-start):dir(rtl) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
     --offset-x: -5px;
   }
 }
@@ -151,7 +151,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-end):dir(rtl) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
     --offset-x: 5px;
   }
 }
@@ -284,7 +284,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-side-start) .popover-arrow:dir(rtl) {
+  :host(.popover-side-start:dir(rtl)) .popover-arrow {
     transform: rotate(-90deg);
   }
 }
@@ -297,7 +297,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-side-end) .popover-arrow:dir(rtl) {
+  :host(.popover-side-end:dir(rtl)) .popover-arrow {
     transform: rotate(90deg);
   }
 }

package/dist/collection/components/popover/popover.md.css

@@ -138,7 +138,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-start):dir(rtl) {
+  :host(.popover-nested.popover-side-start:dir(rtl)) {
     --offset-x: -5px;
   }
 }
@@ -151,7 +151,7 @@
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.popover-nested.popover-side-end):dir(rtl) {
+  :host(.popover-nested.popover-side-end:dir(rtl)) {
     --offset-x: 5px;
   }
 }

package/dist/collection/components/radio/radio.ios.css

@@ -103,7 +103,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-radio) label:dir(rtl) {
+    :host(.legacy-radio:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -317,7 +317,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -330,7 +330,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }
@@ -463,7 +463,7 @@ input {
     right: -9px;
   }
   @supports selector(:dir(rtl)) {
-    :host(.ion-focused) .radio-icon::after:dir(rtl) {
+    :host(.ion-focused:dir(rtl)) .radio-icon::after {
       left: unset;
       right: unset;
       right: -9px;

package/dist/collection/components/radio/radio.js

@@ -85,7 +85,6 @@ export class Radio {
   }
   /** @internal */
   async setFocus(ev) {
-    // TODO(FW-2832): type (using Event triggers a build error due to conflict with Stencil Event import)
     ev.stopPropagation();
     ev.preventDefault();
     this.el.focus();
@@ -416,7 +415,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(ev: any) => Promise<void>",
+          "signature": "(ev: globalThis.Event) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -425,6 +424,10 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
             "Promise": {
               "location": "global",
               "id": "global::Promise"
+            },
+            "globalThis": {
+              "location": "global",
+              "id": "global::globalThis"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/radio/radio.md.css

@@ -103,7 +103,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-radio) label:dir(rtl) {
+    :host(.legacy-radio:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -317,7 +317,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -330,7 +330,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }
@@ -477,7 +477,7 @@ input {
     right: -12px;
   }
   @supports selector(:dir(rtl)) {
-    :host(.ion-focused.legacy-radio) .radio-icon::after:dir(rtl) {
+    :host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after {
       left: unset;
       right: unset;
       right: -12px;

package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js

@@ -8,9 +8,11 @@ import { configs, test } from "../../../../../utils/test/playwright/index";
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: a11y'), () => {
-    // TODO(FW-5218)
-    test.fixme('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.browser('webkit', 'Tabbing is flaky in Safari');
       await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+    });
+    test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
       const secondGroupRadios = page.locator('#second-group ion-radio');
       await pageUtils.pressKeys('Tab');
@@ -20,9 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await pageUtils.pressKeys('shift+Tab');
       await expect(firstGroupRadios.nth(0)).toBeFocused();
     });
-    // TODO(FW-5218)
-    test.fixme('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
-      await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+    test('using arrow keys should move between enabled radios within group', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
       await pageUtils.pressKeys('Tab');
       await expect(firstGroupRadios.nth(0)).toBeFocused();