Handling aria-expanded state

stimulus-components · Jun 1, 2023 · 96f4e76 · 96f4e76
1 parent 123f81e
commit 96f4e76
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -75,7 +75,9 @@
           <div class="text-center">
             <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
               <span class="block xl:inline">Stimulus</span>
-              <span class="block bg-gradient-to-r from-yellow-500 to-orange-500 xl:inline bg-clip-text text-transparent">Reveal Controller</span>
+              <span class="block bg-gradient-to-r from-yellow-500 to-orange-500 xl:inline bg-clip-text text-transparent"
+                >Reveal Controller</span
+              >
             </h1>
 
             <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
@@ -136,45 +138,45 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
       <section class="mt-16">
         <div data-controller="reveal">
           <button
-            id="toggle-button"
             data-action="click->reveal#toggle"
+            aria-expanded="false"
             type="button"
             class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
           >
             Toggle me!
           </button>
 
-          <p id="toggle-target" data-reveal-target="item" class="hidden mt-4">
+          <p data-reveal-target="item" class="hidden mt-4">
             Hey 👋
           </p>
         </div>
 
         <div data-controller="reveal" class="mt-4">
           <button
-            id="toggle-button"
             data-action="click->reveal#hide"
+            aria-expanded="true"
             type="button"
             class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
           >
             Hide me!
           </button>
 
-          <p id="toggle-target" data-reveal-target="item" class="mt-4">
+          <p data-reveal-target="item" class="mt-4">
             Hey 🙈
           </p>
         </div>
 
         <div data-controller="reveal" class="mt-4">
           <button
-            id="toggle-button"
             data-action="click->reveal#show"
+            aria-expanded="false"
             type="button"
             class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border rounded shadow"
           >
             Show me!
           </button>
 
-          <p id="toggle-target" data-reveal-target="item" class="hidden mt-4">
+          <p data-reveal-target="item" class="hidden mt-4">
             Hi 🐵
           </p>
         </div>

diff --git a/src/index.ts b/src/index.ts
@@ -13,19 +13,25 @@ export default class extends Controller {
     this.class = this.hasHiddenClass ? this.hiddenClass : 'hidden'
   }
 
-  toggle (): void {
+  toggle (e): void {
+    e.currentTarget.setAttribute('aria-expanded', String(e.currentTarget.getAttribute('aria-expanded') !== 'true'))
+
     this.itemTargets.forEach(item => {
       item.classList.toggle(this.class)
     })
   }
 
-  show (): void {
+  show (e): void {
+    e.currentTarget.setAttribute('aria-expanded', 'true')
+
     this.itemTargets.forEach(item => {
       item.classList.remove(this.class)
     })
   }
 
-  hide (): void {
+  hide (e): void {
+    e.currentTarget.setAttribute('aria-expanded', 'false')
+
     this.itemTargets.forEach(item => {
       item.classList.add(this.class)
     })