Search Result selection (select any of the options from the search results) : Listbox: Listbox is missing appropriate roles and/or attributes.

Issue Description

The dropdown button is present in the footer section present below the comment field section is missing role and attributes.

URL to the Page

https://instenv-19536-ipiz.instenv.internal.atlassian.com/secure/insight/assets/IOPITSM-139?v=2

Steps to Reproduce

1. Launch URL https://instenv-19536-ipiz.instenv.internal.atlassian.com/secure/insight/assets/IOPITSM-139?v=2
2. Turn on the screen reader and navigate to the dropdown button present in the footer region of the comment section.
3. With the screen reader turned on, navigate to the button beside 'visible to all' text.
4. Upon activating the dropdown button, a listbox could be observed.

Screenshot

Screen recording

Screen Recording 2022-05-23 at 4.13.37 PM.mov

Actual Behaviour

When the screen reader user tabs on the dropdown button, the role is not exposed to the screen reader software. Additionally, the user is not notified if there is a Listbox available. As a result screen reader users will not be aware of the presence of the list box.

Expected Behaviour

When the screen reader user focus is set on the dropdown button, a clear announcement should be available, For Example: “button has listbox popup”. 

This can be achieved by:

1. Adding property aria-haspopup="listbox" to <button> element.
2. Adding an aria-expanded property to the <button> element and toggle its value programmatically to true/ false depending on the expanded/ collapsed state of listbox.
3. Providing <ul> element with role="listbox" and a unique id.
4. Providing role="option" and unique id to the <li> elements present under <ul> element.

Refer following code snippet for implementation:

<button class="ruiButton iamRolePicker__trigger e2e-role-picker ruiButton–subtle" aria-haspop="listbox">
<i class="rIcon-unlocked">
</i>
</button>
<div data-placement="bottom-start" class="ruiDropdown__content" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(7px, 117px, 0px);">
<ul class="ruiList iamRolePicker__list e2e-role-picker-list">
<li class="ruiList__item"><button class="ruiList__item__label">Visible to all</button></li>
<li class="ruiList__separator"></li><li class="ruiList__header">Restricted roles</li>
<li class="ruiList__item"><button class="ruiList__item__label">Insight administrators</button></li>
<li class="ruiList__item"><button class="ruiList__item__label">Insight managers</button></li>
<li class="ruiList__item"><button class="ruiList__item__label">Insight developers</button></li>
</ul>
</div>

Workaround

Not Available

Bug Ref: 746652

Bulldog Ref: JSMDC-13208