fix: update to focus-visible

tatianamac · tatianamac · commit 9e2182a0e7bc · 2023-04-04T03:21:54.000-04:00
diff --git a/src/_includes/css/main.css b/src/_includes/css/main.css
diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss
@@ -7,13 +7,13 @@
     &,
     &:hover,
     &:active,
-    &:focus {
+    &:focus-visible{
       @content;
     }
   } @else {
     &:hover,
     &:active,
-    &:focus {
+    &:focus-visible{
       @content;
     }
   }
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
@@ -46,7 +46,7 @@ strong {
   text-decoration: none;
   transition: all 0.4s ease-in-out;
   &:hover,
-  &:focus {
+  &:focus-visible{
     background: white;
     color: black;
   }
@@ -386,7 +386,7 @@ article blockquote {
 }
 
 article a {
-  &:focus {
+  &:focus-visible{
     outline: 0.25em ridge $pink;
   }
 
@@ -495,7 +495,7 @@ $t-color: (
   &:hover {
     @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--green;
   }
   &--block {
@@ -511,7 +511,7 @@ $t-color: (
   &:hover {
     @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--green;
   }
 }
@@ -524,7 +524,7 @@ $t-color: (
   &:hover {
     @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--pink;
   }
 }
@@ -541,7 +541,7 @@ $t-color: (
     text-decoration: wavy;
     // @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--rust;
   }
 
@@ -559,7 +559,7 @@ $t-color: (
   &:hover {
     @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--rust;
   }
 
@@ -577,7 +577,7 @@ $t-color: (
   &:hover {
     @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--rust;
   }
 
@@ -602,7 +602,7 @@ $t-color: (
     @include t-link-hover;
   }
 
-  &:focus {
+  &:focus-visible{
     @include out--blue;
   }
 
@@ -623,7 +623,7 @@ $t-color: (
     @include bdr--white;
   }
 
-  &:focus {
+  &:focus-visible{
     @include out--blue;
   }
 
@@ -641,7 +641,7 @@ $t-color: (
   &:hover {
     @include t-link-hover;
   }
-  &:focus {
+  &:focus-visible{
     @include out--green;
   }
 }
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
@@ -23,7 +23,7 @@ button,
     @include txn-ease-in-quick;
   }
 
-  &:focus {
+  &:focus-visible{
     @include out--pink;
   }
 }
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
@@ -12,7 +12,7 @@
   border: 1px $pink;
 }
 
-#skip a:focus {
+#skip a:focus-visible{
   transform: translateY(0);
   transition: all .2s ease-in-out;
   outline: 1px solid $pink;                   
@@ -82,7 +82,7 @@
       @include bdr--white;
     }
 
-    &:focus {
+    &:focus-visible{
       @include out--yellow;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -7,13 +7,13 @@`
`7`	`7`	`&,`
`8`	`8`	`&:hover,`
`9`	`9`	`&:active,`
`10`		`- &:focus {`
	`10`	`+ &:focus-visible{`
`11`	`11`	`@content;`
`12`	`12`	`}`
`13`	`13`	`} @else {`
`14`	`14`	`&:hover,`
`15`	`15`	`&:active,`
`16`		`- &:focus {`
	`16`	`+ &:focus-visible{`
`17`	`17`	`@content;`
`18`	`18`	`}`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ strong {`
`46`	`46`	`text-decoration: none;`
`47`	`47`	`transition: all 0.4s ease-in-out;`
`48`	`48`	`&:hover,`
`49`		`- &:focus {`
	`49`	`+ &:focus-visible{`
`50`	`50`	`background: white;`
`51`	`51`	`color: black;`
`52`	`52`	`}`
`@@ -386,7 +386,7 @@ article blockquote {`
`386`	`386`	`}`
`387`	`387`
`388`	`388`	`article a {`
`389`		`- &:focus {`
	`389`	`+ &:focus-visible{`
`390`	`390`	`outline: 0.25em ridge $pink;`
`391`	`391`	`}`
`392`	`392`
`@@ -495,7 +495,7 @@ $t-color: (`
`495`	`495`	`&:hover {`
`496`	`496`	`@include t-link-hover;`
`497`	`497`	`}`
`498`		`- &:focus {`
	`498`	`+ &:focus-visible{`
`499`	`499`	`@include out--green;`
`500`	`500`	`}`
`501`	`501`	`&--block {`
`@@ -511,7 +511,7 @@ $t-color: (`
`511`	`511`	`&:hover {`
`512`	`512`	`@include t-link-hover;`
`513`	`513`	`}`
`514`		`- &:focus {`
	`514`	`+ &:focus-visible{`
`515`	`515`	`@include out--green;`
`516`	`516`	`}`
`517`	`517`	`}`
`@@ -524,7 +524,7 @@ $t-color: (`
`524`	`524`	`&:hover {`
`525`	`525`	`@include t-link-hover;`
`526`	`526`	`}`
`527`		`- &:focus {`
	`527`	`+ &:focus-visible{`
`528`	`528`	`@include out--pink;`
`529`	`529`	`}`
`530`	`530`	`}`
`@@ -541,7 +541,7 @@ $t-color: (`
`541`	`541`	`text-decoration: wavy;`
`542`	`542`	`// @include t-link-hover;`
`543`	`543`	`}`
`544`		`- &:focus {`
	`544`	`+ &:focus-visible{`
`545`	`545`	`@include out--rust;`
`546`	`546`	`}`
`547`	`547`
`@@ -559,7 +559,7 @@ $t-color: (`
`559`	`559`	`&:hover {`
`560`	`560`	`@include t-link-hover;`
`561`	`561`	`}`
`562`		`- &:focus {`
	`562`	`+ &:focus-visible{`
`563`	`563`	`@include out--rust;`
`564`	`564`	`}`
`565`	`565`
`@@ -577,7 +577,7 @@ $t-color: (`
`577`	`577`	`&:hover {`
`578`	`578`	`@include t-link-hover;`
`579`	`579`	`}`
`580`		`- &:focus {`
	`580`	`+ &:focus-visible{`
`581`	`581`	`@include out--rust;`
`582`	`582`	`}`
`583`	`583`
`@@ -602,7 +602,7 @@ $t-color: (`
`602`	`602`	`@include t-link-hover;`
`603`	`603`	`}`
`604`	`604`
`605`		`- &:focus {`
	`605`	`+ &:focus-visible{`
`606`	`606`	`@include out--blue;`
`607`	`607`	`}`
`608`	`608`
`@@ -623,7 +623,7 @@ $t-color: (`
`623`	`623`	`@include bdr--white;`
`624`	`624`	`}`
`625`	`625`
`626`		`- &:focus {`
	`626`	`+ &:focus-visible{`
`627`	`627`	`@include out--blue;`
`628`	`628`	`}`
`629`	`629`
`@@ -641,7 +641,7 @@ $t-color: (`
`641`	`641`	`&:hover {`
`642`	`642`	`@include t-link-hover;`
`643`	`643`	`}`
`644`		`- &:focus {`
	`644`	`+ &:focus-visible{`
`645`	`645`	`@include out--green;`
`646`	`646`	`}`
`647`	`647`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ button,`
`23`	`23`	`@include txn-ease-in-quick;`
`24`	`24`	`}`
`25`	`25`
`26`		`- &:focus {`
	`26`	`+ &:focus-visible{`
`27`	`27`	`@include out--pink;`
`28`	`28`	`}`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`border: 1px $pink;`
`13`	`13`	`}`
`14`	`14`
`15`		`-#skip a:focus {`
	`15`	`+#skip a:focus-visible{`
`16`	`16`	`transform: translateY(0);`
`17`	`17`	`transition: all .2s ease-in-out;`
`18`	`18`	`outline: 1px solid $pink;`
`@@ -82,7 +82,7 @@`
`82`	`82`	`@include bdr--white;`
`83`	`83`	`}`
`84`	`84`
`85`		`- &:focus {`
	`85`	`+ &:focus-visible{`
`86`	`86`	`@include out--yellow;`
`87`	`87`	`}`
`88`	`88`	`}`