Issue description

When user navigates to "Search" input field (which is available in header region) it triggers a drop-down. The screen reader does not render when the drop-down items receives keyboard focus. This issue takes place in Firefox/NVDA and Voiceover/Safari.

Steps to reproduce

1. Turn on screen reader and navigate to "Search" input field present in header region.

Actual Behaviour

When user try to navigate in options of "Search" field with up/down or Tab keys, it is receiving keyboard focus but screen reader does not make announcement for that.

Also role="searchbox" is not provided to the <input> element.

As a result screen reader users will not be able to interact with drop-down items effectively

Expected Behaviour

When user navigates in drop-down items with up/down or Tab keys, it should receive keyboard focus and screen reader should make announcement for that.

Also provide role="searchbox" to the <input> element.

Refer to the link for more details => https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role 

Screenshot

Screen recording

Screen Recording 2022-09-19 at 6.10.54 PM.mov

AXQA Ref:AXQA-97