refactor(inputs): updating focus styles [WIP] #14
Conversation
updating focus styles COMUI-2348
|
Demo will be published at https://apps.inindca.com/common-ui-docs/genesys-webcomponents/feature/COMUI-2348 |
update focus stylings COMUI-2348
| @@ -137,6 +137,7 @@ export class GuxFormFieldNumber { | |||
| </GuxFormFieldLabel> | |||
| <div class="gux-input-and-error-container"> | |||
| <div | |||
| tabIndex={1} | |||
There was a problem hiding this comment.
This seems like a bad idea to me. Why do you need to make this change?
https://whattrainisitnow.com/calendar/ looks like we have to wait until next October to use the :has selector :(
There was a problem hiding this comment.
UX want to have the focus-ring around the component when a keyboard user is navigating to the component and not when the user has clicked the component via a mouse click. So my thought was if I use :focus-visible on the container div and then use :focus-within in the inner div to apply the active styling. So that if the user was to mouse click it will only show active styling.
There was a problem hiding this comment.
From what I read on the mozilla form it should be released in firefox 120 as its already in the 119.0a1 beta. So potentially this November 🙌
https://www.mozilla.org/en-US/firefox/119.0a1/releasenotes/
There was a problem hiding this comment.
AFAIK we support Firefox Extended Support Release which is currently v115 and won't change until v128.
|
@gavin-everett-genesys I think we can close this for now. UX is going to look at it again and maybe align with focus-visible. |
Open to opinions on this change before I do the rest of the inputs.
https://inindca.atlassian.net/browse/COMUI-2348
COMUI-2348