USWDS: Combo Box used in Time Picker Component Ignores Hint Text #6411
Conversation
cathybaptista
changed the title
cathybaptista
changed the title
|
@cathybaptista since the solution is found in the combo-box package, can you update the PR description to match? Currently, it's all scoped to time picker. |
cathybaptista
changed the title
cathybaptista
changed the title
|
@mahoneycm Good suggestion! I think I've made it clear, I also updated the body of the PR to make it clearer. I have also added two changelogs, one for combo box and one for time picker. |
amyleadem
left a comment
amyleadem
left a comment
There was a problem hiding this comment.
Interested to talk through this one because I am curious about the approach.
In the time picker twig, we explicitly define aria-describedby on the <input> element. This leads me to believe that our expectation has been that users are responsible for manually defining the aria-describedby in their HTML. From there, I also assume that it is our responsibility to make sure that attribute is carried over in the dynamically-generated version of the component.
This PR seems to take a different approach. It looks like it is looking for a hint element with a specific name space and then defines aria-describedby with it. This approach feels a bit opinionated and fragile to me since the assumed naming structure feels rigid and it also sets the value of aria-describedby whether the hint is present or not.
Curious if it is more appropriate to just look for the user-defined aria-describedby then transfer it to the dynamic component. I am coming at this with some assumptions, so let's get on a call and talk through this!
…-picker-ignores-hint-text
…ributes for combobox.
|
@amyleadem thank you so much for making the connection on this one! I have added the arria-describedby to the input and modified combobox to pick up the value. :) |
Summary
On initialization, the combo box used by the time-picker component was ignoring its hint text attributes.
Breaking change
This is not a breaking change.
Related issue
Closes #6315
Changelog Entries Combobox and Time Picker
Preview link
Preview link:
Time Picker using Combo Box with aria-describedby
Problem statement
The combo box used in time picker was not linking any aria-describedby attributes for the "appointment-time-hint" field. As a result, the combo box hint text was not being read by screen readers.
Solution
The aria-describedby text was not being included when the combo box was initialized as part of the time-picker component. It is now initialized and set as an attribute when the input field that is part of the combo box element is created.
Combo boxes use the arria describedby as:
aria-describedby="fruit-hint" (A single value with a single "-".)
Testing and review
Go to time picker component
Ensure is initialized properly, i.e. should be a combo box
Inspect hint text and view ID appointment-time-hint
Search for aria attributes that have the ID
Verify that the appointment-time-hint text is found.