archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Improve accessibility story for custom focus styles (#2460)

Browse Source 
* Improve accessibility story for custom focus styles

* Update fixtures

* Make outline configurable, add white/black dotted outlines

* Update changelog
This commit is contained in:
Adam Wathan 2020-10-08 15:48:07 -04:00 committed by GitHub
parent b299b6fbe1
commit f3a1d5f93c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 647 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add `col-span-full` and `row-span-full` ([#2471](https://github.com/tailwindlabs/tailwindcss/pull/2471))
- Promote `defaultLineHeights` and `standardFontWeights` from experimental to future
- Add new `presets` config option ([#2474](https://github.com/tailwindlabs/tailwindcss/pull/2474))
- Make `outline` configurable, `outline-none` more accessible by default, and add `outline-black` and `outline-white` ([#2460](https://github.com/tailwindlabs/tailwindcss/pull/2460))
## [1.8.12] - 2020-10-07

156
__tests__/fixtures/tailwind-output-flagged.css
View File

@ -25665,11 +25665,33 @@ video {
}
.outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.overflow-auto {
@ -69260,11 +69282,33 @@ video {
}
.sm\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:overflow-auto {
@ -112825,11 +112869,33 @@ video {
}
.md\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:overflow-auto {
@ -156390,11 +156456,33 @@ video {
}
.lg\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:overflow-auto {
@ -199955,11 +200043,33 @@ video {
}
.xl\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:overflow-auto {
@ -243520,11 +243630,33 @@ video {
}
.\32xl\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.\32xl\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.\32xl\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.\32xl\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.\32xl\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.\32xl\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.\32xl\:overflow-auto {

130
__tests__/fixtures/tailwind-output-ie11.css
View File

@ -6066,11 +6066,33 @@ video {
}
.outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.overflow-auto {
@ -16536,11 +16558,33 @@ video {
}
.sm\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:overflow-auto {
@ -26976,11 +27020,33 @@ video {
}
.md\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:overflow-auto {
@ -37416,11 +37482,33 @@ video {
}
.lg\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:overflow-auto {
@ -47856,11 +47944,33 @@ video {
}
.xl\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:overflow-auto {

130
__tests__/fixtures/tailwind-output-important.css
View File

@ -11842,11 +11842,33 @@ video {
}
.outline-none {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.outline-white {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.outline-black {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.focus\:outline-none:focus {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.focus\:outline-white:focus {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.focus\:outline-black:focus {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.overflow-auto {
@ -30073,11 +30095,33 @@ video {
}
.sm\:outline-none {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.sm\:outline-white {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.sm\:outline-black {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.sm\:focus\:outline-none:focus {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.sm\:focus\:outline-white:focus {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.sm\:focus\:outline-black:focus {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.sm\:overflow-auto {
@ -48274,11 +48318,33 @@ video {
}
.md\:outline-none {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.md\:outline-white {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.md\:outline-black {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.md\:focus\:outline-none:focus {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.md\:focus\:outline-white:focus {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.md\:focus\:outline-black:focus {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.md\:overflow-auto {
@ -66475,11 +66541,33 @@ video {
}
.lg\:outline-none {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.lg\:outline-white {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.lg\:outline-black {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.lg\:focus\:outline-none:focus {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.lg\:focus\:outline-white:focus {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.lg\:focus\:outline-black:focus {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.lg\:overflow-auto {
@ -84676,11 +84764,33 @@ video {
}
.xl\:outline-none {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.xl\:outline-white {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.xl\:outline-black {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.xl\:focus\:outline-none:focus {
outline: 0 !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.xl\:focus\:outline-white:focus {
outline: 2px dotted white !important;
outline-offset: 2px !important;
}
.xl\:focus\:outline-black:focus {
outline: 2px dotted black !important;
outline-offset: 2px !important;
}
.xl\:overflow-auto {

130
__tests__/fixtures/tailwind-output-no-color-opacity.css
View File

@ -10414,11 +10414,33 @@ video {
}
.outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.overflow-auto {
@ -26197,11 +26219,33 @@ video {
}
.sm\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:overflow-auto {
@ -41950,11 +41994,33 @@ video {
}
.md\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:overflow-auto {
@ -57703,11 +57769,33 @@ video {
}
.lg\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:overflow-auto {
@ -73456,11 +73544,33 @@ video {
}
.xl\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:overflow-auto {

130
__tests__/fixtures/tailwind-output.css
View File

@ -11842,11 +11842,33 @@ video {
}
.outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.overflow-auto {
@ -30073,11 +30095,33 @@ video {
}
.sm\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.sm\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.sm\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.sm\:overflow-auto {
@ -48274,11 +48318,33 @@ video {
}
.md\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.md\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.md\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.md\:overflow-auto {
@ -66475,11 +66541,33 @@ video {
}
.lg\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.lg\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.lg\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.lg\:overflow-auto {
@ -84676,11 +84764,33 @@ video {
}
.xl\:outline-none {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:outline-white {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:outline-black {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:focus\:outline-none:focus {
outline: 0;
outline: 2px solid transparent;
outline-offset: 2px;
}
.xl\:focus\:outline-white:focus {
outline: 2px dotted white;
outline-offset: 2px;
}
.xl\:focus\:outline-black:focus {
outline: 2px dotted black;
outline-offset: 2px;
}
.xl\:overflow-auto {

23
src/plugins/outline.js
View File

@ -1,10 +1,21 @@
import _ from 'lodash'
export default function() {
return function({ addUtilities, variants }) {
addUtilities(
{
'.outline-none': { outline: '0' },
},
variants('outline')
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('outline'), (value, modifier) => {
const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
return [
`.${e(`outline-${modifier}`)}`,
{
outline,
outlineOffset,
},
]
})
)
addUtilities(utilities, variants('outline'))
}
}

5
stubs/defaultConfig.stub.js
View File

@ -392,6 +392,11 @@ module.exports = {
'11': '11',
'12': '12',
},
outline: {
none: ['2px solid transparent', '2px'],
white: ['2px dotted white', '2px'],
black: ['2px dotted black', '2px'],
},
padding: theme => theme('spacing'),
placeholderColor: theme => theme('colors'),
placeholderOpacity: theme => theme('opacity'),