Remove aria-expanded on video toggle

clint/updates/20260727-remove-aria-expanded-on-video-toggle/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Remove aria-expanded on video toggle
+
+**Release date:** 2026-07-27
+
+## Summary
+
+Following an AnySurfer accessibility audit, the video toggle no longer sets `aria-expanded` on its
+trigger. The trigger is hidden or has its label swapped out once the video plays, so it does not
+behave as a disclosure control and the expanded/collapsed state was misreported to screen readers.
+`aria-controls` on the trigger is unchanged.
+
+## Changed
+
+- `videoToggle.component.ts`: removed the initial `aria-expanded="false"` on the trigger, and the
+  `aria-expanded` updates in `openVideo()` and `closeVideo()`.
+- `videoToggle.component.ts`: Prettier formatting (trailing comma on the iframe `allow`
+  `setAttribute` call). No behaviour change.
+
+## Docs
+
+You can find the [documentation on our docs](https://statikbe.github.io/craft/frontend/components/videoToggle.html).
+
+# Manual intervention
+
+> ⚠️ **ATTENTION**:
+>
+> - Run `yarn install && yarn build` in `frontend/` after applying this update so the change lands in
+>   the compiled bundle.
+> - If your project has custom CSS or JS that keys off `[aria-expanded]` on a video toggle trigger
+>   (for example to swap a play/pause icon), it will no longer match — switch it to a class or to the
+>   `videotoggle.open` / `videotoggle.close` custom events.
+> - If you copied `videoToggle.component.ts` into `js/components-site/`, apply the same removal there
+>   by hand — that folder is never synced.

clint/updates/20260727-remove-aria-expanded-on-video-toggle/update.json

@@ -0,0 +1,12 @@
+{
+  "id": "20260727-remove-aria-expanded-on-video-toggle",
+  "title": "Remove aria-expanded on video toggle",
+  "description": "Removes the aria-expanded attribute from the video toggle trigger, following an AnySurfer accessibility audit.",
+  "date": "2026-07-27",
+  "issues": [573],
+  "pr": 661,
+  "requires": [],
+  "frontend": {
+    "modify": ["js/components-core/videoToggle.component.ts"]
+  }
+}

clint/updates/index.json

@@ -1,6 +1,6 @@
 {
   "schema": 1,
-  "generatedAt": "2026-06-19T14:44:06.354Z",
+  "generatedAt": "2026-07-27T14:53:29.273Z",
   "updates": [
     {
       "id": "1.0.1",
@@ -89,6 +89,19 @@
       "requires": [],
       "legacyVersion": "1.0.9",
       "hasOps": false
+    },
+    {
+      "id": "20260727-remove-aria-expanded-on-video-toggle",
+      "seq": 9,
+      "title": "Remove aria-expanded on video toggle",
+      "date": "2026-07-27",
+      "issues": [
+        573
+      ],
+      "pr": 661,
+      "requires": [],
+      "legacyVersion": null,
+      "hasOps": true
     }
   ]
 }

frontend/js/components-core/videoToggle.component.ts

@@ -28,7 +28,7 @@
   }
 }
 
 class VideoToggle {
   private options = {
     url: '',
     container: null,
@@ -99,7 +99,7 @@
     this.videoIFrame.setAttribute('title', 'Video embed');
     this.videoIFrame.setAttribute(
       'allow',
-      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
     );
     this.videoIFrame.setAttribute('allowfullscreen', '');
     this.videoIFrame.setAttribute('width', '100%');
@@ -121,7 +121,6 @@
       this.options.container.appendChild(this.videoCloseButton);
     }
 
-    trigger.setAttribute('aria-expanded', 'false');
     trigger.setAttribute('aria-controls', 'videoToggleContent' + index);
 
     trigger.addEventListener('click', this.toggleVideo.bind(this));
@@ -153,7 +152,6 @@
 
   private openVideo(e: Event) {
     this.clearVideoContainer();
-    this.trigger.setAttribute('aria-expanded', 'true');
     this.videoContent.classList.remove(this.options.hideClass);
 
     let url = new URL(this.options.url);
@@ -184,7 +182,6 @@
   }
 
   private closeVideo(e: Event) {
-    this.trigger.setAttribute('aria-expanded', 'false');
     this.videoContent.classList.add(this.options.hideClass);
     this.videoIFrame.setAttribute('src', '');
     if (this.options.showCloseButton) {