Align focus ring color across components #1218
Conversation
…n, to ensure that the bottom styling does not get cut of when in focus
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1218.westeurope.azurestaticapps.net |
As `--color-emphasis` is generally used as an override, whereas `--uui-color-focus` will always have a value, so it wouldn't need a fallback.
Removing this would be a breaking-change, as it is documented and we use it in Umbraco CMS backoffice. I have also changed the fallback order, so that `--color-emphasis` comes before `--uui-color-focus`.
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1218.westeurope.azurestaticapps.net |
leekelleher
left a comment
leekelleher
left a comment
There was a problem hiding this comment.
Tested out, all good! 🙌
I made a few tweaks around the usage of the --color-emphasis variable, as it is generally used as an override rather than a fallback. In most cases --uui-color-focus will have a value, so it would rarely use the fallback (which most likely be undefined).
Also I reverted the removal of --uui-focus-outline-color from uui-button, as that would be a breaking-change.
All good progress though! Thanks @Welander1994! 🚀
Description
Changes the CSS rule for the focus state, so all elements use the same rule
It also add a tiny bit of margin to button, to ensure that it focus style does not get cut off
Types of changes
Motivation and context
This is to ensure consistent identification for accessibility
How to test?
Screenshots (if appropriate)
Checklist