USWDS - Date Picker: Updated toggleCalendar function to account for aria-disabled attribute + readonly #6013
Conversation
There was a problem hiding this comment.
Not yet approving based on observation: Now, this could be a JAWS functionality, as it does not happen in NVDA. When I tab into the calendar icon, while it does tell me it is unavailable, instructions are still announced telling the user to "Press space to activate, use the arrow keys to select". I feel like this could be a bit confusing to the user if they are originally told this is unavailable.
|
NVDA and Narrator don't announce those extra instructions but I can confirm that in JAWS 2024 and Chrome you do hear all those instructions read aloud. I'm wary of also having a focusable element that is inoperable BUT can't find specific WCAG criteria that sates it's a failure. Since no one can operate the element it's not technically failing any criteria that we can tell. |
@amycole501 I believe this would be the intended behavior for |
|
chore: Could you also create a Site change log entry for this item? Refer to the changelog README and reach out if you have any questions! |
There was a problem hiding this comment.
Thanks @RachelCorsino.
Testing and review
I was able to test and confirm the following:
- Input is unclickable in
aria-disabled - On aria disabled: button shows as
dimand unclickable. - On aria disabled: I can still enter numbers in the date.
On the last item, is that the intended behavior? You can't click calendar to select date, but you can still enter it manually?
Otherwise LGTM and I can approve once we have clarity on question above and Charlie's changes have been addressed. Thanks again
@mejiaj - I think that was a mistake on my end with one of the functions. After fixing, the input element does not allow for input. |
…ent-calendar-form-opening-aria-disabled merging branch with develop
Summary
Updated toggleCalendar function to account for
aria-disabled attribute + readonly. The new code added prevents users from selecting a date while allowing the button to remain discoverable, which is required for accessibility. It also adds thereadonlywhich effectively replicates disabled behaviors without the accessibility concerns.Breaking change
This is not a breaking change.
Related issue
Closes #5982
Related PR
Changelog PR
Preview link
Preview link:
Date Picker
Problem statement
The date picker does not fully comply with accessibility requirements. Users who rely on assistive technologies may experience frustration or confusion while attempting to interact with the date picker, and users who follow recommended disabled guidance may find it difficult to do so.
Solution
This PR adds a check for the
aria-disabledattribute to the toggleCalendar() function, ensuring that the date picker remains discoverable while preventing users from selecting a date when the element is disabled. It also adds thereadonlyattribute whenaria-disabledis used to help the date picker be discoverable by screenreaders. This change aligns with accessibility requirements and simplifies the process for users to follow recommended disabled guidance.Testing and review
Before opening this PR, make sure you’ve done whichever of these applies to you:
git pull origin [base branch]to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch isdevelop).npm run prettier:sassto format any Sass updates.npm testand confirm that all tests pass.