From 2cae04296aed60f5d9a04a65b49425ca2d9f6e0e Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Fri, 14 Oct 2022 14:54:10 -0400
Subject: [PATCH] Add aria variants (#9557)

* Add aria variants

* Add group and peer variants to test

* Add support for group and peer modifiers
---
 src/corePlugins.js               | 20 ++++++++++
 src/lib/setupContextUtils.js     |  1 +
 stubs/defaultConfig.stub.js      | 10 +++++
 tests/arbitrary-variants.test.js | 63 ++++++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 0881a63dfc3e..fe9573d38d70 100644
--- a/src/corePlugins.js
+++ b/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)')
diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
index 47e4f6eb360e..18650509085e 100644
--- a/src/lib/setupContextUtils.js
+++ b/src/lib/setupContextUtils.js
@@ -717,6 +717,7 @@ function resolvePlugins(context, root) {
   let beforeVariants = [
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
+    variantPlugins['ariaVariants'],
   ]
   let afterVariants = [
     variantPlugins['supportsVariants'],
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 49750a2ac7c8..0d0ec6a7b502 100644
--- a/stubs/defaultConfig.stub.js
+++ b/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',
diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js
index d259971fe57a..91b57f5b1eaa 100644
--- a/tests/arbitrary-variants.test.js
+++ b/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: {