diff --git a/clint/updates/20260727-remove-aria-expanded-on-video-toggle/CHANGELOG.md b/clint/updates/20260727-remove-aria-expanded-on-video-toggle/CHANGELOG.md new file mode 100644 index 00000000..2d8f5921 --- /dev/null +++ b/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. diff --git a/clint/updates/20260727-remove-aria-expanded-on-video-toggle/update.json b/clint/updates/20260727-remove-aria-expanded-on-video-toggle/update.json new file mode 100644 index 00000000..cdc98f0b --- /dev/null +++ b/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"] + } +} diff --git a/clint/updates/index.json b/clint/updates/index.json index 34e89034..e70e7e60 100644 --- a/clint/updates/index.json +++ b/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 } ] } diff --git a/frontend/js/components-core/videoToggle.component.ts b/frontend/js/components-core/videoToggle.component.ts index 103b5b8f..7a8bf2c8 100644 --- a/frontend/js/components-core/videoToggle.component.ts +++ b/frontend/js/components-core/videoToggle.component.ts @@ -99,7 +99,7 @@ class VideoToggle { 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 @@ class VideoToggle { 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 @@ class VideoToggle { 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 @@ class VideoToggle { } 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) {