Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add aria-* variants #9557

Merged
merged 3 commits into from
Oct 14, 2022
Merged

Add aria-* variants #9557

merged 3 commits into from
Oct 14, 2022

Conversation

reinink
Copy link
Member

@reinink reinink commented Oct 14, 2022

This PR adds a new aria-{state} variant which makes it easier to style elements based on the states of ARIA attributes.

For example, you can update the background color of an element based on whether the aria-checked state is true:

<div aria-checked="true" class="bg-gray-600 aria-checked:bg-blue-600">
  <!-- ... -->
</div>

Included variants

By default Tailwind provides the variants for the most common boolean ARIA attributes:

Variant CSS
aria-checked: [aria-checked="true"]
aria-disabled: [aria-disabled="true"]
aria-expanded: [aria-expanded="true"]
aria-hidden: [aria-hidden="true"]
aria-pressed: [aria-pressed="true"]
aria-readonly: [aria-readonly="true"]
aria-required: [aria-required="true"]
aria-selected: [aria-selected="true"]

Using custom values

You can customize which ARIA variants are available by editing theme.aria or theme.extend.aria in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      aria: {
        'asc': 'sort="ascending"',
        'desc': 'sort="descending"',
      }
    }
  }
}

Then you can use any custom ARIA variants you've configured in your project:

<th
  aria-sort="ascending"
  class="
    aria-asc:bg-[url('/img/up-arrow.svg')]
    aria-desc:bg-[url('/img/down-arrow.svg')]
  "
>
  <!-- ... -->
</th>

Arbitrary values

For more complex ARIA attributes that take specific values (like aria-activedescendant), or for situations where it just doesn't feel worth it to add an alias to your theme, you can use the arbitrary value/square bracket notation to create custom ARIA variants on the fly:

<th
  aria-sort="ascending"
  class="
    aria-[sort=ascending]:bg-[url('/img/up-arrow.svg')]
    aria-[sort=descending]:bg-[url('/img/down-arrow.svg')]
  "
>
  <!-- ... -->
</th>

Group and peer variants

The ARIA variants are also available as group and peer modifiers.

<div>Message:</div>
<div role="textbox" contenteditable aria-required="true" class="peer"></div>
<div class="hidden peer-aria-required:block">*A message is required</div>

@seb-jean
Copy link
Contributor

I love this PR @reinink

@reinink reinink merged commit 2cae042 into master Oct 14, 2022
@reinink reinink deleted the aria-variant branch October 14, 2022 18:54
@adamwathan adamwathan changed the title Add aria variants Add aria-* variants Oct 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants