Skip to content

Commit 4c97803

Browse files
seanpdoyleseanpdoyle
committed
Initial Commit
There are two styles of attributes supported by the variants: boolean attributes, and enumerated values. In some cases, attributes belong to both groups. Boolean attributes --- Variants for boolean attributes are active when the value is `"true"` and _only_ `"true"`. When the attribute is missing or the value is `"false"`, the typical application of utility classes will apply. Currently, the collection of variants includes support for the following boolean attributes: | Attribute | Variant |-------------------------------------------------------------------------------------|------------------------ | [aria-atomic="true"](https://www.w3.org/TR/wai-aria/#aria-atomic) | `aria-atomic:` | [aria-busy="true"](https://www.w3.org/TR/wai-aria/#aria-busy) | `aria-busy:` | [aria-checked="true"](https://www.w3.org/TR/wai-aria/#aria-checked) | `aria-checked:` | [aria-current="true"](https://www.w3.org/TR/wai-aria/#aria-current) | `aria-current:` | [aria-disabled="true"](https://www.w3.org/TR/wai-aria/#aria-disabled) | `aria-disabled:` | [aria-expanded="true"](https://www.w3.org/TR/wai-aria/#aria-expanded) | `aria-expanded:` | [aria-grabbed="true"](https://www.w3.org/TR/wai-aria/#aria-grabbed) | `aria-grabbed:` | [aria-haspopup="true"](https://www.w3.org/TR/wai-aria/#aria-haspopup) | `aria-haspopup:` | [aria-hidden="true"](https://www.w3.org/TR/wai-aria/#aria-hidden) | `aria-hidden:` | [aria-invalid="true"](https://www.w3.org/TR/wai-aria/#aria-invalid) | `aria-invalid:` | [aria-live="true"](https://www.w3.org/TR/wai-aria/#aria-live) | `aria-live:` | [aria-modal="true"](https://www.w3.org/TR/wai-aria/#aria-modal) | `aria-modal:` | [aria-multiline="true"](https://www.w3.org/TR/wai-aria/#aria-multiline) | `aria-multiline:` | [aria-multiselectable="true"](https://www.w3.org/TR/wai-aria/#aria-multiselectable) | `aria-multiselectable:` | [aria-pressed="true"](https://www.w3.org/TR/wai-aria/#aria-pressed) | `aria-pressed:` | [aria-readonly="true"](https://www.w3.org/TR/wai-aria/#aria-readonly) | `aria-readonly:` | [aria-required="true"](https://www.w3.org/TR/wai-aria/#aria-required) | `aria-required:` | [aria-selected="true"](https://www.w3.org/TR/wai-aria/#aria-selected) | `aria-selected:` To utilize a boolean variant, prefix the attribute name with `aria-` and omit the value: ```html <ul role="listbox"> <li role="option" class="aria-selected:border">Not selected</li> <li role="option" class="aria-selected:border" aria-selected="true">Selected</li> </ul> <button class="aria-disabled:cursor-not-allowed" aria-disabled="true">Submit</button> ``` Enumerated values --- Variants for enumerated values are active when the value is equivalent to the variant's suffix. When the attribute is missing or the value does not match the specified suffix, the typical application of utility classes will apply. Currently, the collection of variants includes support for the following attributes and value combinations: | Attribute | Variants | |------------------------------------------------------------------------|-------------------------------| | [aria-autocomplete](https://www.w3.org/TR/wai-aria/#aria-autocomplete) | `aria-autocomplete-both:` | | `aria-autocomplete-inline:` | | `aria-autocomplete-list:` | | `aria-autocomplete-none:` | [aria-current](https://www.w3.org/TR/wai-aria/#aria-current) | `aria-current-date` | | `aria-current-location` | | `aria-current-page` | | `aria-current-step` | | `aria-current-time` | [aria-dropeffect](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-dropeffect-copy` | | `aria-dropeffect-execute` | | `aria-dropeffect-link` | | `aria-dropeffect-move` | | `aria-dropeffect-none` | | `aria-dropeffect-popup` | [aria-haspopup](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-haspopup-dialog` | | `aria-haspopup-grid` | | `aria-haspopup-listbox` | | `aria-haspopup-menu` | | `aria-haspopup-tree` | [aria-orientation](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-orientation-horizontal` | | `aria-orientation-undefined` | | `aria-orientation-vertical`, | [aria-sort](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-sort-ascending` | | `aria-sort-descending` | | `aria-sort-none` | | `aria-sort-other`, | [aria-relevant](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-relevant-additions` | | `aria-relevant-all` | | `aria-relevant-removals` | | `aria-relevant-text` To utilize an enumerated value variant, prefix the attribute name with `aria-` and include the value: ```html <nav> <a class="aria-current-page:font-bold" href="/" aria-current="page">Root</a> <a class="aria-current-page:font-bold" href="/about">About us</a> </nav> ```
0 parents  commit 4c97803

File tree

4 files changed

+220
-0
lines changed

4 files changed

+220
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
yarn.lock
3+
package-lock.json

‎README.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# @thoughtbot/tailwindcss-aria-attributes
2+
3+
A plugin that provides variants for various [`aria-*`
4+
attributes](https://www.w3.org/TR/wai-aria/#state_prop_def) and their supported
5+
values.
6+
7+
## Installation
8+
9+
Install the plugin from npm:
10+
11+
```sh
12+
# Using npm
13+
npm install @thoughtbot/tailwindcss-aria-attributes
14+
15+
# Using Yarn
16+
yarn add @thoughtbot/tailwindcss-aria-attributes
17+
```
18+
19+
Then add the plugin to your `tailwind.config.js` file:
20+
21+
```js
22+
// tailwind.config.js
23+
module.exports = {
24+
theme: {
25+
// ...
26+
},
27+
plugins: [
28+
require("@thoughtbot/tailwindcss-aria-attributes"),
29+
// ...
30+
],
31+
}
32+
```
33+
34+
## Usage
35+
36+
There are two styles of attributes supported by the variants: boolean
37+
attributes, and enumerated values.
38+
39+
In some cases, attributes belong to both groups.
40+
41+
### Boolean attributes
42+
43+
Variants for boolean attributes are active when the value is `"true"` and _only_
44+
`"true"`. When the attribute is missing or the value is `"false"`, the typical
45+
application of utility classes will apply.
46+
47+
Currently, the collection of variants includes support for the following boolean
48+
attributes:
49+
50+
| Attribute | Variant
51+
|-------------------------------------------------------------------------------------|------------------------
52+
| [aria-atomic="true"](https://www.w3.org/TR/wai-aria/#aria-atomic) | `aria-atomic:`
53+
| [aria-busy="true"](https://www.w3.org/TR/wai-aria/#aria-busy) | `aria-busy:`
54+
| [aria-checked="true"](https://www.w3.org/TR/wai-aria/#aria-checked) | `aria-checked:`
55+
| [aria-current="true"](https://www.w3.org/TR/wai-aria/#aria-current) | `aria-current:`
56+
| [aria-disabled="true"](https://www.w3.org/TR/wai-aria/#aria-disabled) | `aria-disabled:`
57+
| [aria-expanded="true"](https://www.w3.org/TR/wai-aria/#aria-expanded) | `aria-expanded:`
58+
| [aria-grabbed="true"](https://www.w3.org/TR/wai-aria/#aria-grabbed) | `aria-grabbed:`
59+
| [aria-haspopup="true"](https://www.w3.org/TR/wai-aria/#aria-haspopup) | `aria-haspopup:`
60+
| [aria-hidden="true"](https://www.w3.org/TR/wai-aria/#aria-hidden) | `aria-hidden:`
61+
| [aria-invalid="true"](https://www.w3.org/TR/wai-aria/#aria-invalid) | `aria-invalid:`
62+
| [aria-live="true"](https://www.w3.org/TR/wai-aria/#aria-live) | `aria-live:`
63+
| [aria-modal="true"](https://www.w3.org/TR/wai-aria/#aria-modal) | `aria-modal:`
64+
| [aria-multiline="true"](https://www.w3.org/TR/wai-aria/#aria-multiline) | `aria-multiline:`
65+
| [aria-multiselectable="true"](https://www.w3.org/TR/wai-aria/#aria-multiselectable) | `aria-multiselectable:`
66+
| [aria-pressed="true"](https://www.w3.org/TR/wai-aria/#aria-pressed) | `aria-pressed:`
67+
| [aria-readonly="true"](https://www.w3.org/TR/wai-aria/#aria-readonly) | `aria-readonly:`
68+
| [aria-required="true"](https://www.w3.org/TR/wai-aria/#aria-required) | `aria-required:`
69+
| [aria-selected="true"](https://www.w3.org/TR/wai-aria/#aria-selected) | `aria-selected:`
70+
71+
To utilize a boolean variant, prefix the attribute name with `aria-` and omit
72+
the value:
73+
74+
```html
75+
<ul role="listbox">
76+
<li role="option" class="aria-selected:border">Not selected</li>
77+
<li role="option" class="aria-selected:border" aria-selected="true">Selected</li>
78+
</ul>
79+
80+
<button class="aria-disabled:cursor-not-allowed" aria-disabled="true">Submit</button>
81+
```
82+
83+
### Enumerated values
84+
85+
Variants for enumerated values are active when the value is equivalent to the
86+
variant's suffix.
87+
88+
When the attribute is missing or the value does not match the specified suffix,
89+
the typical application of utility classes will apply.
90+
91+
Currently, the collection of variants includes support for the following
92+
attributes and value combinations:
93+
94+
| Attribute | Variants |
95+
|------------------------------------------------------------------------|-------------------------------|
96+
| [aria-autocomplete](https://www.w3.org/TR/wai-aria/#aria-autocomplete) | `aria-autocomplete-both:`
97+
| | `aria-autocomplete-inline:`
98+
| | `aria-autocomplete-list:`
99+
| | `aria-autocomplete-none:`
100+
| [aria-current](https://www.w3.org/TR/wai-aria/#aria-current) | `aria-current-date`
101+
| | `aria-current-location`
102+
| | `aria-current-page`
103+
| | `aria-current-step`
104+
| | `aria-current-time`
105+
| [aria-dropeffect](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-dropeffect-copy`
106+
| | `aria-dropeffect-execute`
107+
| | `aria-dropeffect-link`
108+
| | `aria-dropeffect-move`
109+
| | `aria-dropeffect-none`
110+
| | `aria-dropeffect-popup`
111+
| [aria-haspopup](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-haspopup-dialog`
112+
| | `aria-haspopup-grid`
113+
| | `aria-haspopup-listbox`
114+
| | `aria-haspopup-menu`
115+
| | `aria-haspopup-tree`
116+
| [aria-orientation](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-orientation-horizontal`
117+
| | `aria-orientation-undefined`
118+
| | `aria-orientation-vertical`,
119+
| [aria-sort](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-sort-ascending`
120+
| | `aria-sort-descending`
121+
| | `aria-sort-none`
122+
| | `aria-sort-other`,
123+
| [aria-relevant](https://www.w3.org/TR/wai-aria/#aria-dropeffect) | `aria-relevant-additions`
124+
| | `aria-relevant-all`
125+
| | `aria-relevant-removals`
126+
| | `aria-relevant-text`
127+
128+
To utilize an enumerated value variant, prefix the attribute name with `aria-`
129+
and include the value:
130+
131+
```html
132+
<nav>
133+
<a class="aria-current-page:font-bold" href="/" aria-current="page">Root</a>
134+
<a class="aria-current-page:font-bold" href="/about">About us</a>
135+
</nav>
136+
```

‎index.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const plugin = require("tailwindcss/plugin")
2+
3+
module.exports = plugin(({ addVariant, e }) => {
4+
[
5+
"atomic",
6+
"busy",
7+
"checked",
8+
"current",
9+
"disabled",
10+
"expanded",
11+
"grabbed",
12+
"haspopup",
13+
"hidden",
14+
"invalid",
15+
"live",
16+
"modal",
17+
"multiline",
18+
"multiselectable",
19+
"pressed",
20+
"readonly",
21+
"required",
22+
"selected",
23+
].forEach(boolean => {
24+
const selector = [ "aria", boolean ].join("-")
25+
26+
addVariant(selector, ({ modifySelectors, separator }) =>
27+
modifySelectors(({ className }) => `[${selector}="true"].${e(`${selector}${separator}${className}`)}`)
28+
)
29+
})
30+
31+
const enumerables = {
32+
autocomplete: [ "both", "inline", "list", "none" ],
33+
current: [ "date", "location", "page", "step", "time" ],
34+
dropeffect: [ "copy", "execute", "link", "move", "none", "popup" ],
35+
haspopup: [ "dialog", "grid", "listbox", "menu", "tree" ],
36+
orientation: [ "horizontal", "undefined", "vertial" ],
37+
relevant: [ "additions", "all", "removals", "text" ],
38+
sort: [ "ascending", "descending", "none", "other" ],
39+
}
40+
41+
for (const [ attribute, values ] of Object.entries(enumerables)) {
42+
for (const value of values) {
43+
const selector = `aria-${attribute}-${value}`
44+
addVariant(selector, ({ modifySelectors, separator }) =>
45+
modifySelectors(({ className }) => `[aria-${attribute}="${value}"].${e(`${selector}${separator}${className}`)}`)
46+
)
47+
48+
const groupSelector = `group-aria-${attribute}-${value}`
49+
addVariant(groupSelector, ({ modifySelectors, separator }) =>
50+
modifySelectors(({ className }) => `.group[aria-${attribute}="${value}"] .${e(`${groupSelector}${separator}${className}`)}`)
51+
)
52+
53+
const peerSelector = `peer-aria-${attribute}-${value}`
54+
addVariant(peerSelector, ({ modifySelectors, separator }) =>
55+
modifySelectors(({ className }) => `.peer[aria-${attribute}="${value}"] ~ .${e(`${peerSelector}${separator}${className}`)}`)
56+
)
57+
}
58+
}
59+
})

‎package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@thoughtbot/tailwindcss-aria-attributes",
3+
"version": "1.0.0",
4+
"description": "TailwindCSS aria- attribute utilities plugin",
5+
"main": "index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/thoughtbot/tailwindcss-aria-attributes.git"
9+
},
10+
"keywords": [
11+
"tailwindcss"
12+
],
13+
"author": "Sean Doyle <[email protected]>",
14+
"license": "MIT",
15+
"bugs": {
16+
"url": "https://github.com/thoughtbot/tailwindcss-aria-attributes/issues"
17+
},
18+
"homepage": "https://github.com/thoughtbot/tailwindcss-aria-attributes#readme",
19+
"devDependencies": {
20+
"tailwindcss": "^2.2.17"
21+
}
22+
}

0 commit comments

Comments
 (0)