react-calendar
react-calendar copied to clipboard
A11y: Add "aria-pressed" attribute to tile buttons
Before you start - checklist
- [X] I have checked if this feature request is not already reported
Description
In order to improve the accessibility of this component, the current "toggled" state of the tile buttons (on / off) should be defined so that screen reader users are able to tell which date is currently selected.
Proposed solution
When a date is selected, the associated tile button should define the "aria-pressed" attribute as true. When a date is not selected, the associated tile button should define the "aria-pressed" attribute as false.
<button class="..." aria-pressed="true">
<abbr aria-label="1 January 2020">1</abbr>
</button>
<button class="..." aria-pressed="false">
<abbr aria-label="2 January 2020">2</abbr>
</button>
Alternatives
No response
Additional information
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed