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

Disabled time does not have aria-disabled attribute (unlike disabled dates) #4259

Closed
alexkuc opened this issue Sep 15, 2023 · 3 comments · Fixed by qburst/react-datepicker-3#5, #4319 or jones58/personal-knowledge-wiki#29 · May be fixed by rowidanagah/EduMentorMate#9

Comments

@alexkuc
Copy link

alexkuc commented Sep 15, 2023

Describe the bug
When certain time is excluded, it does not have aria attribute aria-disabled unlike disabled dates

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://reactdatepicker.com/#example-exclude-times
  2. Inspect Time column using Chrome's dev tools
  3. See html output similar to this:
<li class="react-datepicker__time-list-item  react-datepicker__time-list-item--disabled" tabindex="-1" role="option">5:00 PM</li>
  1. Go to https://reactdatepicker.com/#example-exclude-dates
  2. Inspect disabled date cell using Chrome's dev tools
  3. See html output similar to this:
<div class="react-datepicker__day react-datepicker__day--015 react-datepicker__day--disabled react-datepicker__day--excluded react-datepicker__day--selected react-datepicker__day--today" tabindex="0" aria-label="Not available Friday, September 15th, 2023" role="option" title="" aria-disabled="true" aria-current="date" aria-selected="true">15</div>

Expected behavior
See attribute aria-disabled="true" present for both, disabled dates and disabled times.

@alexkuc
Copy link
Author

alexkuc commented Sep 15, 2023

If my understanding is correct, we only need to add aria attribute here:

tabIndex={time === timeToFocus ? 0 : -1}
role="option"
aria-selected={this.isSelectedTime(time) ? "true" : undefined}

If this sounds right, I can submit a PR for this.

@martijnrusschen
Copy link
Member

Go ahead, I can review a PR

balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Oct 14, 2023
Moved the logic to find whether a time is disabled logic to a helper method to reuse the logic both for the add of react-datepicker__time-list-item--disabled class ans also for the add of aria-disabled attribute

Closes Hacker0x01#4259
balajis-qb pushed a commit to qburst/react-datepicker-3 that referenced this issue Oct 14, 2023
…Time component

Ensure the test cases to accurately check for the presence of 'aria-disabled' attribute in the Time component when it's disabled

Closes Hacker0x01#4259
@balajis-qb
Copy link

balajis-qb commented Oct 14, 2023

Hi @martijnrusschen,
I fixed the mentioned issue in my PR - #4319. I also included the RTL migration for the corresponding test cases. Kindly review it and let me know if any changes required.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment