Skip to content

fix(ui5-calendar): correct focus indicator color in calendar header and day picker#13094

Open
hinzzx wants to merge 1 commit intomainfrom
cal-comps-focus-border-color
Open

fix(ui5-calendar): correct focus indicator color in calendar header and day picker#13094
hinzzx wants to merge 1 commit intomainfrom
cal-comps-focus-border-color

Conversation

@hinzzx
Copy link
Contributor

@hinzzx hinzzx commented Feb 16, 2026

Overview

During accessibility testing (ACC-271), focus indicator issues were identified in the Calendar/DatePicker component:

  1. Header buttons focus color incorrect — The month/year buttons in the calendar header were using --sapSelectedColor (selection blue) for focus indicator instead of --sapContent_FocusColor (focus blue), making it appear as if the element was selected rather than focused.

What We Did

  • Changed focus outline color from --sapSelectedColor to --sapContent_FocusColor
  • Updated DayPicker focus-related variables to use the correct ones as well

What This Fixes

  • WCAG 2.2 2.4.7 (Focus Visible) — Focus indicator now uses correct focus color, clearly distinguishing focus from selection
  • Header buttons — Month/year buttons show proper focus blue outline instead of selection blue
  • Selected date focus — Focus on selected dates in day picker now uses correct focus color

Before

image

After

image

@ui5-webcomponents-bot
Copy link
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 16, 2026 13:30 Inactive
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.

2 participants