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-stylesIf 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.