Skip to content

Commit fa85f03

Browse files
authored
fix(md): item border has improved contrast in dark mode (#29398)
Issue number: resolves #29386 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The item border does not have sufficient contrast in dark mode making the border almost invisible. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed the `--ion-border-color` in the MD dark palette. Instead, we're using the [theme default](https://github.com/ionic-team/ionic-framework/blob/dc1172a8411f71227b713a6d7addca91537ea438/core/src/themes/ionic.theme.default.md.scss#L31). ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The earliest reference to the offending line Brandy and I could find was [here](#18713 (comment)).
1 parent c4b98ff commit fa85f03

8 files changed

+29
-1
lines changed

core/src/components/item/test/a11y/item.e2e.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,35 @@ import AxeBuilder from '@axe-core/playwright';
22
import { expect } from '@playwright/test';
33
import { configs, test } from '@utils/test/playwright';
44

5+
configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => {
6+
test.describe(title('item: dark palette'), () => {
7+
/**
8+
* This test was originally created to ensure the item border has sufficient
9+
* contrast. We don't use an Axe test here because Axe not warn about color
10+
* contrast on the item borders.
11+
*/
12+
test('borders should have sufficient contrast', async ({ page }) => {
13+
test.info().annotations.push({
14+
type: 'issue',
15+
description: 'https://github.com/ionic-team/ionic-framework/issues/29386',
16+
});
17+
await page.setContent(
18+
`
19+
<ion-list>
20+
<ion-item>Item</ion-item>
21+
<ion-item>Item</ion-item>
22+
</ion-list>
23+
`,
24+
config
25+
);
26+
27+
const list = page.locator('ion-list');
28+
29+
await expect(list).toHaveScreenshot(screenshot(`item-dark`));
30+
});
31+
});
32+
});
33+
534
configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
635
test.describe(title('item: axe'), () => {
736
test('should not have accessibility violations', async ({ page }) => {

core/src/css/palettes/dark.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ $colors: (
142142
--ion-background-color-rgb: 18, 18, 18;
143143
--ion-text-color: #ffffff;
144144
--ion-text-color-rgb: 255, 255, 255;
145-
--ion-border-color: #222222;
146145
--ion-background-color-step-50: #1e1e1e;
147146
--ion-background-color-step-100: #2a2a2a;
148147
--ion-background-color-step-150: #363636;

0 commit comments

Comments
 (0)