Fix: a11y combobox attributes (fixes #147)

[oliverfoster]

fixes #147

Fix

• Added role, aria-controls and relevant id

[kirsty-hames]

Testing this with VoiceOver in Safari functions as expected however the reading of the button isn't. "Misspelt" is announced before reading the button context (see screenshot below). I can't see why the "Select an option" text is being cut off. I'll test this with NVDA to compare.

[oliverfoster]

Testing this with VoiceOver in Safari functions as expected however the reading of the button isn't. "Misspelt" is announced before reading the button context (see screenshot below). I can't see why the "Select an option" text is being cut off. I'll test this with NVDA to compare.

looking at the example, we maybe have too many different aria-labelledbys, perhaps the one on the ul could be made the same as the one on the button?

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/#sc1_label

[kirsty-hames]

Hey @oliverfoster, I've made a couple of commits to align this with the WCAG example you shared. Overall this is reading much better.

We still have the issue mentioned above where VoiceOver in Safari reads "Misspelt" and cuts off the label. I can only replicate this in Safari. VoiceOver in Chrome reads beautifully. NVDA in Chrome and Edge read nicely too.

I'm running Safari v18.0.1 - not sure if this is a Safari specific issue or limited to a particular version. I'll give this a test on iPhone Safari and I'll see if I can replicate the issue. I'll also test the master branch (as it may be an issue prior to this PR).

Update: VoiceOver on iPhone works as expected so the issue seems to be specific to Safari on macOS. I couldn't replicate issue running the master branch so the issue has been introduced during this PR.

[cahirodoherty-learningpool]

👀

[joe-allen-89]

Perfect, now working as expected across all browsers with screen reader/keyboard 👍

[oliverfoster]

One second, just reading again.

[oliverfoster]

What happens when there is no text? The questionTitleId element would go missing and the aria-labelledby would have no meaning.

[kirsty-hames]

What happens when there is no text? The questionTitleId element would go missing and the aria-labelledby would have no meaning.

Good point! In this instance, should it read the following:

• ariaQuestion
• if ariaQuestion isn't set, then displayTitle body instruction ?

[oliverfoster]

Sounds great, yes.

[kirsty-hames]

What happens when there is no text? The questionTitleId element would go missing and the aria-labelledby would have no meaning.

Good point! In this instance, should it read the following:

• ariaQuestion
• if ariaQuestion isn't set, then displayTitle body instruction ?

I've implemented the above in commit b77f232. Note, due to aria-labelledby requiring an id, ariaQuestion is provided as an aria-label instead.

In the instance, aria-labelledby and aria-label both exist, for example both item text and ariaQuestion are set, aria-labelledby takes precedence.

[oliverfoster]

do these need changing?

[oliverfoster]

👍

[github-actions]

🎉 This PR is included in version 7.6.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀