Skip to content

Conversation

@atarek12
Copy link

@atarek12 atarek12 commented Nov 2, 2025

Description

Linked issue: #(issue number)

Problem
There is an issue with weekday name when using datepicker component without using datepicker styles
i.e: import "react-datepicker/dist/react-datepicker.css";

Changes
The issue has been introduced in this pr that fixes this issue.
But instead of using sr-only class on an extra span element which will be rendered if we don't import the stylesheet.
I have reverted it back to use aria-label but kept the inner span with aria-hidden="true"; so the screen-readers will skip it and announce the aria-label prop.

Screenshots

  • Before: Notice the duplicate of weekday -> SundaySu
Screenshot 2025-11-02 at 9 48 09 PM
  • After
Screenshot 2025-11-02 at 9 48 56 PM

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.

@martijnrusschen
Copy link
Member

Please check the output of the failing CI

@martijnrusschen
Copy link
Member

Looks like there's a failing test here. Please resolve that.

The previous change broke axe accessibility tests by using aria-label
instead of the sr-only span pattern. Screen readers need visible text
content in columnheader elements, not just aria-hidden spans.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@codecov
Copy link

codecov bot commented Nov 26, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.21%. Comparing base (1122aba) to head (c7e4e3d).
⚠️ Report is 69 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5988      +/-   ##
==========================================
+ Coverage   98.91%   99.21%   +0.30%     
==========================================
  Files          30       30              
  Lines        3496     3579      +83     
  Branches     1470     1529      +59     
==========================================
+ Hits         3458     3551      +93     
+ Misses         37       27      -10     
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 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.

The sr-only spans now work without importing the datepicker stylesheet.
This fixes the issue where weekday names would be visible when using
the component without the CSS import, while maintaining accessibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@martijnrusschen
Copy link
Member

Thank you for your PR! Unfortunately, we can't merge this change.

The aria-label approach breaks axe accessibility tests with "empty-table-header" violations. When columnheader elements only contain , screen readers have no text to announce.

The existing sr-only span pattern is the correct accessibility approach - it provides visible text for screen readers while hiding it visually. This pattern requires the CSS stylesheet to be imported, which is already expected for the component to function properly (layout, colors, positioning, etc.).

If you're using the datepicker without importing the stylesheet, we'd recommend importing it or providing your own styles that include the .react-datepicker__sr-only class definition.

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