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

HCM: Align form validation icon color in high contrast mode across form elements #4284

Open
alionazherdetska opened this issue Dec 15, 2024 · 0 comments · May be fixed by #4319
Open

HCM: Align form validation icon color in high contrast mode across form elements #4284

alionazherdetska opened this issue Dec 15, 2024 · 0 comments · May be fixed by #4319
Assignees
Labels
💜 accessibility 📦 styles Related to the @swisspost/design-system-styles package
Milestone

Comments

@alionazherdetska
Copy link
Contributor

alionazherdetska commented Dec 15, 2024

Description:
The color of the form validation icons is inconsistent in high contrast mode. Specifically:

  1. For text input, select, and textarea fields, the validation icons the icon is red
  2. For all other form elements, the validation icon color appears as white.

Steps to Reproduce:

  1. Enable high contrast mode in the browser or system settings.
  2. Navigate to the Form Validation page.
  3. Observe the icon colors for each form element.

Image
Image

Possible solution:
You can adjust the fill property for the background SVG used in the text input, select, and textarea elements to ensure consistent icon color in high contrast mode:
Image

@alionazherdetska alionazherdetska added 💜 accessibility 📦 styles Related to the @swisspost/design-system-styles package labels Dec 15, 2024
@alionazherdetska alionazherdetska added this to the PPNL Support milestone Dec 15, 2024
@gfellerph gfellerph moved this from 👀 Triage to 💻 Ready for development in Design System Production Board Dec 16, 2024
@leagrdv leagrdv self-assigned this Dec 16, 2024
@leagrdv leagrdv moved this from 💻 Ready for development to 🕹️ Coding in progress in Design System Production Board Dec 16, 2024
@leagrdv leagrdv linked a pull request Dec 17, 2024 that will close this issue
@leagrdv leagrdv moved this from 🕹️ Coding in progress to 🤬 Dev in Code Review in Design System Production Board Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💜 accessibility 📦 styles Related to the @swisspost/design-system-styles package
Projects
Status: 🤬 Dev in Code Review
Development

Successfully merging a pull request may close this issue.

2 participants