Skip to content

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

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

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

Conversation

@balajis-qb

Copy link
Copy Markdown
Contributor

Description

Linked issue: #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
@codecov

codecov Bot commented Jun 29, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.31%. Comparing base (548a1f3) to head (f0847bf).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6299      +/-   ##
==========================================
+ Coverage   99.29%   99.31%   +0.02%     
==========================================
  Files          30       30              
  Lines        3822     3818       -4     
  Branches     1648     1645       -3     
==========================================
- Hits         3795     3792       -3     
+ Misses         26       25       -1     
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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