From 694f5fc30538c6713c010c0fd3f1117b4ec333a6 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 26 Jul 2021 09:03:26 -0400
Subject: [PATCH] Improve accessibility of default link focus styles in Firefox

---
 src/plugins/css/preflight.css                       | 12 ++++++++++++
 tests/fixtures/tailwind-output-flagged.css          | 12 ++++++++++++
 tests/fixtures/tailwind-output-important.css        | 12 ++++++++++++
 tests/fixtures/tailwind-output-no-color-opacity.css | 12 ++++++++++++
 tests/fixtures/tailwind-output.css                  | 12 ++++++++++++
 5 files changed, 60 insertions(+)

diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css
index 96b94ef79293..372368c6532e 100644
--- 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
index e46db8d4a33d..c6bcc051eb59 100644
--- 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
index 3158b50e6776..c48c0cf0cb21 100644
--- 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
index 811aecc3d5ad..9076f92f7794 100644
--- 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
index e46db8d4a33d..c6bcc051eb59 100644
--- 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;
 }