diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index abb5a278e1..f3ee40f95b 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -81,7 +81,8 @@ text-align: center; } -.range-knob-pressed .range-pin { +.range-knob-pressed .range-pin, +.range-knob-handle.ion-focused .range-pin { @include transform(translate3d(0, 0, 0), scale(1)); } diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 987f286e90..e267271136 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -28,6 +28,7 @@ :host(.ion-color) .range-bar-active, :host(.ion-color) .range-knob, +:host(.ion-color) .range-knob::before, :host(.ion-color) .range-pin, :host(.ion-color) .range-pin::before, :host(.ion-color) .range-tick { @@ -63,6 +64,27 @@ transition-timing-function: ease; z-index: 2; + + &::before { + @include border-radius(50%); + @include position(null, null, null, 0); + + position: absolute; + + width: var(--knob-size); + height: var(--knob-size); + + transform: scale(1); + + // Value from Material Design components for the web + transition: 0.267s cubic-bezier(0, 0, 0.58, 1); + + background: var(--knob-background); + + content: ""; + opacity: #{$range-md-knob-indicator-opacity-hover}; + pointer-events: none; + } } .range-tick { @@ -130,11 +152,38 @@ } } -.range-knob-pressed .range-pin { +.range-knob-pressed .range-pin, +.range-knob-handle.ion-focused .range-pin { @include transform(translate3d(0, -24px, 0), scale(1)); } -:host(:not(.range-has-pin)) .range-knob-pressed .range-knob { +@media (any-hover: hover) { + .range-knob-handle:hover .range-knob:before { + transform: scale(2); + + opacity: #{$range-md-knob-indicator-opacity-hover}; + } +} + +.range-knob-handle { + &.ion-activated .range-knob:before, + &.ion-focused .range-knob:before, + &.range-knob-pressed .range-knob:before { + transform: scale(2); + } + + &.ion-focused .range-knob::before { + opacity: #{$range-md-knob-indicator-opacity-focus}; + } + + &.ion-activated .range-knob::before, + &.range-knob-pressed .range-knob::before { + opacity: #{$range-md-knob-indicator-opacity-active}; + } +} + +:host(:not(.range-has-pin)) .range-knob-pressed .range-knob, +:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob { transform: scale(1); } diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index 488c3fd623..8294ec3d64 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -27,12 +27,6 @@ $range-md-bar-background-color: $background-color-step-250 !default /// @prop - Background of the active range bar $range-md-bar-active-background-color: current-color(base) !default; -/// @prop - Width of the range knob -$range-md-knob-width: 18px !default; - -/// @prop - Height of the range knob -$range-md-knob-height: $range-md-knob-width !default; - /// @prop - Background of the range knob $range-md-knob-background-color: $range-md-bar-active-background-color !default; @@ -53,3 +47,12 @@ $range-md-pin-padding-horizontal: 0 !default; /// @prop - Background of the range pin when the value is the minimum $range-md-pin-min-background-color: $range-md-bar-background-color !default; + +/// @prop - Opacity of the indicator shown when the range knob is hovered +$range-md-knob-indicator-opacity-hover: 0.13 !default; + +/// @prop - Opacity of the indicator shown when the range knob is focused +$range-md-knob-indicator-opacity-focus: 0.13 !default; + +/// @prop - Opacity of the indicator shown when the range knob is active +$range-md-knob-indicator-opacity-active: 0.25 !default; \ No newline at end of file diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 4a360afdcb..f03c501435 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -701,6 +701,8 @@ const renderKnob = ( 'range-knob-pressed': pressed, 'range-knob-min': value === min, 'range-knob-max': value === max, + 'ion-activatable': true, + 'ion-focusable': true, }} style={knobStyle()} role="slider" diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts new file mode 100644 index 0000000000..bc2941bf51 --- /dev/null +++ b/core/src/components/range/test/a11y/range.e2e.ts @@ -0,0 +1,59 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('range: a11y', () => { + test('should not have visual regressions', async ({ page, skip }) => { + skip.rtl(); + skip.mode('ios', 'iOS mode does not display hover/active/focus styles.'); + + await page.setContent( + ` + + + + + ` + ); + + const range = page.locator('ion-range'); + const rangeHandle = range.locator('.range-knob-handle'); + + await rangeHandle.evaluate((el) => el.classList.add('ion-focused')); + await page.waitForChanges(); + + expect(await range.screenshot()).toMatchSnapshot(`range-focus-${page.getSnapshotSettings()}.png`); + + const box = (await rangeHandle.boundingBox())!; + const centerX = box.x + box.width / 2; + const centerY = box.y + box.height / 2; + + await page.mouse.move(centerX, centerY); + await page.mouse.down(); + await page.waitForChanges(); + + expect(await range.screenshot()).toMatchSnapshot(`range-active-${page.getSnapshotSettings()}.png`); + }); + + test.describe('with pin', () => { + test('should not have visual regressions', async ({ page, skip }) => { + skip.rtl(); + + await page.setContent( + ` + + + + + ` + ); + + const range = page.locator('ion-range'); + const rangeHandle = range.locator('.range-knob-handle'); + + await rangeHandle.evaluate((el) => el.classList.add('ion-focused')); + await page.waitForChanges(); + + expect(await range.screenshot()).toMatchSnapshot(`range-focus-with-pin-${page.getSnapshotSettings()}.png`); + }); + }); +}); diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9c64943c10 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..555110b288 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4023d8e2a1 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2b8de06688 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e19ab4edc8 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..616442739a Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..771f4e9710 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..acb1e45b6c Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8822d643c8 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..de849ab5ab Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0e9f54de88 Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5bc979dc6d Binary files /dev/null and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png index defe7434e9..a54d9c788b 100644 Binary files a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png index b565d59dd9..fe36dfb162 100644 Binary files a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png index 560e9a3e35..412d932de9 100644 Binary files a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png index e0fca449b6..82d76d0254 100644 Binary files a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png index 7ea1ed5256..2b4938b4ca 100644 Binary files a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png index 17fbd22d5c..120e380c0a 100644 Binary files a/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/activeBarStart/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png index e1f0aeae32..3c9bfbaf7d 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png index 8f7a80202a..fa8c10831d 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png index 8f9d0289b3..40e3ae5637 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png index afa14b1883..23304db16f 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png index 30be9c4978..f05f27cade 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png index c3fab35b1d..b380fd4e50 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png index 8456d9ac21..69393f4371 100644 Binary files a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png index b2462b6d7e..fb7a683eee 100644 Binary files a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png index 53a0210bdf..37787ff82d 100644 Binary files a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png index 4f8d00d044..68d1ae6f63 100644 Binary files a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png index 988a34c9a9..76e3178bee 100644 Binary files a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png index 811a089053..16294c4a5e 100644 Binary files a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/utils/test/playwright/playwright-declarations.ts b/core/src/utils/test/playwright/playwright-declarations.ts index 6260f40647..330307e21d 100644 --- a/core/src/utils/test/playwright/playwright-declarations.ts +++ b/core/src/utils/test/playwright/playwright-declarations.ts @@ -101,7 +101,7 @@ export type BrowserNameOrCallback = string | ((browserName: string) => boolean); export interface E2ESkip { rtl: (reason?: string) => void; browser: (browserNameOrCallback: BrowserNameOrCallback, reason?: string) => void; - mode: (mode: string, reason?: string) => void; + mode: (mode: 'md' | 'ios', reason?: string) => void; } export interface SetIonViewportOptions {