diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 35005bc6fc..5753403c1f 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -1,3 +1,4 @@ +@use "sass:math"; @import "./item-divider"; @import "./item-divider.md.vars"; @@ -14,7 +15,7 @@ border-bottom: $item-divider-md-border-bottom; - font-size: $item-divider-md-font-size; + font-size: dynamic-font($item-divider-md-font-size); } @@ -44,7 +45,13 @@ ::slotted(ion-icon) { color: $item-md-icon-slot-color; - font-size: $item-md-icon-slot-font-size; + // The icon's font size should use em units to support + // font scaling but evaluate to 24px at 100% font size. + // The value in em units is calculated by dividing + // the icon's font size in pixels by the item divider's + // font size in pixels. + // e.g. 24px / 14px = 1.7142857143em + font-size: math.div($item-md-icon-slot-font-size, $item-divider-md-font-size) * 1em; } :host(.ion-color) ::slotted(ion-icon) { diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index 60b0ed793c..f817b80b45 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -14,7 +14,7 @@ $item-divider-md-color: $text-color-step-600 !default; $item-divider-md-background: $background-color !default; /// @prop - Font size for the divider -$item-divider-md-font-size: 0.875rem !default; +$item-divider-md-font-size: 14px !default; /// @prop - Border bottom for the divider $item-divider-md-border-bottom: 1px solid $item-md-border-color !default; diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png index 579845f68e..e8fc0d7e84 100644 Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Firefox-linux.png index 41f5f01a93..dddc00285d 100644 Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Safari-linux.png index 1cb152bdc5..96d2ab78a9 100644 Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Chrome-linux.png index 8b45b93103..771d6fc1bb 100644 Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Firefox-linux.png index b7fe6c191f..416c2077b2 100644 Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Safari-linux.png index 98c81ba040..a79fb9ecd3 100644 Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 0b2996144d..9b107457e9 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -161,7 +161,7 @@ min-height: 24px; - font-size: 13px; + font-size: dynamic-font(13px); } // iOS Item Avatar diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 5be369ec05..a029b1d33f 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -7,7 +7,7 @@ $item-ios-min-height: 44px !default; /// @prop - Font size of the item -$item-ios-font-size: 16px !default; +$item-ios-font-size: dynamic-font(16px) !default; /// @prop - Margin top of the item paragraph $item-ios-paragraph-margin-top: 0 !default; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 40770b0595..5075928031 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -1,3 +1,4 @@ +@use "sass:math"; @import "./item"; @import "./item.md.vars"; @import "../label/label.md.vars"; @@ -25,7 +26,7 @@ --highlight-color-valid: #{$item-md-input-highlight-color-valid}; --highlight-color-invalid: #{$item-md-input-highlight-color-invalid}; - font-size: $item-md-font-size; + font-size: dynamic-font($item-md-font-size); font-weight: normal; text-transform: none; @@ -201,7 +202,13 @@ ::slotted(ion-icon) { color: $item-md-icon-slot-color; - font-size: $item-md-icon-slot-font-size; + // The icon's font size should use em units to support + // font scaling but evaluate to 24px at 100% font size. + // The value in em units is calculated by dividing + // the icon's font size in pixels by the item's + // font size in pixels. + // e.g. 24px / 16px = 1.5em + font-size: math.div($item-md-icon-slot-font-size, $item-md-font-size) * 1em; } :host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon) { @@ -338,7 +345,7 @@ min-height: 25px; - font-size: 12px; + font-size: dynamic-font(12px); } diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index ae853ed371..f3942c3e7e 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -165,7 +165,7 @@ $item-md-icon-end-slot-margin-end: null !default; $item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default; /// @prop - Font size of an icon in the start/end slot -$item-md-icon-slot-font-size: 24px !default; +$item-md-icon-slot-font-size: 24px !default; // Label Slots diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 46e2cafe05..c9881d897d 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -67,7 +67,7 @@ --show-full-highlight: 0; --show-inset-highlight: 0; --detail-icon-color: initial; - --detail-icon-font-size: 20px; + --detail-icon-font-size: 1.25em; --detail-icon-opacity: 0.25; --color-activated: var(--color); --color-focused: var(--color); @@ -573,7 +573,7 @@ ion-ripple-effect { .item-counter { padding-top: 5px; - font-size: 12px; + font-size: dynamic-font(12px); z-index: 1; } diff --git a/core/src/components/item/test/a11y/item.e2e.ts b/core/src/components/item/test/a11y/item.e2e.ts index 2badce035d..b4df2db988 100644 --- a/core/src/components/item/test/a11y/item.e2e.ts +++ b/core/src/components/item/test/a11y/item.e2e.ts @@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ title, config }) => { +configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { test.describe(title('item: axe'), () => { test('should not have accessibility violations', async ({ page }) => { await page.goto(`/src/components/item/test/a11y`, config); @@ -30,4 +30,150 @@ configs().forEach(({ title, config }) => { expect(await item2.getAttribute('aria-label')).toEqual('test'); }); }); + + test.describe(title('item: font scaling'), () => { + test('should scale text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + + await expect(item).toHaveScreenshot(screenshot(`item-scale`)); + }); + test('should scale slotted icons on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + + Item + + + `, + config + ); + + const item = page.locator('ion-item'); + + await expect(item).toHaveScreenshot(screenshot(`item-icons-scale`)); + }); + test('should scale detail icon on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + + await expect(item).toHaveScreenshot(screenshot(`item-detail-icon-scale`)); + }); + test('should scale counter text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Counter + + + `, + config + ); + + const item = page.locator('ion-item'); + + await expect(item).toHaveScreenshot(screenshot(`item-counter-text-scale`)); + }); + test('should scale helper and error text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + + Helper + + Helper Text + + + Error + + Error Text + + + `, + config + ); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot(`item-helper-error-text-scale`)); + }); + test('should scale buttons in an item on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + + Item + Default + + + Item + Small + + + Item + Large + + + `, + config + ); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot(`item-buttons-scale`)); + }); + }); }); diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fcdd58f30c Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b84d3c3e6e Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d7da3d79cd Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6b0fbb44c8 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2e60a7ffaf Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1cca3e2e45 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..70503b8a81 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0805a566a7 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a93ed05e86 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4e7579a2e4 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6127c0cc5a Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..80dfe5ad8b Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-counter-text-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f2e85354e6 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4aa9b78ad7 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..68f23ff9e6 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3cccd5283d Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d5527c5e0d Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b13eba4b7d Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-detail-icon-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f677022e93 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..613680f0f8 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8f6d9534fa Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cce600fa29 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..52ffc6345a Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6b9acea4dc Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-helper-error-text-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ef7f85d4e9 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..01fc699f62 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1982a0b64c Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9889547d46 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1d1a20fc90 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3f9644e911 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-icons-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..359c72d7c0 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ea7ca5b4a9 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..395d8d6945 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0a2ffdc9b7 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..17982d2492 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..12c4d81b84 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Chrome-linux.png index 9552bb9c63..32262f9362 100644 Binary files a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Firefox-linux.png index b7dd55f462..64306b615f 100644 Binary files a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Safari-linux.png index f89b863d12..79ad57c327 100644 Binary files a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Chrome-linux.png index 2e9512ad72..b62827db2f 100644 Binary files a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Firefox-linux.png index 47dcbbf125..818a9924f8 100644 Binary files a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Safari-linux.png index c10909f015..90a7f0979b 100644 Binary files a/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/reorder-group/test/a11y/reorder-group.e2e.ts-snapshots/reorder-group-scale-md-ltr-Mobile-Safari-linux.png differ