Remove hidden from booleanAttributes (#4099)

* Remove hidden from booleanAttributes * Add test for hidden attribute * Add to test for specific boolean attributes which are not removed when falsy
alpinejs · Mar 21, 2024 · 137f8bb · 137f8bb
1 parent ebffaa7
commit 137f8bb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/alpinejs/src/utils/bind.js b/packages/alpinejs/src/utils/bind.js
@@ -150,7 +150,7 @@ function isBooleanAttr(attrName) {
     // As per HTML spec table https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute
     // Array roughly ordered by estimated usage
     const booleanAttributes = [
-        'disabled','checked','required','readonly','hidden','open', 'selected',
+        'disabled','checked','required','readonly','open', 'selected',
         'autofocus', 'itemscope', 'multiple', 'novalidate','allowfullscreen',
         'allowpaymentrequest', 'formnovalidate', 'autoplay', 'controls', 'loop',
         'muted', 'playsinline', 'default', 'ismap', 'reversed', 'async', 'defer',

diff --git a/tests/cypress/integration/directives/x-bind.spec.js b/tests/cypress/integration/directives/x-bind.spec.js
@@ -27,13 +27,30 @@ test('style attribute bindings are added by string syntax',
     ({ get }) => get('span').should(haveClasses(['foo']))
 )
 
-test('aria-pressed/checked attribute boolean values are cast to a true/false string',
+test('aria-pressed/checked/expanded/selected attribute boolean values are cast to a true/false string',
     html`
         <div x-data="{ open: true }">
             <span x-bind:aria-pressed="open"></span>
+            <span x-bind:aria-checked="open"></span>
+            <span x-bind:aria-expanded="open"></span>
+            <span x-bind:aria-selected="open"></span>
+
+            <span x-bind:aria-pressed="false"></span>
+            <span x-bind:aria-checked="false"></span>
+            <span x-bind:aria-expanded="false"></span>
+            <span x-bind:aria-selected="false"></span>
         </div>
     `,
-    ({ get }) => get('span').should(haveAttribute('aria-pressed', 'true'))
+    ({ get }) => {
+        get('span:nth-of-type(1)').should(haveAttribute('aria-pressed', 'true'))
+        get('span:nth-of-type(2)').should(haveAttribute('aria-checked', 'true'))
+        get('span:nth-of-type(3)').should(haveAttribute('aria-expanded', 'true'))
+        get('span:nth-of-type(4)').should(haveAttribute('aria-selected', 'true'))
+        get('span:nth-of-type(5)').should(haveAttribute('aria-pressed', 'false'))
+        get('span:nth-of-type(6)').should(haveAttribute('aria-checked', 'false'))
+        get('span:nth-of-type(7)').should(haveAttribute('aria-expanded', 'false'))
+        get('span:nth-of-type(8)').should(haveAttribute('aria-selected', 'false'))
+    }
 )
 
 test('non-boolean attributes set to null/undefined/false are removed from the element',
@@ -46,6 +63,10 @@ test('non-boolean attributes set to null/undefined/false are removed from the el
             <span visible="true" x-bind:visible="null">null</span>
             <span visible="true" x-bind:visible="false">false</span>
             <span visible="true" x-bind:visible="undefined">undefined</span>
+
+            <span hidden="true" x-bind:hidden="null">null</span>
+            <span hidden="true" x-bind:hidden="false">false</span>
+            <span hidden="true" x-bind:hidden="undefined">undefined</span>
         </div>
     `,
     ({ get }) => {
@@ -55,6 +76,9 @@ test('non-boolean attributes set to null/undefined/false are removed from the el
         get('span:nth-of-type(1)').should(notHaveAttribute('visible'))
         get('span:nth-of-type(2)').should(notHaveAttribute('visible'))
         get('span:nth-of-type(3)').should(notHaveAttribute('visible'))
+        get('span:nth-of-type(4)').should(notHaveAttribute('hidden'))
+        get('span:nth-of-type(5)').should(notHaveAttribute('hidden'))
+        get('span:nth-of-type(6)').should(notHaveAttribute('hidden'))
     }
 )