Skip to content

Commit

Permalink
Improve accessibility of default link focus styles in Firefox
Browse files Browse the repository at this point in the history
  • Loading branch information
adamwathan committed Jul 31, 2021
1 parent 4f89bbf commit 694f5fc
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 0 deletions.
12 changes: 12 additions & 0 deletions src/plugins/css/preflight.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
12 changes: 12 additions & 0 deletions tests/fixtures/tailwind-output-flagged.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
12 changes: 12 additions & 0 deletions tests/fixtures/tailwind-output-important.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
12 changes: 12 additions & 0 deletions tests/fixtures/tailwind-output-no-color-opacity.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
12 changes: 12 additions & 0 deletions tests/fixtures/tailwind-output.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 694f5fc

Please sign in to comment.