🎨 Palette: Enhance calendar view selector accessibility

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-24 - Accessible Segmented Controls
+**Learning:** Custom segmented controls acting as view selectors (like day/week/month in calendar) were built with raw buttons and active classes, lacking semantic grouping and state exposure for screen readers.
+**Action:** When implementing or updating custom segmented controls, always apply `role="radiogroup"` (or `group`) with an `aria-label` to the container, and use `:aria-pressed` dynamically bound to each option to convey the selected state rather than just relying on CSS classes.

src/components/calendar/CalendarHeader.vue

@@ -84,6 +84,7 @@ const toggleViewOptions = () => {
         ref="viewOptionsTriggerRef"
         class="view-options-trigger"
         :class="{ active: showViewOptions || showFilters || hideCalendarDoneTasks || showFutureRecurring }"
+        :aria-expanded="showViewOptions"
         aria-label="View options"
         title="View options"
         @click="toggleViewOptions"
@@ -98,7 +99,7 @@ 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">
@@ -187,24 +188,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">
         <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') }}