Add theme focus states for links and forms. (#3899)

quadrat/assets/theme.css

@@ -376,6 +376,31 @@ ul ul {
 	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[type="text"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="tel"]:focus,
+input[type="range"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="week"]:focus,
+input[type="time"]:focus,
+input[type="submit"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="color"]:focus,
+textarea:focus {
+	outline: 1px dotted currentColor;
+}
+
 .site-header {
 	position: relative;
 }

quadrat/sass/elements/_forms.scss

@@ -0,0 +1,21 @@
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="submit"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+textarea {
+	&:focus {
+		outline: 1px dotted currentColor;
+	}
+}

quadrat/sass/elements/_links.scss

@@ -4,4 +4,14 @@
 	&:hover {
 		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/sass/theme.scss

@@ -17,6 +17,7 @@
 @import "blocks/table";
 @import "blocks/pullquote";
 @import "elements/links";
+@import "elements/forms";
 @import "header";
 @import "meta";
 @import "post-header";