Skip to content

Fix #6297: 🐛 Fix inline Year datepicker Keyboard Navigation Accessibility#82

Open
balajis-qb wants to merge 1 commit into
mainfrom
issue-6297/fix/year-picker-keyboard-selection
Open

Fix #6297: 🐛 Fix inline Year datepicker Keyboard Navigation Accessibility#82
balajis-qb wants to merge 1 commit into
mainfrom
issue-6297/fix/year-picker-keyboard-selection

Conversation

@balajis-qb

@balajis-qb balajis-qb commented Jun 29, 2026

Copy link
Copy Markdown
Collaborator

Description

Linked issue: Hacker0x01#6297


Problem

In showYearPicker mode, keyboard navigation does not visually highlight the active (focused) year when the DatePicker is rendered with inline.

This behavior is inconsistent with:

  • Default DatePicker (day view)
  • MonthPicker (showMonthYearPicker)

Root cause:

  • isKeyboardSelected in src/year.tsx includes a !this.props.inline condition
  • This prevents the react-datepicker__day--keyboard-selected class from being applied in inline mode

Changes

  • Removed the unnecessary !this.props.inline check from isKeyboardSelected
  • Ensures keyboard-selected state is applied regardless of inline rendering
image

Behavior Changes

  • ✅ YearPicker now highlights the focused year during keyboard navigation in inline mode
  • ✅ Behavior is now consistent across all picker modes
  • ⚠️ No impact on non-inline behavior
  • ⚠️ No changes to selection logic, only visual keyboard state handling

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

YearPicker was not applying the `react-datepicker__day--keyboard-selected`
class during keyboard navigation when rendered in inline mode.

The issue was caused by an unnecessary `!inline` check in `isKeyboardSelected`,
which prevented the keyboard-selected state from being applied even when
navigation was active.

Removing this condition restores consistent behavior across:
- Default DatePicker
- MonthPicker
- YearPicker (showYearPicker)

Keyboard navigation now correctly highlights the focused year in inline mode.

Closes Hacker0x01#6297
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