Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mellambias/tailwind-aria
Plugin for Tailwindcss and ARIA atributes
https://github.com/mellambias/tailwind-aria
aria css js plugin tailwindcss utilities
Last synced: 18 days ago
JSON representation
Plugin for Tailwindcss and ARIA atributes
- Host: GitHub
- URL: https://github.com/mellambias/tailwind-aria
- Owner: mellambias
- Created: 2022-04-12T15:16:52.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-04-13T17:25:51.000Z (over 2 years ago)
- Last Synced: 2024-11-03T23:02:54.548Z (2 months ago)
- Topics: aria, css, js, plugin, tailwindcss, utilities
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Tailwind CSS ARIA
This plugin adds Pseudo-elements `aria` with Tailwind CSS.
#### New on this version
Upgrade to **group** and **peer** variants.
#### What is ARIA?
**A**ccessible **R**ich **I**nternet **A**pplications (ARIA) is a set of [roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) and [attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible JavaScript widgets, form hints and error messages, live content updates, and more
#### What is this plugin?
This plugin adds to your Tailwindcss [variants](https://v2.tailwindcss.com/docs/hover-focus-and-other-states) the **aria-attibutes**
in CSS pseudo-elements like
```css
//style.css
a[aria-current="page"] {
background-color: #333;
color: #fff;
}
```
You can write
## Installation
Add this plugin to your project:
#### Install using npm
```bash
npm install --save-dev tailwind-aria
```
Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwind-aria"),
// ...
],
};
```
## Usage
There are two big groups of attributes supported:
- Boolean attributes
- Enumerated values.
#### Boolean attributes
Variants for boolean attributes are active when the value is "true"
```html
This are display:hidden
```
When the attribute value is "false"
```html
This are display:block
```
#### Enumerated values
Atrributes for enumerated values are active when the value is equivalent to the variant's suffix.
```html
This text is in 7xl
```
## ARIA attribute types
There are 4 categories of ARIA states and properties. This plugin
provides attributes for:
#### Widget attributes
| Attribute | Values |
| --------------- | --------------------------------------- |
| autocomplete | inline, list, both |
| checked | true, false, mixed |
| disabled | true, false |
| errormessage | true |
| expanded | true, false |
| haspopup | menu, listbox, tree, grid, dialog, true |
| hidden | true, false |
| invalid | true, false, grammar, spelling |
| level | 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 |
| multiline | true, false |
| multiselectable | true, false |
| orientation | horizontal, vertical |
| pressed | true, false, mixed |
| readonly | true, false |
| required | true, false |
| selected | true, false |
| sort | none, ascending, descending, other |
#### Live region attributes
| Attribute | Values |
| --------- | ---------------------------------------------- |
| busy | true, false |
| live | off, assertive, polite |
| relevant | additions-text, additions, all, removals, text |
| atomic | true, false, |
#### Drag-and-Drop attributes
| Attribute | Values |
| ---------- | -------------------------------------- |
| dropeffect | none, copy, execute, link, move, popup |
| grabbed | true, false |
#### Global ARIA attributes
| Attribute | Values |
| --------- | --------------------------------------------- |
| current | true, false, page, step, location, date, time |
##### Boolean attributes
The class **.aria-{attribute}** are pseudo-class **[aria-{attibute}="true"]**
The class **.aria-!{attribute}** are pseudo-class **[aria-{attibute}="false"]**
```html
[aria-busy="true"]
[aria-busy="false"]
```
##### Enumerate attibutes
The class **.aria-{attribute}-{value}** are pseudo-class **[aria-{attibute}="{value}"]**
```html
[aria-current="page"]
[aria-current="location"]
```
### Styling based on parent
When you need to style an element based on the state of some parent element, mark the parent with the **`group-aria`** class, and use **group-aria-{atribute}** or **group-aria-{atribute}-{value}** modifiers like **group-aria-current-page** to style the target element:
```html
-
titulo 2
texto 5xl
```
### Styling based on sibling state
When you need to style an element based on the state of a sibling element, mark the sibling with the **`peer-aria`** class, and use **peer-aria-{atribute}** or **peer-aria-{atribute}-{value}** modifiers like **peer-aria-current-page** to style the target element:
```html
-
titulo 2
texto 5xl
```
### Customizing your variants
By default, this plugin provides before variants. You change, add, or remove these by editing the **theme.aria** section of your `Tailwind config`.
```js
// tailwind.config.js
{
theme: {
aria: {
level: [1, 2, 3, 4, 5, 6],
},
plugins: [
require('tailwind-aria'),
],
}
```
### More information
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes