Merge remote-tracking branch 'origin/fix/queue-toggle-state' into integration/small-fixes

frontend/index.css

@@ -207,6 +207,17 @@ body div.sidebar {
         color: var(--yj-accent, #ffd43b);
     }
 
+    /* An open queue is a state this button can be in, and it used to
+       look exactly like the closed one -- so the only way to tell what
+       pressing it would do was to look at the other side of the window
+       and infer it. `aria-expanded` is the same fact for anyone not
+       looking at all, and it points at the panel it controls. */
+    #queue-button[aria-expanded='true'] {
+        color: var(--yj-accent, #ffd43b);
+        background: var(--yj-bg-overlay, #404040);
+        border-radius: 4px;
+    }
+
     #queue-button.drag-over {
         color: var(--yj-accent, #ffd43b);
         outline: 2px dashed var(--yj-accent, #ffd43b);

frontend/index.html

@@ -37,7 +37,8 @@
     <footer class="bottom-bar">
         <now-playing></now-playing>
         <audio-player></audio-player>
-        <button aria-label="Toggle queue" id="queue-button">
+        <button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
+            id="queue-button">
             <wa-icon name="list"></wa-icon>
         </button>
     </footer>

frontend/index.ts

@@ -521,6 +521,28 @@ if (queueButton && queuePanel) {
         }
     });
 
+    // The button says whether the panel is open, and it learns that
+    // from the panel rather than from its own click handler.
+    //
+    // It is not the only thing that opens the queue -- `now-playing-view`
+    // sets the same attribute, because it hides the bar this button
+    // lives in -- so a state kept beside the click would be right until
+    // something else opened the panel and then quietly wrong. The panel's
+    // `open` attribute is the one fact; this reflects it.
+    const reflectQueueState = () => {
+        queueButton.setAttribute(
+            'aria-expanded',
+            String(queuePanel.hasAttribute('open')),
+        );
+    };
+
+    new MutationObserver(reflectQueueState).observe(queuePanel, {
+        attributes: true,
+        attributeFilter: ['open'],
+    });
+
+    reflectQueueState();
+
     // ---------------------------------------------------------------
     // Queue button as drop target (when queue panel is closed)
     // ---------------------------------------------------------------