🎨 Palette: Improve accessibility of Calendar View Selector

.github/workflows/ci.yml

@@ -83,16 +83,12 @@ jobs:
       - name: Install Playwright (chromium)
         run: npx playwright install --with-deps chromium
 
-      - name: Setup Supabase CLI
-        uses: supabase/setup-cli@v1
-        with:
-          version: latest
 
       - name: Boot Supabase + run two-client Realtime e2e (R1–R7)
         run: |
-          supabase start
+          npx supabase start
           ./scripts/run-e2e.sh canvas-sync-regressions.spec.ts --project=chromium --workers=2
 
       - name: Stop Supabase
         if: always()
-        run: supabase stop || true
+        run: npx supabase stop || true

src/components/QuickSortCard.vue

@@ -85,10 +85,10 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'swipe-right'): void
-  (e: 'swipe-left'): void
-  (e: 'swipe-up'): void
-  (e: 'swipe-down'): void
+  (e: 'swipeRight'): void
+  (e: 'swipeLeft'): void
+  (e: 'swipeUp'): void
+  (e: 'swipeDown'): void
 }>()
 
 const cardRef = ref<HTMLElement | null>(null)
@@ -105,10 +105,10 @@ const {
   haptics: true,
   fourDirectional: true,
   mouse: true,
-  onSwipeRight: () => emit('swipe-right'),
-  onSwipeLeft: () => emit('swipe-left'),
-  onSwipeUp: () => emit('swipe-up'),
-  onSwipeDown: () => emit('swipe-down')
+  onSwipeRight: () => emit('swipeRight'),
+  onSwipeLeft: () => emit('swipeLeft'),
+  onSwipeUp: () => emit('swipeUp'),
+  onSwipeDown: () => emit('swipeDown')
 })
 
 // Card transform style - supports both horizontal and vertical movement

src/components/ai/ChatMessage.vue

@@ -371,15 +371,7 @@ function weeklyPlanTaskIds(rec: WeeklyPlanRecommendation): string[] {
     .filter(taskId => !dismissedCardTaskIds.value.has(taskId))
 }
 
-function weeklyPlanPrimaryTaskIds(rec: WeeklyPlanRecommendation): string[] {
-  return rec.primaryTaskId && !dismissedCardTaskIds.value.has(rec.primaryTaskId) ? [rec.primaryTaskId] : []
-}
 
-function weeklyPlanRelatedChipIds(rec: WeeklyPlanRecommendation): string[] {
-  return [...new Set(rec.relatedTaskIds ?? [])]
-    .filter(taskId => taskId !== rec.primaryTaskId && !dismissedCardTaskIds.value.has(taskId))
-    .slice(0, 4)
-}
 
 function weeklyLaneTitle(rec: WeeklyPlanRecommendation): string {
   const locale = weeklyPlan.value?.locale ?? 'en'

src/components/base/BaseInput.vue

@@ -8,10 +8,11 @@
     <div class="input-container">
       <slot name="prefix" />
 
-      <input :dir="inputDir"
+      <input
         :id="inputId"
         ref="inputRef"
         v-model="localValue"
+        :dir="inputDir"
         :type="type"
         :placeholder="placeholder"
         :disabled="disabled"

src/components/base/BaseModal.vue

@@ -101,6 +101,40 @@
 </template>
 
 <script setup lang="ts">
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  description: undefined,
+  size: 'md',
+  variant: 'default',
+  closeOnOverlayClick: true,
+  closeOnEscape: true,
+  submitOnEnter: true,
+  showHeader: true,
+  showFooter: false,
+  showCloseButton: true,
+  showCancelButton: true,
+  showConfirmButton: true,
+  cancelText: undefined,
+  confirmText: undefined,
+  closeAriaLabel: undefined,
+  loading: false,
+  confirmDisabled: false,
+  titleClass: undefined,
+  descriptionClass: undefined,
+  bodyClass: undefined,
+  footerClass: undefined,
+  trapFocus: true
+})
+
+const emit = defineEmits<{
+  close: []
+  cancel: []
+  confirm: []
+  open: []
+  afterOpen: []
+  afterClose: []
+}>()
+
 // BUG-1724: Teleport root can't auto-inherit attrs (class) — disable to suppress Vue warning
 defineOptions({ inheritAttrs: false })
 
@@ -136,40 +170,6 @@ interface Props {
   trapFocus?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  description: undefined,
-  size: 'md',
-  variant: 'default',
-  closeOnOverlayClick: true,
-  closeOnEscape: true,
-  submitOnEnter: true,
-  showHeader: true,
-  showFooter: false,
-  showCloseButton: true,
-  showCancelButton: true,
-  showConfirmButton: true,
-  cancelText: undefined,
-  confirmText: undefined,
-  closeAriaLabel: undefined,
-  loading: false,
-  confirmDisabled: false,
-  titleClass: undefined,
-  descriptionClass: undefined,
-  bodyClass: undefined,
-  footerClass: undefined,
-  trapFocus: true
-})
-
-const emit = defineEmits<{
-  close: []
-  cancel: []
-  confirm: []
-  open: []
-  afterOpen: []
-  afterClose: []
-}>()
-
 const { t } = useI18n()
 
 // I18n defaults (if props not provided)

src/components/calendar/CalendarHeader.vue

@@ -86,6 +86,8 @@ const toggleViewOptions = () => {
         :class="{ active: showViewOptions || showFilters || hideCalendarDoneTasks || showFutureRecurring }"
         aria-label="View options"
         title="View options"
+        aria-haspopup="menu"
+        :aria-expanded="showViewOptions"
         @click="toggleViewOptions"
       >
         <MoreVertical :size="16" :stroke-width="1.5" />
@@ -98,14 +100,15 @@ const toggleViewOptions = () => {
         :y="popoverY"
         position="bottom"
         variant="menu"
-        :close-on-click-outside="true"
+        close-on-click-outside
         @close="showViewOptions = false"
       >
         <div class="view-options-menu">
           <!-- Project Filters -->
           <button
             class="view-option-item"
             :class="{ active: showFilters }"
+            :aria-pressed="showFilters"
             @click="showFilters = !showFilters"
           >
             <SlidersHorizontal :size="16" :stroke-width="1.5" class="option-icon" />
@@ -117,6 +120,7 @@ const toggleViewOptions = () => {
           <button
             class="view-option-item"
             :class="{ active: hideCalendarDoneTasks }"
+            :aria-pressed="hideCalendarDoneTasks"
             @click="$emit('toggleDoneTasks')"
           >
             <EyeOff
@@ -139,6 +143,7 @@ const toggleViewOptions = () => {
           <button
             class="view-option-item"
             :class="{ active: showFutureRecurring }"
+            :aria-pressed="showFutureRecurring"
             @click="$emit('toggleFutureRecurring')"
           >
             <Repeat :size="16" :stroke-width="1.5" class="option-icon" />
@@ -167,6 +172,7 @@ const toggleViewOptions = () => {
             v-if="googleConnected"
             class="view-option-item"
             :class="{ active: showGoogleEvents }"
+            :aria-pressed="showGoogleEvents"
             @click="$emit('toggleGoogleEvents')"
           >
             <Eye
@@ -187,24 +193,27 @@ const toggleViewOptions = () => {
         </div>
       </BasePopover>
 
-      <div class="view-selector view-selector--minimal">
+      <div class="view-selector view-selector--minimal" role="group" aria-label="Calendar view mode">
         <button
           class="view-btn"
           :class="{ active: viewMode === 'day' }"
+          :aria-pressed="viewMode === 'day'"
           @click="$emit('update:viewMode', 'day')"
         >
           {{ $t('calendar.day') }}
         </button>
         <button
           class="view-btn"
           :class="{ active: viewMode === 'week' }"
+          :aria-pressed="viewMode === 'week'"
           @click="$emit('update:viewMode', 'week')"
         >
           {{ $t('calendar.week') }}
         </button>
         <button
           class="view-btn"
           :class="{ active: viewMode === 'month' }"
+          :aria-pressed="viewMode === 'month'"
           @click="$emit('update:viewMode', 'month')"
         >
           {{ $t('calendar.month') }}