Created as a result of AFB accessibility testing results T323634
a. Additionally, what are your thoughts on this alternate option, which uses aria-hidden on the label element to reduce verbosity for screen readers? This would be an improvement for screen reader users. When navigating with the arrow keys, the screen reader announces the button a single time rather than twice where the second announcement does not provide any additional information.
AFB validated approach of using aria-hidden to hide the <label> element in the checkbox hack, as the <input> element is already labeled and is already acting as the "button" for the dropdown. Ordinarily it's considered bad practice to use aria-hidden on a visible element, but given AFB's guidance, it should be safe to use in this specific case
AC
- Navigating dropdown buttons on screenreaders will only read out a single label
- Navigating dropdown buttons with an aria label (i.e. language dropdown) will only read out the aria label
Developer notes
AFB used the associated patch in their testing, so we should be able to just use that as is. It has to be updated with our new dropdown templates however. We also want to test everything is correct with dropdowns using aria labels
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T325026#8639578 |
| 2 | ✅ | T325026#8639578 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T325026#8643112 |
| 2 | ✅ | T325026#8643112 |
