use class prefix

Author: haschek

src/common/scss/_accessibility-defaults.scss

@@ -67,12 +67,12 @@
     }
 }
 
-.focus-by-keyboard-animated {
+.#{$eccgui}-a11y-focus-by-keyboard-animated {
     @include focus-by-keyboard-static;
     @include focus-by-keyboard-animation;
 }
 
-.focus-by-keyboard-static {
+.#{$eccgui}-a11y-focus-by-keyboard-static {
     @include focus-by-keyboard-static;
 
     animation: none;
@@ -85,17 +85,17 @@
     outline-offset: 0;
 }
 
-.focus-by-pointer {
+.#{$eccgui}-a11y-focus-by-pointer {
     @include focus-by-pointer;
 }
 
 *[tabindex]:not([tabindex^="-"]):focus-visible,
 :focus-visible {
-    @extend .focus-by-keyboard-animated;
+    @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
 }
 
 input:focus:not(:focus-visible),
 textarea:focus:not(:focus-visible),
 :focus:not(:focus-visible) {
-    @extend .focus-by-pointer;
+    @extend .#{$eccgui}-a11y-focus-by-pointer;
 }

src/components/Application/_header.scss

@@ -196,7 +196,7 @@ a.#{$prefix}--header__menu-item:active {
 a.#{$prefix}--header__name,
 a.#{$prefix}--header__menu-item {
     &:focus {
-        @extend .focus-by-pointer;
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
 
         border: none;
         box-shadow: none;
@@ -205,7 +205,7 @@ a.#{$prefix}--header__menu-item {
     &,
     .#{$prefix}--popover--open & {
         &:focus-visible {
-            @extend .focus-by-keyboard-animated;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
 
             border: none;
             box-shadow: none;

src/components/Application/_sidebar.scss

@@ -31,6 +31,6 @@ $ui-02: $eccgui-color-workspace-background !default;
 
 .#{$eccgui}-application__menu__toggler.cds--header__action {
     &:focus-visible {
-        @extend .focus-by-keyboard-animated;
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
     }
 }

src/components/AutoSuggestion/AutoSuggestion.scss

@@ -41,7 +41,7 @@
     &:has(.cm-editor.cm-focused) {
         --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
 
-        @extend .focus-by-keyboard-static;
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
     }
 
     .cm-editor {

src/components/Checkbox/checkbox.scss

@@ -47,7 +47,7 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            @extend .focus-by-keyboard-static;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
@@ -77,7 +77,7 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
         --#{$eccgui}-a11y-outline-offset: 1px;
 
         input:focus ~ .#{$ns}-control-indicator {
-            @extend .focus-by-keyboard-static;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
     }
 }

src/components/Dialog/dialog.scss

@@ -26,7 +26,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
 .#{$ns}-overlay-end-focus-trap {
     // do not show focus on trap elements, we need to fix keeping focus on modal elements differently later
     &[tabindex]:not([tabindex^="-"]):focus-visible {
-        @extend .focus-by-pointer;
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
     }
 }
 

src/components/MultiSuggestField/_multisuggestfield.scss

@@ -21,6 +21,6 @@
     }
 
     &:focus-within {
-        @extend .focus-by-keyboard-static;
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
     }
 }

src/components/RadioButton/radiobutton.scss

@@ -12,7 +12,7 @@
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            @extend .focus-by-keyboard-static;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,

src/components/TextField/textfield.scss

@@ -149,7 +149,7 @@ $eccgui-map-intent-bgcolors: (
     }
 
     &:focus-visible {
-        @extend .focus-by-keyboard-static;
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
     }
 }
 

src/extensions/codemirror/_codemirror.scss

@@ -127,7 +127,7 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
             --#{$eccgui}-a11y-outline-offset: 0;
 
-            @extend .focus-by-keyboard-static;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
 
             &.#{eccgui}-intent--warning {
                 --#{$eccgui}-a11y-outline-color: #{$eccgui-color-warning-text};