I am working on an a11y issue and I have one doubt about --cx-color-visual-focus.
I know the fact that when a control in Spartacus is focused, the border color is rendered by --cx-color-visual-focus.The value of variable $visual-focus is defined as value #6D9DF7
in file projects\storefrontstyles\scss\theme\sparta_variables.scss. And in root.scss, via the following code:
The variable --cx-color-visual-focus is populated with value #6D9DF7
.And my doubt is: when we press tab button, how Spartacus knows that the focus border must be rendered with --cx-color-visual-focus, but not other variables in root.scss? I guess there must be some “mapping rules” to bind “focus event” with “–cx-color-visual-focus”, however after I search via keyword --cx-color-visual-focus, I don’t find useful hint.
I found answer in url: https://sap.github.io/spartacus-docs/keyboard-accessibility/#css-styles
If you change the outline property, it may break accessibility in Spartacus, because the default visual focus indicator in Spartacus depends on the outline property.
two mixins with name visible-focus are refering --cx-color-visual-focus variable:
ok I found answer here: :focus-within did the trick when tab button is pressed.
