Skip to content

Commit d86b34c

Browse files
fix(queue): optimistic shuffle toggle and aria-pressed for accessibility
toggleShuffle now sets this.shuffle before the backend call (like cycleLoop does for loop mode), reverting on failure. Add aria-pressed to the shuffle button so the E2E accessibility test detects state change. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 060ca76 commit d86b34c

2 files changed

Lines changed: 5 additions & 1 deletion

File tree

app/frontend/js/stores/queue.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,11 +512,14 @@ export function createQueueStore(Alpine) {
512512
*/
513513
async toggleShuffle() {
514514
this._updating = true;
515+
const prev = this.shuffle;
516+
this.shuffle = !prev;
515517
try {
516-
const snapshot = await queueApi.setShuffle(!this.shuffle);
518+
const snapshot = await queueApi.setShuffle(this.shuffle);
517519
this._applySnapshot(snapshot);
518520
} catch (error) {
519521
console.error('[queue] toggleShuffle failed:', error);
522+
this.shuffle = prev;
520523
} finally {
521524
setTimeout(() => {
522525
this._updating = false;

app/frontend/views/footer.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@
151151
<button
152152
class="p-1 transition-colors"
153153
:class="isShuffleActive ? 'text-primary' : 'text-[#8E8E93] hover:text-foreground'"
154+
:aria-pressed="isShuffleActive.toString()"
154155
@click="toggleShuffle()"
155156
title="Shuffle"
156157
data-testid="player-shuffle"

0 commit comments

Comments
 (0)