fix(masthead): remove aria-haspopup from profile menu for VO

[annawen1]

Related Ticket(s)

[Masthead]: QA: Voiceover does not announce whether the profile pop up menu is expanded or collapsed #8869

Description

In mobile, VO doesn't tell user if the profile menu is expanded or collapsed - it currently identifies that it is a popup button when focus is on the button:

"user profile popup-button menu-popup double tap to activate picker"

however, this same is announced when the profile menu is expanded so it is not descriptive enough to alert user if the menu has been expanded or collapsed.

In researching, it seems that VO will not announce the aria-expanded attribute if the button element also has the aria-haspopup attribute. Removing the aria-haspopup attribute allows for VO to properly announce if the menu is expanded or not. VO then reads:

"user profile button expanded"

BEFORE:
https://user-images.githubusercontent.com/54281166/195444988-d18f97de-2bec-4aed-8873-bf0073a03d73.mov

AFTER:
https://user-images.githubusercontent.com/54281166/195445097-afefd854-800e-4d8a-bc54-e30f0e90b2a8.mov

Changelog

Removed

• remove aria-haspopup attribute so that VO can alert user if profile menu is expanded/collapsed

[annawen1]

Hi @Gopi916 I'm wondering if it is okay to remove the aria-haspopup attribute from the profile menu button on the masthead to allow for VO to read out if menu is expanded/collapsed. Or will we be losing out on the menu information conveyed to the user?

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/9562/index.html

Built with commit: e99d928a483026f9dccd555da906d1231349f389

[ibmdotcom-bot]

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9562/index.html

Built with commit: e99d928a483026f9dccd555da906d1231349f389

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9562/index.html

Built with commit: e99d928a483026f9dccd555da906d1231349f389

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9562/index.html

Built with commit: e99d928a483026f9dccd555da906d1231349f389

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9562/index.html

Built with commit: e99d928a483026f9dccd555da906d1231349f389

[Rasubra8]

@annawen1
Now it is working fine. I have verified this fix in Vo iPhone Safari. Now SR announces “User profile expanded /collapsed” according to the toggle function. This seems to provide a better feedback to the user because as per the functionality user can open or close the dropdown by activating the triggering control.

[kennylam]

LGTM!

[RichKummer]

LGTM!