Merge pull request #46 from pepabo/update-focus-pseudo-classes

focusの擬似クラスをfocus-visibleに変更
pepabo · Dec 9, 2024 · 5bc2654 · 5bc2654
2 parents 82f721d + c31f45a
commit 5bc2654
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 13 deletions.
diff --git a/packages/bottom-navigation/_mixins.scss b/packages/bottom-navigation/_mixins.scss
@@ -125,7 +125,7 @@
       );
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     background-color:
       functions.get-action-background-color(

diff --git a/packages/button/_mixins.scss b/packages/button/_mixins.scss
@@ -335,7 +335,7 @@
     );
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @include -appearance-style(
       $appearance: $appearance,

diff --git a/packages/checkbox/_mixins.scss b/packages/checkbox/_mixins.scss
@@ -15,7 +15,7 @@
     @include -ruleset($states: (hover));
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @include -ruleset($states: (focused));
   }
@@ -34,9 +34,9 @@
     @include -ruleset($states: (disabled));
   }
 
-  &:checked:focus,
+  &:checked:focus-visible,
   &:checked.--focused,
-  &.--selected:focus,
+  &.--selected:focus-visible,
   &.--selected.--focused {
     @include -ruleset($states: (selected, focused));
   }

diff --git a/packages/interactive-list/_mixins.scss b/packages/interactive-list/_mixins.scss
@@ -43,7 +43,7 @@
     & > a,
     & > button,
     & > label {
-      &:focus,
+      &:focus-visible,
       &.--focused {
         background-color:
           adapter-functions.get-background-overlay-color(
@@ -160,7 +160,7 @@
           $state: selected
         );
 
-      &:focus,
+      &:focus-visible,
       &:hover {
         background-color:
           adapter-functions.get-background-overlay-color(
@@ -178,7 +178,7 @@
           $state: activated
         );
 
-      &:focus,
+      &:focus-visible,
       &:hover {
         background-color:
           adapter-functions.get-background-overlay-color(

diff --git a/packages/radio/_mixins.scss b/packages/radio/_mixins.scss
@@ -15,7 +15,7 @@
     @include -ruleset($states: (hover));
   }
 
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @include -ruleset($states: (focused));
   }
@@ -30,9 +30,9 @@
     @include -ruleset($states: (disabled));
   }
 
-  &:checked:focus,
+  &:checked:focus-visible,
   &:checked.--focused,
-  &.--selected:focus,
+  &.--selected:focus-visible,
   &.--selected.--focused {
     @include -ruleset($states: (selected, focused));
   }

diff --git a/packages/select/_mixins.scss b/packages/select/_mixins.scss
@@ -109,7 +109,7 @@
 }
 
 @mixin -focus-rule {
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @content;
   }

diff --git a/packages/textfield/_mixins.scss b/packages/textfield/_mixins.scss
@@ -122,7 +122,7 @@
 }
 
 @mixin -focus-rule {
-  &:focus,
+  &:focus-visible,
   &.--focused {
     @content;
   }