Merge pull request #475 from akhramov/fix/WCAG-2.0-2.4.7-for-buttons

ashleygwilliams · web-flow · commit a251e4ca8b4b · 2018-11-30T08:56:44.000-05:00
[Fixes #474] WCAG-2.0 pt. 2.4.7 violation for buttons
diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -66,8 +66,10 @@ header .button.button-primary.button-download {
   margin-top: 25px;
 }
 
-header .button.button-primary.button-download:hover {
-  border-color: black;
+header .button.button-primary.button-download {
+  &:hover, &:focus {
+      border-color: black;
+  }
 }
 
 h2.subtitle {
@@ -152,7 +154,7 @@ a.brand {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    &:hover {
+    &:hover, &:focus {
       border-color: white;
     }
   }
@@ -179,7 +181,7 @@ a.brand {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    &:hover {
+    &:hover, &:focus {
       border-color: white;
     }
   }
@@ -207,7 +209,7 @@ a.brand {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    &:hover {
+    &:hover, &:focus {
       border-color: $gray;
     }
   }
@@ -236,7 +238,7 @@ a.brand {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    &:hover {
+    &:hover, &:focus {
       border-color: white;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -66,8 +66,10 @@ header .button.button-primary.button-download {`
`66`	`66`	`margin-top: 25px;`
`67`	`67`	`}`
`68`	`68`
`69`		`-header .button.button-primary.button-download:hover {`
`70`		`- border-color: black;`
	`69`	`+header .button.button-primary.button-download {`
	`70`	`+ &:hover, &:focus {`
	`71`	`+ border-color: black;`
	`72`	`+ }`
`71`	`73`	`}`
`72`	`74`
`73`	`75`	`h2.subtitle {`
`@@ -152,7 +154,7 @@ a.brand {`
`152`	`154`	`display: block;`
`153`	`155`	`overflow: hidden;`
`154`	`156`	`text-overflow: ellipsis;`
`155`		`- &:hover {`
	`157`	`+ &:hover, &:focus {`
`156`	`158`	`border-color: white;`
`157`	`159`	`}`
`158`	`160`	`}`
`@@ -179,7 +181,7 @@ a.brand {`
`179`	`181`	`display: block;`
`180`	`182`	`overflow: hidden;`
`181`	`183`	`text-overflow: ellipsis;`
`182`		`- &:hover {`
	`184`	`+ &:hover, &:focus {`
`183`	`185`	`border-color: white;`
`184`	`186`	`}`
`185`	`187`	`}`
`@@ -207,7 +209,7 @@ a.brand {`
`207`	`209`	`display: block;`
`208`	`210`	`overflow: hidden;`
`209`	`211`	`text-overflow: ellipsis;`
`210`		`- &:hover {`
	`212`	`+ &:hover, &:focus {`
`211`	`213`	`border-color: $gray;`
`212`	`214`	`}`
`213`	`215`	`}`
`@@ -236,7 +238,7 @@ a.brand {`
`236`	`238`	`display: block;`
`237`	`239`	`overflow: hidden;`
`238`	`240`	`text-overflow: ellipsis;`
`239`		`- &:hover {`
	`241`	`+ &:hover, &:focus {`
`240`	`242`	`border-color: white;`
`241`	`243`	`}`
`242`	`244`	`}`