From fc536821298a509c740dbfa95748664ffb56131d Mon Sep 17 00:00:00 2001 From: Sameh Khamis Date: Sun, 1 Nov 2026 08:39:49 -0800 Subject: [PATCH] feat(controls): render the action and toggle buttons with UiButton The Authoring panel's and shot list's buttons, the CCTV panel's buttons and Street Level's nearest button are the kit's UiButton, keeping their classes: danger buttons take the alert tone and primary ones the primary variant. The CCTV on/off, coverage, auto-hop, projection and adjust toggles, which showed their state only by colour, now carry aria-pressed too. --- CHANGELOG.md | 6 ++++++ src/ui/cctvPanel.test.mjs | 7 +++++++ src/ui/views/LayerPanelsView.vue | 25 ++++++++++++------------ src/ui/views/SceneShotList.vue | 12 ++++++------ src/ui/views/panels/CctvPanel.vue | 23 +++++++++++----------- src/ui/views/panels/StreetLevelPanel.vue | 3 ++- 6 files changed, 46 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3db16bbf5..344d4f4ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,12 @@ the bottom tab bar. The rail is the first view built with Vue and Pinia, which now ship with the app; see docs/VUE-MIGRATION.md (samehkhamis). +- The Authoring, shot list and CCTV buttons and Street Level's nearest button + are the kit's `UiButton` (danger buttons in the `alert` tone, primary ones the `primary` + variant), keeping their classes; the CCTV on/off, coverage, auto-hop, + projection and adjust toggles now say their state with `aria-pressed` + (samehkhamis). + - The Data, Authoring, Weather, Recent Imagery, Context, CCTV, Street Level and Radio panels are one component, `UiPanel` (`src/ui/kit/`), with the same markup plus the kit's `ui-panel` classes, their titles translated by diff --git a/src/ui/cctvPanel.test.mjs b/src/ui/cctvPanel.test.mjs index f3e0223f6..1675d6119 100644 --- a/src/ui/cctvPanel.test.mjs +++ b/src/ui/cctvPanel.test.mjs @@ -126,6 +126,13 @@ test('an active camera renders the switch, toggles, CAL chip and meta line', asy assert.equal(byId('cctv-auto-hop-btn').textContent, 'AUTO HOP ON'); assert.equal(byId('cctv-projection-btn').textContent, 'PROJECTION OFF'); assert.equal(byId('cctv-projection-btn').classList.contains('active'), false); + // The toggles say their state to assistive technology, not only by colour. + const pressed = (id) => byId(id).getAttribute('aria-pressed'); + assert.equal(pressed('cctv-enable-btn'), 'true'); + assert.equal(pressed('cctv-coverage-btn'), 'true'); + assert.equal(pressed('cctv-auto-hop-btn'), 'true'); + assert.equal(pressed('cctv-projection-btn'), 'false'); + assert.equal(pressed('cctv-adjust-btn'), 'false'); assert.equal(byId('cctv-quality-chip').textContent, 'CAL · CURATED'); assert.equal(byId('cctv-quality-chip').dataset.calBadge, 'curated'); assert.equal( diff --git a/src/ui/views/LayerPanelsView.vue b/src/ui/views/LayerPanelsView.vue index 6631a1097..4026a6cd2 100644 --- a/src/ui/views/LayerPanelsView.vue +++ b/src/ui/views/LayerPanelsView.vue @@ -1,6 +1,7 @@