Improve accessibility of default link focus styles in Firefox

tailwindlabs · Jul 26, 2021 · efa9260 · efa9260
1 parent f7e9831
commit efa9260
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 0 deletions.
diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css
@@ -140,6 +140,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+	outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }

diff --git a/tests/fixtures/tailwind-output-flagged.css b/tests/fixtures/tailwind-output-flagged.css
@@ -440,6 +440,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }

diff --git a/tests/fixtures/tailwind-output-important.css b/tests/fixtures/tailwind-output-important.css
@@ -440,6 +440,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }

diff --git a/tests/fixtures/tailwind-output-no-color-opacity.css b/tests/fixtures/tailwind-output-no-color-opacity.css
@@ -440,6 +440,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }

diff --git a/tests/fixtures/tailwind-output.css b/tests/fixtures/tailwind-output.css
@@ -440,6 +440,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }