From 30d7976acb65a5d8b0a653d5dc0b64146d07c46f Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 9 Aug 2026 04:53:21 +0000 Subject: [PATCH 1/4] feat: add ARIA and title labels to icon-only buttons for accessibility Added ARIA labels, semantic `aria-expanded` / `aria-pressed` attributes to the ViewControls toggle buttons, and dynamic `title` / `aria-label` to the SettingsModal tab buttons to preserve accessibility when their text content is hidden via CSS on mobile viewports. Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com> --- .Jules/palette.md | 3 +++ src/components/layout/SettingsModal.vue | 2 ++ src/components/layout/ViewControls.vue | 6 +++++- 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 000000000..f72f7745e --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-24 - Accessibility When Hiding Elements Visually Responsively +**Learning:** When using CSS rules like `display: none` to hide text labels within buttons responsively (e.g. shrinking tabs to icon-only on mobile screens), screen readers will also fail to read the inner text, effectively turning them into inaccessible icon-only buttons for visually impaired users. +**Action:** Always ensure that buttons which may have their visual text label hidden dynamically via CSS also have a corresponding dynamic `aria-label` or `title` bound to the parent button element to guarantee persistent accessibility across all screen sizes. diff --git a/src/components/layout/SettingsModal.vue b/src/components/layout/SettingsModal.vue index 109925d17..e7c6c0eac 100644 --- a/src/components/layout/SettingsModal.vue +++ b/src/components/layout/SettingsModal.vue @@ -26,6 +26,8 @@ :key="tab.id" class="tab-btn" :class="{ active: activeTab === tab.id }" + :title="tab.label" + :aria-label="tab.label" @click="activeTab = tab.id" > diff --git a/src/components/layout/ViewControls.vue b/src/components/layout/ViewControls.vue index 84a61f274..fdcd37a5f 100644 --- a/src/components/layout/ViewControls.vue +++ b/src/components/layout/ViewControls.vue @@ -5,7 +5,9 @@ + diff --git a/src/components/ai/ChatMessage.vue b/src/components/ai/ChatMessage.vue index a47ce2aaf..79dd723ff 100644 --- a/src/components/ai/ChatMessage.vue +++ b/src/components/ai/ChatMessage.vue @@ -2586,13 +2586,17 @@ async function saveSchedule() { data-testid="ai-clarification" >
-
{{ clarification.progressLabel }}
+
+ {{ clarification.progressLabel }} +

{{ clarification.locale === 'he' ? 'שאלה קצרה לפני התכנון' : 'Quick question before planning' }}

{{ clarification.summary }}

{{ clarification.locale === 'he' ? 'למה אני שואל?' : 'Why ask?' }}
    -
  • {{ line }}
  • +
  • + {{ line }} +
@@ -2781,7 +2785,9 @@ async function saveSchedule() {

{{ weeklyPlan.headline }}

{{ weeklyPlan.weekRead.summary }}

-

{{ weeklyPlan.weekRead.mainTradeoff }}

+

+ {{ weeklyPlan.weekRead.mainTradeoff }} +

{{ weeklyPlan.locale === 'he' ? 'נתיב' : 'Lane' }} -

{{ weeklyLaneTitle(rec) }}

-

{{ weeklyLaneSubtitle(rec) }}

+

+ {{ weeklyLaneTitle(rec) }} +

+

+ {{ weeklyLaneSubtitle(rec) }} +