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

[Datepicker component] Set focus outline color on calendar button #1807

Closed
imagoiq opened this issue Aug 16, 2023 · 2 comments · Fixed by #2061
Closed

[Datepicker component] Set focus outline color on calendar button #1807

imagoiq opened this issue Aug 16, 2023 · 2 comments · Fixed by #2061
Assignees
Labels
📦 styles Related to the @swisspost/design-system-styles package

Comments

@imagoiq
Copy link
Contributor

imagoiq commented Aug 16, 2023

Datepicker component is missing a style for the calendar icon button (and inside the overlay) on focus and uses the default style from the browser.

On Firefox
firefox_3CR9qYn3aj

firefox_jdxrAwQiVh

On Chrome
msedge_E7ZKjJgXnP

@imagoiq imagoiq added the css label Aug 16, 2023
@gfellerph gfellerph added 📦 styles Related to the @swisspost/design-system-styles package pibs labels Aug 23, 2023
@davidritter-dotcom davidritter-dotcom self-assigned this Sep 27, 2023
@davidritter-dotcom davidritter-dotcom moved this from 📋 Backlog to 🔖 Ready in Design System Production Board Sep 28, 2023
@davidritter-dotcom davidritter-dotcom moved this from 🔖 Ready to 🏗 In progress in Design System Production Board Sep 28, 2023
@davidritter-dotcom davidritter-dotcom moved this from 🏗 In progress to 👀 In review in Design System Production Board Oct 10, 2023
@davidritter-dotcom
Copy link
Contributor

I could add the focus color for the calendar icon button and for the days inside but unfortunately I couldn't find where firefox adds its focus styles for the navigation buttons.

@imagoiq
Copy link
Contributor Author

imagoiq commented Oct 19, 2023

I could add the focus color for the calendar icon button and for the days inside but unfortunately I couldn't find where firefox adds its focus styles for the navigation buttons.

It works with something like that:

button.ngb-dp-arrow-btn:focus-visible {
  outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
}

@oliverschuerch oliverschuerch moved this from 👀 In review to 🏗 In progress in Design System Production Board Nov 2, 2023
@oliverschuerch oliverschuerch moved this from 🏗 In progress to 👀 In review in Design System Production Board Nov 7, 2023
@oliverschuerch oliverschuerch removed their assignment Nov 7, 2023
@gfellerph gfellerph removed the css label Feb 7, 2024
@oliverschuerch oliverschuerch moved this from Design in review to Development in code review in Design System Production Board Apr 23, 2024
@github-project-automation github-project-automation bot moved this from 🤬 Dev in code review to 🚀 Ready to use (done) in Design System Production Board Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 styles Related to the @swisspost/design-system-styles package
Projects
Development

Successfully merging a pull request may close this issue.

4 participants