cds-snc / ircc-rescheduler

🙅🗓
https://vancouver.rescheduler-dev.cds-snc.ca/
MIT License
24 stars 7 forks source link

Announce dates as unavailable #451

Closed timarney closed 6 years ago

timarney commented 6 years ago

When using a screen reader dates were being read and than announce as dimmed when a date is disabled. The user would need to listen to the entire date in order to find out if it was available.

This update announces disabled dates as "unavailable" prior to reading the date.

This updates so the first and last available days will be announced https://github.com/cds-snc/ircc-rescheduler/issues/455 .

pcraig3 commented 6 years ago

@timarney, I know we talked about looking into aria-hidden potentially, but it doesn't look like we have access to this. The only three aria attributes we can set are: aria-label, aria-disabled, and aria-selected (and these are getting set correctly).

As far as tabIndex, it is in the code itself for a day, but I haven't looked into how it gets used. It's possible it's internally managed and not something we have access to.

Might be worth a look (unless you've already looked).

In any case, this PR looks to me like an improvement.

timarney commented 6 years ago

The tabIndex for the Day seems to be set here via the Month.

let tabIndex = -1;
    // Focus on the first day of the month
    if (this.props.onDayClick && !isOutside && day.getDate() === 1) {
      tabIndex = this.props.tabIndex; // eslint-disable-line prefer-destructuring
    }

https://github.com/gpbl/react-day-picker/blob/31d0ea66e9e6701a41eefbb29612de40462e5edc/src/Month.js#L85

Doesn't look like we can control.

Added a question on StackOverflow here https://stackoverflow.com/questions/52338411/setting-day-tabindex-for-react-day-picker