Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Screen reader does not announce selected date, current month #3817

Merged
merged 3 commits into from Jan 30, 2023

Conversation

SpaNb4
Copy link
Contributor

@SpaNb4 SpaNb4 commented Nov 10, 2022

This PR fixes some accessibility issues, and may help screen reader users navigate this datepicker library better.

  • With my fix when you change the month, screen reader will announce the current month. Because with current implementation, when clicking on the next/previous month button, the user does not know which month the calendar is currently on
  • Also made some changes so that screenreader will announce selected date

I believe that my PR will resolve these issue:
#3558
#3559
#3766

@codecov
Copy link

codecov bot commented Nov 10, 2022

Codecov Report

Merging #3817 (582bb81) into master (d5d6d67) will decrease coverage by 0.08%.
The diff coverage is 93.93%.

❗ Current head 582bb81 differs from pull request most recent head 0795e66. Consider uploading reports for the commit 0795e66 to get more accurate results

@@            Coverage Diff             @@
##           master    #3817      +/-   ##
==========================================
- Coverage   94.66%   94.59%   -0.08%     
==========================================
  Files          20       20              
  Lines        1651     1684      +33     
  Branches      390      404      +14     
==========================================
+ Hits         1563     1593      +30     
- Misses         25       27       +2     
- Partials       63       64       +1     
Impacted Files Coverage Δ
src/index.jsx 90.54% <90.47%> (-0.01%) ⬇️
src/calendar.jsx 94.19% <100.00%> (+0.24%) ⬆️
src/year.jsx 95.77% <0.00%> (-1.41%) ⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

@SpaNb4
Copy link
Contributor Author

SpaNb4 commented Nov 14, 2022

@martijnrusschen Do I need to add more tests to increase the code-coverage and only then will you review this PR, right?

}`;
} else {
if (this.props.showTimeSelectOnly) {
ariaLiveMessage = `Selected time: ${safeDateFormat(
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hardcoded english texts will ruin accessibility for all non-english users. This prefix should be diffferent prop.

@martijnrusschen
Copy link
Member

martijnrusschen commented Jan 26, 2023

Can you resolve the merge conflict so we can get this merged and released?

@@ -1004,6 +1040,7 @@ export default class Calendar extends React.Component {
showPopperArrow={this.props.showPopperArrow}
arrowProps={this.props.arrowProps}
>
{this.renderAriaLiveRegion()}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this span be optional?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, this ariaLiveRegion should be optional

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this the double Month Year we see now?
Screen Shot 2023-04-11 at 08 09 10

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah noo, this is already covered here :( #3924

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, this should be optional. This is showing up in my application and I cannot opt out of showing the "Selected date:" text.

p-rogas pushed a commit to p-rogas/react-datepicker that referenced this pull request Mar 22, 2023
…unce

Fix: Screen reader does not announce selected date, current month
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.

None yet

7 participants