Blockbase: Add focus styles (#4684)

blockbase/assets/ponyfill.css

@@ -233,6 +233,11 @@ a:hover, a:focus {
 	text-decoration: none;
 }
 
+a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
+	outline: 1px dotted currentColor;
+	text-decoration: none;
+}
+
 input.wp-block-search__input,
 input[type="text"],
 input[type="email"],
@@ -276,8 +281,17 @@ input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
-	color: var(--wp--custom--form--color--text);
 	border-color: var(--custom--form--color--border);
+	color: var(--wp--custom--form--color--text);
+	outline: 1px dotted currentColor;
+	outline-offset: 2px;
+}
+
+input[type="checkbox"]:focus,
+input[type="submit"]:focus,
+button:focus {
+	outline: 1px dotted currentColor;
+	outline-offset: 2px;
 }
 
 select {
@@ -562,6 +576,11 @@ p.has-drop-cap:not(:focus):first-letter {
 	font-size: var(--wp--custom--form--checkbox--checked--font-size);
 }
 
+.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:focus + ::before {
+	outline: 1px dotted currentColor;
+	outline-offset: 2px;
+}
+
 .wp-block-post-comments .comment-reply-title small {
 	float: right;
 	font-size: 14px;

blockbase/sass/blocks/_post-comments.scss

@@ -114,6 +114,11 @@
 					height: var(--wp--custom--form--checkbox--checked--sizing--height);
 					font-size: var(--wp--custom--form--checkbox--checked--font-size);
 				}
+
+				&:focus + ::before {
+					outline: 1px dotted currentColor;
+					outline-offset: 2px;
+				}
 			}
 		}
 	}
@@ -132,7 +137,7 @@
 				font-size: var(--wp--custom--post-comment--typography--font-size);
 				line-height: var(--wp--custom--post-comment--typography--line-height);
 				margin-bottom: var(--wp--custom--gap--vertical);
-				margin-top: var(--wp--custom--gap--vertical);	
+				margin-top: var(--wp--custom--gap--vertical);
 			}
 		}
 	}

blockbase/sass/elements/_forms.scss

@@ -24,8 +24,19 @@ textarea {
 	padding: var(--wp--custom--form--padding);
 
 	&:focus {
-		color: var(--wp--custom--form--color--text);
 		border-color: var(--custom--form--color--border);
+		color: var(--wp--custom--form--color--text);
+		outline: 1px dotted currentColor;
+		outline-offset: 2px;
+	}
+}
+
+input[type="checkbox"],
+input[type="submit"],
+button {
+	&:focus {
+		outline: 1px dotted currentColor;
+		outline-offset: 2px;
 	}
 }
 

blockbase/sass/elements/_links.scss

@@ -20,3 +20,12 @@ a {
 		text-decoration: none;
 	}
 }
+
+// Select the focus states of all non-wpadmin and screen reader links
+a:not(.ab-item):not(.screen-reader-shortcut) {
+	&:active,
+	&:focus {
+		outline: 1px dotted currentColor;
+		text-decoration: none;
+	}
+}

quadrat/assets/theme.css

@@ -469,6 +469,7 @@ input[type="submit"]:focus,
 input[type="datetime"]:focus,
 input[type="datetime-local"]:focus,
 input[type="color"]:focus,
+input[type="checkbox"]:focus,
 textarea:focus {
 	outline: 1px dotted currentColor;
 }

quadrat/sass/elements/_forms.scss

@@ -14,8 +14,9 @@ input[type="submit"],
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="color"],
+input[type="checkbox"],
 textarea {
 	&:focus {
 		outline: 1px dotted currentColor;
 	}
-}
+}