diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..eddb3756
--- /dev/null
+++ b/.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.
diff --git a/src/components/calendar/CalendarHeader.vue b/src/components/calendar/CalendarHeader.vue
index b4860f6e..40311a72 100644
--- a/src/components/calendar/CalendarHeader.vue
+++ b/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"
>