[ic-search-bar] a11y violations

[MI6-286]

Summary of the bug

E2E a11y testing on ic-search-bar has shown critical violations. A ticket (#1939) already exists for an aria-allowed-attribute accessibility violation for ic-search-bar/ic-select, but creating more a11y tests for ic-search-bar has revealed further violations: aria-required-attribute and aria-valid-attribute (see below).

🪜 How to reproduce

Uncomment the commented out a11y tests in the ic-search-bar Cypress tests and run tests. See the errors.

To see the aria-required-attribute and aria-valid-attribute errors specifically, run the following tests: "should render search bar with options - no filtering" "should render search bar with custom empty option list text" "should render search bar with characters until suggestion set - no show" "should render search bar with characters until suggestion set - show" "should render search bar with long option labels"

📸 Screenshots or code

🖥 📱 Device

• Type: Cypress a11y testing

🧐 Expected behaviour

All a11y tests should pass. To check this please uncomment the a11y tests in the ic-search-bar Cypress tests.

[MI6-255]

Looks like its complaining about not having aria-controls and complaining about having aria-owns so is it not just changing this line - aria-owns={menuRendered ? menuId : undefined}

[GCHQ-Developer-741]

These issues and similar ones have been seen before. Some useful links for context around aria, ids and shadow-dom:

• https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/
• https://caniuse.com/?search=ariaControlsElements

Previous PR for reference

[ad9242]

issue seems to be caused by the aria-owns & aria-controls being set on the <input> element inside the shadowDom of ic-text-field, which cannot refer to the ic-menu