Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toast): high contrast support for button text #28804

Merged
merged 7 commits into from
Jan 11, 2024
Merged

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Jan 10, 2024

Issue number: Internal


What is the current behavior?

With the high contrast themes, the ion-toast buttons do not have sufficient color contrast to satisfy Level AAA.

What is the new behavior?

  • ion-toast buttons satisfy Level AAA color contrast with the high contrast themes

Does this introduce a breaking change?

  • Yes
  • No

Other information

Testing Locally

In core/src/components/toast/test/buttons/index.html add the stylesheet import either the dark or light high contrast theme:

Dark (high contrast):

<link href="../../../../../css/themes/high-contrast-dark.always.css" rel="stylesheet" />

Light (hight contrast):

<link href="../../../../../css/themes/high-contrast-light.always.css" rel="stylesheet" />

@github-actions github-actions bot added the package: core @ionic/core package label Jan 10, 2024
@sean-perkins sean-perkins marked this pull request as ready for review January 10, 2024 01:47
);
});

test('should not have visual regressions', async ({ page }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need screenshot tests for this? I don't think we added any per-component screenshots for dark mode, since the color updates were handled in dedicated theme tests. (We should definitely keep the Axe test though.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ion-toast has custom styles for the different high contrast themes that are not covered by the theme tests.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, true! Fair enough 👍

@sean-perkins sean-perkins merged commit d6addeb into FW-5747 Jan 11, 2024
44 checks passed
@sean-perkins sean-perkins deleted the sp/FW-5828 branch January 11, 2024 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants