我的工作日志 2020年11月10日 星期二

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”…