Add aria-controls to aria props

[owenatgov]

What/Why

Adds aria-controls to the list of props in ariaProps.

Previously, we've made the decision to not include aria-controls in favour of aria-owns for better compatability with aria 1.0 and therefore better compatability with screen readers. See Nick's comment and Ollie's comment on this topic.

This has been re-prompted by a DAC audit of the GOV.UK Design System website, where we use the autocomplete for our search. DAC advised the following:

The combobox is missing the required aria-controls attribute. The lack of the aria-controls attribute on the combobox can be problematic as it does not associate the relationship between the combobox and its corresponding listbox. The aria-controls attribute is fundamental for providing an explicit relationship between these two elements, which is necessary for users who rely on assistive technologies such as screen readers. While there is an aria-owns attribute present and some user agents might support this, for backwards compatibility it is strongly recommended that the aria-controls attribute is implemented instead.

Following testing with all current major screen readers on aria-owns, aria-controls and both, we've found no difference between the 3 scenarios. Therefore, we can confidently add aria-controls to our aria props and remove aria-owns.

Resolves alphagov/govuk-design-system#4004
Resolves #565

Notes

Voiceover on desktop and iOS don't seem to recognise the contents of the input whilst in the combobox. This was true before changing the aria prop so this isn't a regresion, but something to be concious of.

[netlify]

✅ Deploy Preview for accessible-autocomplete ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/accessible-autocomplete/deploys/66bddf504026b2008c183116
😎 Deploy Preview	https://deploy-preview-727--accessible-autocomplete.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.