diff --git a/core/src/components/item/test/a11y/item.e2e.ts b/core/src/components/item/test/a11y/item.e2e.ts index db936bf64b..20536beb71 100644 --- a/core/src/components/item/test/a11y/item.e2e.ts +++ b/core/src/components/item/test/a11y/item.e2e.ts @@ -2,6 +2,35 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('item: dark palette'), () => { + /** + * This test was originally created to ensure the item border has sufficient + * contrast. We don't use an Axe test here because Axe not warn about color + * contrast on the item borders. + */ + test('borders should have sufficient contrast', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29386', + }); + await page.setContent( + ` + + Item + Item + + `, + config + ); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot(`item-dark`)); + }); + }); +}); + configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { test.describe(title('item: axe'), () => { test('should not have accessibility violations', async ({ page }) => { diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e5129d4a01 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c75f1c1f0e Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ddd58da378 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ea2410f108 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d500d6cbfa Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e22cd97879 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss index 87455bdbec..0c5ef08dd9 100644 --- a/core/src/css/palettes/dark.scss +++ b/core/src/css/palettes/dark.scss @@ -142,7 +142,6 @@ $colors: ( --ion-background-color-rgb: 18, 18, 18; --ion-text-color: #ffffff; --ion-text-color-rgb: 255, 255, 255; - --ion-border-color: #222222; --ion-background-color-step-50: #1e1e1e; --ion-background-color-step-100: #2a2a2a; --ion-background-color-step-150: #363636;