关于SAP Spartacus --cx-color-visual-focus的疑问

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:

:root {
  @each $color, $value in $theme-colors {
    --cx-color-#{$color}: #{$value};
  }
  ...
}

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.

更多Jerry的原创文章，尽在：“汪子熙”: