Add aria variants (#9557)

* Add aria variants

* Add group and peer variants to test

* Add support for group and peer modifiers

Author: reinink

src/corePlugins.js

@@ -381,6 +381,26 @@ export let variantPlugins = {
     )
   },
 
+  ariaVariants: ({ matchVariant, theme }) => {
+    matchVariant('aria', (value) => `&[aria-${value}]`, { values: theme('aria') ?? {} })
+    matchVariant(
+      'group-aria',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier})[aria-${value}] &`
+          : `:merge(.group)[aria-${value}] &`,
+      { values: theme('aria') ?? {} }
+    )
+    matchVariant(
+      'peer-aria',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier})[aria-${value}] ~ &`
+          : `:merge(.peer)[aria-${value}] ~ &`,
+      { values: theme('aria') ?? {} }
+    )
+  },
+
   orientationVariants: ({ addVariant }) => {
     addVariant('portrait', '@media (orientation: portrait)')
     addVariant('landscape', '@media (orientation: landscape)')

src/lib/setupContextUtils.js

@@ -717,6 +717,7 @@ function resolvePlugins(context, root) {
   let beforeVariants = [
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
+    variantPlugins['ariaVariants'],
   ]
   let afterVariants = [
     variantPlugins['supportsVariants'],

stubs/defaultConfig.stub.js

@@ -112,6 +112,16 @@ module.exports = {
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
     },
+    aria: {
+      checked: 'checked="true"',
+      disabled: 'disabled="true"',
+      expanded: 'expanded="true"',
+      hidden: 'hidden="true"',
+      pressed: 'pressed="true"',
+      readonly: 'readonly="true"',
+      required: 'required="true"',
+      selected: 'selected="true"',
+    },
     aspectRatio: {
       auto: 'auto',
       square: '1 / 1',

tests/arbitrary-variants.test.js

@@ -616,6 +616,69 @@ test('classes in the same arbitrary variant should not be prefixed', () => {
   })
 })
 
+it('should support aria variants', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div>
+            <div class="aria-checked:underline"></div>
+            <div class="aria-[sort=ascending]:underline"></div>
+            <div class="group-aria-checked:underline"></div>
+            <div class="peer-aria-checked:underline"></div>
+            <div class="group-aria-checked/foo:underline"></div>
+            <div class="peer-aria-checked/foo:underline"></div>
+            <div class="group-aria-[sort=ascending]:underline"></div>
+            <div class="peer-aria-[sort=ascending]:underline"></div>
+            <div class="group-aria-[sort=ascending]/foo:underline"></div>
+            <div class="peer-aria-[sort=ascending]/foo:underline"></div>
+          </div>
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .aria-checked\:underline[aria-checked='true'] {
+        text-decoration-line: underline;
+      }
+      .aria-\[sort\=ascending\]\:underline[aria-sort='ascending'] {
+        text-decoration-line: underline;
+      }
+      .group[aria-checked='true'] .group-aria-checked\:underline {
+        text-decoration-line: underline;
+      }
+      .group\/foo[aria-checked='true'] .group-aria-checked\/foo\:underline {
+        text-decoration-line: underline;
+      }
+      .group[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\:underline {
+        text-decoration-line: underline;
+      }
+      .group\/foo[aria-sort='ascending'] .group-aria-\[sort\=ascending\]\/foo\:underline {
+        text-decoration-line: underline;
+      }
+      .peer[aria-checked='true'] ~ .peer-aria-checked\:underline {
+        text-decoration-line: underline;
+      }
+      .peer\/foo[aria-checked='true'] ~ .peer-aria-checked\/foo\:underline {
+        text-decoration-line: underline;
+      }
+      .peer[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\:underline {
+        text-decoration-line: underline;
+      }
+      .peer\/foo[aria-sort='ascending'] ~ .peer-aria-\[sort\=ascending\]\/foo\:underline {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
 it('should support supports', () => {
   let config = {
     theme: {