react-calendar icon indicating copy to clipboard operation
react-calendar copied to clipboard

A11y: Add "aria-pressed" attribute to tile buttons

Open davidcollingwood opened this issue 2 years ago • 0 comments

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

davidcollingwood avatar May 12 '22 00:05 davidcollingwood