USWDS - Date Picker: Updated toggleCalendar function to account for aria-disabled attribute + readonly#6013
Conversation
alex-hull
left a comment
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. |
mahoneycm
left a comment
There was a problem hiding this comment.
Looks like the calendar functionality is being blocked as expected, but readonly isn't being appended on initialization. Left a couple change requests to address!
@amycole501 I believe this would be the intended behavior for |
mahoneycm
left a comment
There was a problem hiding this comment.
We're getting close! I found a couple blocking issues that should get us to the finish line.
Feel free to reach out if you have any questions!
|
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! |
mejiaj
left a comment
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. |
mahoneycm
left a comment
There was a problem hiding this comment.
Just a few fine grain details then we should be good to go! Thanks for your persistence @RachelCorsino
mejiaj
left a comment
There was a problem hiding this comment.
Thanks @RachelCorsino. Confirming that the aria-disabled button AND input are no longer editable.
…ent-calendar-form-opening-aria-disabled merging branch with develop
mahoneycm
left a comment
There was a problem hiding this comment.
This is working great! Thanks Rachel!
amycole501
left a comment
There was a problem hiding this comment.
Sounds good now in JAWS; works as expected.
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.