Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a11y: va-date-picker #3744

Open
Tracked by #3223
m0ksem opened this issue Aug 26, 2023 · 0 comments · May be fixed by #3747
Open
Tracked by #3223

a11y: va-date-picker #3744

m0ksem opened this issue Aug 26, 2023 · 0 comments · May be fixed by #3747
Labels
d3: medium No cheats. Monsters a bit faster. good first issue Right issue if you're new to vuestic v3: wish to have This is something user want, but can live without it

Comments

@m0ksem
Copy link
Contributor

m0ksem commented Aug 26, 2023

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.

@m0ksem m0ksem added good first issue Right issue if you're new to vuestic d3: medium No cheats. Monsters a bit faster. v3: wish to have This is something user want, but can live without it labels Aug 26, 2023
@Roman4437 Roman4437 linked a pull request Aug 27, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
d3: medium No cheats. Monsters a bit faster. good first issue Right issue if you're new to vuestic v3: wish to have This is something user want, but can live without it
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant