diff --git a/src/debug_toolbar/core/assets.py b/src/debug_toolbar/core/assets.py index 4ee7c41..9956da6 100644 --- a/src/debug_toolbar/core/assets.py +++ b/src/debug_toolbar/core/assets.py @@ -1980,6 +1980,7 @@ class DebugToolbar { addCollapseButton() { const collapseBtn = this.element.querySelector('.toolbar-collapse-btn'); if (collapseBtn) { + this.updateCollapseButton(collapseBtn); collapseBtn.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(); @@ -1987,6 +1988,15 @@ class DebugToolbar { } } + 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(); } diff --git a/tests/integration/test_litestar_middleware.py b/tests/integration/test_litestar_middleware.py index 7583c91..4a3b9b7 100644 --- a/tests/integration/test_litestar_middleware.py +++ b/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("/")