mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
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](dc1172a841/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](https://github.com/ionic-team/ionic-framework/issues/18713#issuecomment-510644371).
This commit is contained in:
@ -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(
|
||||
`
|
||||
<ion-list>
|
||||
<ion-item>Item</ion-item>
|
||||
<ion-item>Item</ion-item>
|
||||
</ion-list>
|
||||
`,
|
||||
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 }) => {
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
@ -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;
|
||||
|
Reference in New Issue
Block a user