From 50287408e2e349c3e2be5c81c4cbfa2bec10cdf6 Mon Sep 17 00:00:00 2001 From: Jacob Coffee Date: Sat, 10 Oct 2026 19:28:38 -0500 Subject: [PATCH 1/2] fix: update collapse button aria-label and aria-expanded on toggle The toolbar collapse button's aria-label and aria-expanded attributes never changed when the toolbar was collapsed or expanded, including when a collapsed state was restored from localStorage on page load. The button always announced "Collapse toolbar" with aria-expanded "true" regardless of actual state. Add updateCollapseButton() to sync the label, title, and aria-expanded attribute with the current collapsed state, called on init and on every toggle. --- src/debug_toolbar/core/assets.py | 11 +++++++++++ tests/integration/test_litestar_middleware.py | 14 ++++++++++++++ 2 files changed, 25 insertions(+) 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..cd52556 100644 --- a/tests/integration/test_litestar_middleware.py +++ b/tests/integration/test_litestar_middleware.py @@ -76,6 +76,20 @@ 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 + + def test_toolbar_js_updates_collapse_button_label(self, client: TestClient) -> None: + response = client.get("/_debug_toolbar/static/toolbar.js") + js = response.text + assert "updateCollapseButton" in js + assert "'Expand toolbar'" in js + assert "setAttribute('aria-expanded'" in js + + class TestServerTimingHeader: def test_adds_server_timing_header_to_html(self, client: TestClient) -> None: response = client.get("/") From 19cc1c08b8f5807c4547bba441e1920f1f32922a Mon Sep 17 00:00:00 2001 From: Jacob Coffee Date: Sat, 10 Oct 2026 19:33:49 -0500 Subject: [PATCH 2/2] test: drop source-text check for collapse label --- tests/integration/test_litestar_middleware.py | 7 ------- 1 file changed, 7 deletions(-) diff --git a/tests/integration/test_litestar_middleware.py b/tests/integration/test_litestar_middleware.py index cd52556..4a3b9b7 100644 --- a/tests/integration/test_litestar_middleware.py +++ b/tests/integration/test_litestar_middleware.py @@ -82,13 +82,6 @@ def test_initial_markup_has_aria_expanded(self, client: TestClient) -> None: assert b'aria-label="Collapse toolbar"' in response.content assert b'aria-expanded="true"' in response.content - def test_toolbar_js_updates_collapse_button_label(self, client: TestClient) -> None: - response = client.get("/_debug_toolbar/static/toolbar.js") - js = response.text - assert "updateCollapseButton" in js - assert "'Expand toolbar'" in js - assert "setAttribute('aria-expanded'" in js - class TestServerTimingHeader: def test_adds_server_timing_header_to_html(self, client: TestClient) -> None: