fix(styles): add focus color on datepicker component #2061
Conversation
|
|
Preview environment ready: https://preview-2061--swisspost-web-frontend.netlify.app |
| &:focus-visible{ | ||
| outline: forms.$input-focus-color solid forms.$input-focus-outline-thickness; | ||
| } |
There was a problem hiding this comment.
With keyboard navigation, it doesn't work (check Firefox as the default color is blue, it's more obvious).
still missing on the navigation buttons
| &:focus-visible { | ||
| outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color); | ||
| } |
There was a problem hiding this comment.
This one is not compliant with WCAG. Check this article for example to better understand: https://www.sarasoueidan.com/blog/focus-indicators/
You need the same style as buttons.
…color-on-calendar-button
…color-on-calendar-button
There was a problem hiding this comment.
Wait for #1982
The style should be updated according to https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=16545%3A53350&mode=design&t=loOePihAoe8Rf8Bz-1
…color-on-calendar-button
…color-on-calendar-button
…color-on-calendar-button
|
Kudos, SonarCloud Quality Gate passed!
|
|
@davidritter-dotcom implement with the current definition in Figma. |
…color-on-calendar-button
|
@davidritter-dotcom design is ready. This is no longer blocked. |
…color-on-calendar-button
…color-on-calendar-button
|
Waiting for #2855 because of the change in the foucs-style mixin. |
There was a problem hiding this comment.
There some points I noticed that don't seem to be working right now
- Focus ring should not be visible when clicking with a mouse,
- Focus styles are not visible if a date is selected (select a date and open the picker again, the focus ring should be visible when interacting with keyboard)
- When the picker is open, the date field (and in the demo some more components) get a focus ring as well
.
This should not be the case
|
@davidritter-dotcom: This task is in progress quite long now. Do you need help with something? Let me know if we can help. |
|
|
The focus on the select itself gets fixed when a decision is reached on how to apply focus styles to form-select and form-control. |
davidritter-dotcom
deleted the
1807-datepicker-component-set-focus-outline-color-on-calendar-button
branch
No description provided.