This is one last PR to improve the screenreader experience for the calendar page.
On the calendar page text, we have the months you can pick from, and we have the days that you can pick from, but we never tell you what is the first day you can pick.
In this picture above, without being able to see the calendar, you would know that you can select Tuesdays and Wednesdays in November, but you wouldn't know that the first Tuesday you can pick is the 20th.
changes
added hidden text to calendar page listing the first available day
added an aria-describedby attribute to the calendar describing the first day
added an aria-labelledby attribute to the calendar which is the name of the current month (before it would say "next month")
Add focus to .DayPicker
adds a new test looking for the attributes set on the calendar element
also added some padding updates to the beta banner for mobile
gifs
when reading text on the page
(when voiceover is on, you can use option+control+right arrow)
before
after
doesn't mention the first day you can select
mentions the first day you can select
when tabbing down the page
(when voiceover is on, you just hit the tab key)
(note that I did this in Safari: for some reason, voiceover doesn't read the aria-labelledby label in chrome, even though that is the expected behaviour)
before
after
calendar says "next month" by default
calendar now reads first month, pauses, and then reads first available day
This is one last PR to improve the screenreader experience for the calendar page. On the calendar page text, we have the months you can pick from, and we have the days that you can pick from, but we never tell you what is the first day you can pick.
In this picture above, without being able to see the calendar, you would know that you can select Tuesdays and Wednesdays in November, but you wouldn't know that the first Tuesday you can pick is the 20th.
changes
aria-describedbyattribute to the calendar describing the first dayaria-labelledbyattribute to the calendar which is the name of the current month (before it would say "next month").DayPickergifs
when reading text on the page
(when voiceover is on, you can use
option+control+right arrow)when tabbing down the page
(when voiceover is on, you just hit the tab key) (note that I did this in Safari: for some reason, voiceover doesn't read the
aria-labelledbylabel in chrome, even though that is the expected behaviour)