a11y: va-date-picker

[m0ksem]

Here's a list of ARIA attributes and roles that you might consider using:

Role: grid (role="grid"):

The calendar itself can be marked with the role="grid" to indicate that it's a grid-like structure.
Role: row (role="row"):

Each row of dates in the calendar can be marked with role="row" to define the rows within the grid.
Role: gridcell (role="gridcell"):

Each individual date cell can be marked with role="gridcell" to indicate that it's a cell within the grid.
aria-label or aria-labelledby:

Provide an accessible name for the gridcell elements using aria-label or aria-labelledby to describe the date to screen reader users. For example, "August 15, 2023."
aria-selected:

Use the aria-selected attribute to indicate whether a date is currently selected. Set it to "true" for the selected date cell.
aria-disabled:

If certain dates are not selectable (e.g., past dates), use the aria-disabled attribute to indicate that they are not available for selection.
aria-current:

If the calendar includes the current date, you can use the aria-current attribute to indicate it.

aria-live or aria-atomic (for dynamic updates):

If your calendar updates dynamically (e.g., when navigating months), you can use aria-live and aria-atomic to announce these changes to screen reader users.
Role: presentation (role="presentation"):

If you have decorative elements or visual formatting within the calendar that shouldn't be presented to screen readers, you can use role="presentation" on those elements.