Share Results Modal : Share by email input field has missing labels and roles.

Issue Summary

The input field Share by email in the Share results modal has missing labels and roles, which makes it the assistive technology user difficult to understand the functionality associated with it.

Tested URL

https://instenv-19536-ipiz.instenv.internal.atlassian.com/secure/insight/search?criteria=Name%20%3D%20xyz&schema=3 

Steps to Reproduce

1. Launch the URL
2. In the header section Navigate to "Insights" and activate the link.
3. Select the "Search objects" link from the insights menu.
4. In the Search filter section, in the IQL query field add a filter query and Navigate to the "Share" button.
5. A modal for the Share these results will appear, navigate to the "Share by email" input field keeping the screen reader on.

Actual Results

The form fields "Share by email" in the Share Results modal does not have a form label. The screen reader announces the input field as "Edit text", which does not clearly convey the functionality associated with it. As a result, users with visual impairments who use a screen reader will not be able to understand the purpose of the form fields.

Additionally, the element has a functionality of an autocomplete Combobox and thus has a missing role for Combobox.

Expected Results

Provide a unique and descriptive label for the discussed form field using the 'title" attribute such as "Name or User key". This will help screen reader users to understand the purpose of the form field.

Additionally, the element should have the functionality of a Combobox. Apply the following to make the input Combobox element more accessible:

• A role="combobox" could be added to the <div> element.
• The dropdown menu should announce the label it is associated with.
• For this case, when the users focus to enter the Dropdown menu, it should announce content such as "Name or User key, select an object type from the list of items". This will help the assistive technology user to understand the relation between the label and the dropdown menu.
• A working example for accessible Autocomplete Combobox could be found at:https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html 

Screenshot

Screen Recording

Screen Recording 2022-05-25 at 10.19.54 PM.mov

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available.

Bug Ref: 746253

Bulldog Ref: