voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -4,95 +4,128 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * This behavior does not vary across modes/directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('radio: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/radio/test/a11y`, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-    test.describe(title('radio: keyboard navigation'), () => {
-        test.beforeEach(async ({ page, browserName }) => {
+        test('default layout should not have accessibility violations', async ({ page }) => {
             await page.setContent(`
-      <ion-app>
-        <ion-content>
+        <main>
+          <ion-radio>my label</ion-radio>
+          <ion-radio aria-label="my aria label"></ion-radio>
+          <ion-radio-group>
+            <ion-radio>my label in a group</ion-radio>
+          </ion-radio-group>
+          <ion-radio-group>
+            <ion-radio aria-label="my aria label in a group"></ion-radio>
+          </ion-radio-group>
           <ion-list>
-            <ion-radio-group id="first-group" value="huey">
-              <ion-item>
-                <ion-radio value="huey">Huey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="dewey">Dewey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="fooey" disabled>Fooey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="louie">Louie</ion-radio>
-              </ion-item>
-            </ion-radio-group>
+            <ion-item>
+              <ion-radio-group>
+                <ion-radio>my label in a group in a list</ion-radio>
+              </ion-radio-group>
+            </ion-item>
           </ion-list>
           <ion-list>
-            <ion-radio-group id="second-group" value="huey">
-              <ion-item>
-                <ion-radio value="huey">Huey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="dewey">Dewey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="fooey" disabled>Fooey</ion-radio>
-              </ion-item>
-              <ion-item>
-                <ion-radio value="louie">Louie</ion-radio>
-              </ion-item>
-            </ion-radio-group>
+            <ion-item>
+              <ion-radio-group>
+                <ion-radio aria-label="my aria label in a group in a list"></ion-radio>
+              </ion-radio-group>
+            </ion-item>
           </ion-list>
-        </ion-content>
-      </ion-app>
-    `, config);
-            if (browserName === 'webkit') {
-                const radio = page.locator('#first-group ion-radio').first();
-                /**
-                 * Sometimes Safari does not focus the first radio.
-                 * This is a workaround to ensure the first radio is focused.
-                 *
-                 * Wait for the first radio to be rendered before tabbing.
-                 * This is necessary because the first radio may not be rendered
-                 * when the page first loads.
-                 *
-                 * This would cause the first radio to be skipped when tabbing.
-                 */
-                await radio.waitFor();
-            }
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
         });
-        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');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
-            await pageUtils.pressKeys('Tab');
-            await expect(secondGroupRadios.nth(0)).toBeFocused();
-            await pageUtils.pressKeys('shift+Tab');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
+        test('selected state should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <main>
+          <ion-radio-group value="a">
+            <ion-radio value="a">Selected radio</ion-radio>
+          </ion-radio-group>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
         });
-        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();
-            await page.keyboard.press('ArrowDown');
-            await expect(firstGroupRadios.nth(1)).toBeFocused();
-            // firstGroupRadios.nth(2) is disabled so it should not receive focus.
-            await page.keyboard.press('ArrowDown');
-            await expect(firstGroupRadios.nth(3)).toBeFocused();
-            await page.keyboard.press('ArrowDown');
-            await expect(firstGroupRadios.nth(0)).toBeFocused();
-            await page.keyboard.press('ArrowUp');
-            await expect(firstGroupRadios.nth(3)).toBeFocused();
+        test.describe(title('radio: keyboard navigation'), () => {
+            test.beforeEach(async ({ page, browserName }) => {
+                await page.setContent(`
+        <ion-app>
+          <ion-content>
+            <ion-list>
+              <ion-radio-group id="first-group" value="huey">
+                <ion-item>
+                  <ion-radio value="huey">Huey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="dewey">Dewey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="fooey" disabled>Fooey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="louie">Louie</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </ion-list>
+            <ion-list>
+              <ion-radio-group id="second-group" value="huey">
+                <ion-item>
+                  <ion-radio value="huey">Huey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="dewey">Dewey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="fooey" disabled>Fooey</ion-radio>
+                </ion-item>
+                <ion-item>
+                  <ion-radio value="louie">Louie</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </ion-list>
+          </ion-content>
+        </ion-app>
+      `, config);
+                if (browserName === 'webkit') {
+                    const radio = page.locator('#first-group ion-radio').first();
+                    /**
+                     * Sometimes Safari does not focus the first radio.
+                     * This is a workaround to ensure the first radio is focused.
+                     *
+                     * Wait for the first radio to be rendered before tabbing.
+                     * This is necessary because the first radio may not be rendered
+                     * when the page first loads.
+                     *
+                     * This would cause the first radio to be skipped when tabbing.
+                     */
+                    await radio.waitFor();
+                }
+            });
+            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');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+                await pageUtils.pressKeys('Tab');
+                await expect(secondGroupRadios.nth(0)).toBeFocused();
+                await pageUtils.pressKeys('shift+Tab');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+            });
+            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();
+                await page.keyboard.press('ArrowDown');
+                await expect(firstGroupRadios.nth(1)).toBeFocused();
+                // firstGroupRadios.nth(2) is disabled so it should not receive focus.
+                await page.keyboard.press('ArrowDown');
+                await expect(firstGroupRadios.nth(3)).toBeFocused();
+                await page.keyboard.press('ArrowDown');
+                await expect(firstGroupRadios.nth(0)).toBeFocused();
+                await page.keyboard.press('ArrowUp');
+                await expect(firstGroupRadios.nth(3)).toBeFocused();
+            });
         });
     });
 });

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

@@ -153,7 +153,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: 'db2e1c69be545dcb95fa7c7bd0c36a1fd3423294', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {

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

@@ -122,33 +122,10 @@
   height: var(--knob-handle-size);
   text-align: center;
 }
-@supports (inset-inline-start: 0) {
-  .range-knob-handle {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-knob-handle {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .range-knob-handle {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .range-knob-handle {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .range-knob-handle:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.range-knob-handle {
+  inset-inline-start: 0;
 }
+
 :host-context([dir=rtl]) .range-knob-handle {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -176,33 +153,10 @@
   width: 100%;
   height: var(--bar-height);
 }
-@supports (inset-inline-start: 0) {
-  .range-bar-container {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-bar-container {
-    left: 0;
-  }
-  :host-context([dir=rtl]) .range-bar-container {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  [dir=rtl] .range-bar-container {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    .range-bar-container:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
+.range-bar-container {
+  inset-inline-start: 0;
 }
+
 :host-context([dir=rtl]) .range-bar-container {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -240,33 +194,10 @@
   z-index: 2;
   pointer-events: none;
 }
-@supports (inset-inline-start: 0) {
-  .range-knob {
-    inset-inline-start: calc(50% - var(--knob-size) / 2);
-  }
-}
-@supports not (inset-inline-start: 0) {
-  .range-knob {
-    left: calc(50% - var(--knob-size) / 2);
-  }
-  :host-context([dir=rtl]) .range-knob {
-    left: unset;
-    right: unset;
-    right: calc(50% - var(--knob-size) / 2);
-  }
-  [dir=rtl] .range-knob {
-    left: unset;
-    right: unset;
-    right: calc(50% - var(--knob-size) / 2);
-  }
-  @supports selector(:dir(rtl)) {
-    .range-knob:dir(rtl) {
-      left: unset;
-      right: unset;
-      right: calc(50% - var(--knob-size) / 2);
-    }
-  }
+.range-knob {
+  inset-inline-start: calc(50% - var(--knob-size) / 2);
 }
+
 :host-context([dir=rtl]) .range-knob {
   /* stylelint-disable-next-line property-disallowed-list */
   left: unset;
@@ -523,21 +454,12 @@
   --knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
   --knob-size: 26px;
   --bar-height: 4px;
-  --bar-background: var(--ion-color-step-900, #e6e6e6);
-  --bar-background-active: var(--ion-color-primary, #3880ff);
+  --bar-background: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
+  --bar-background-active: var(--ion-color-primary, #0054e9);
   --bar-border-radius: 2px;
   --height: 42px;
 }
 
-:host(.legacy-range) {
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
 :host(.range-item-start-adjustment) {
   -webkit-padding-start: 24px;
   padding-inline-start: 24px;
@@ -617,7 +539,7 @@
   top: 17px;
   width: 4px;
   height: 8px;
-  background: var(--ion-color-step-900, #e6e6e6);
+  background: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
   pointer-events: none;
 }