Skip to content

🎨 Palette: Enhance calendar view selector accessibility - #246

Open
endlessblink wants to merge 1 commit into
masterfrom
palette-calendar-accessibility-7862601158573756603
Open

🎨 Palette: Enhance calendar view selector accessibility#246
endlessblink wants to merge 1 commit into
masterfrom
palette-calendar-accessibility-7862601158573756603

Conversation

@endlessblink

Copy link
Copy Markdown
Owner

🎨 Palette: Enhance Calendar View Options and Selector Accessibility

💡 What:

  • Added :aria-expanded to the "View options" popover trigger button.
  • Restructured the minimal calendar view selector container (Day/Week/Month) with role="group" and aria-label="Calendar view".
  • Added dynamic :aria-pressed bindings to the individual view mode buttons (Day, Week, Month) corresponding to their active states.
  • Cleaned up boolean prop shorthand warnings.

🎯 Why:

  • Custom segmented controls acting as view selectors were previously built with raw buttons and active classes, lacking semantic grouping and state exposure for screen readers.
  • Adding :aria-pressed allows screen readers to natively announce which view mode is currently selected.
  • Adding :aria-expanded to the popover trigger ensures screen reader users know when the view options menu is open or closed.

♿ Accessibility:

  • Improved screen reader comprehension of custom segmented controls and toggle popovers by properly exposing interaction states.

PR created automatically by Jules for task 7862601158573756603 started by @endlessblink

Added `aria-expanded` to the view options dropdown trigger to correctly signal its open state to screen readers. Upgraded the calendar view selector (Day, Week, Month buttons) to use `role="group"` with an `aria-label`, and implemented dynamic `:aria-pressed` bindings to convey the active view mode semantically, replacing sole reliance on visual CSS classes.

Co-authored-by: endlessblink <37155282+endlessblink@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant