fix: update collapse button aria-label and aria-expanded on toggle

src/debug_toolbar/core/assets.py

@@ -1980,13 +1980,23 @@ class DebugToolbar {
     addCollapseButton() {
         const collapseBtn = this.element.querySelector('.toolbar-collapse-btn');
         if (collapseBtn) {
+            this.updateCollapseButton(collapseBtn);
             collapseBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
                 this.toggle();
             });
         }
     }
 
+    updateCollapseButton(collapseBtn) {
+        const btn = collapseBtn || this.element.querySelector('.toolbar-collapse-btn');
+        if (!btn) return;
+        const label = this.isCollapsed ? 'Expand toolbar' : 'Collapse toolbar';
+        btn.title = label;
+        btn.setAttribute('aria-label', label);
+        btn.setAttribute('aria-expanded', String(!this.isCollapsed));
+    }
+
     addThemeToggle() {
         this.themeBtn = document.createElement('button');
         this.themeBtn.className = 'toolbar-theme-btn';
@@ -2133,6 +2143,7 @@ class DebugToolbar {
         this.isCollapsed = !this.isCollapsed;
         this.element.classList.toggle('collapsed', this.isCollapsed);
         localStorage.setItem('debug-toolbar-collapsed', String(this.isCollapsed));
+        this.updateCollapseButton();
         this.applySize();
     }
 

tests/integration/test_litestar_middleware.py

@@ -76,6 +76,13 @@ def test_does_not_inject_into_text_response(self, client: TestClient) -> None:
         assert b"debug-toolbar" not in response.content
 
 
+class TestCollapseButtonAccessibility:
+    def test_initial_markup_has_aria_expanded(self, client: TestClient) -> None:
+        response = client.get("/")
+        assert b'aria-label="Collapse toolbar"' in response.content
+        assert b'aria-expanded="true"' in response.content
+
+
 class TestServerTimingHeader:
     def test_adds_server_timing_header_to_html(self, client: TestClient) -> None:
         response = client.get("/")