Narrator is announcing Tab items present inside the 'Edit your manifest' dialogue as 'Group'.

[msftedad]

Describe the bug

Narrator is announcing Tab items present inside the 'Edit your manifest' dialogue as 'Group'. If the proper role as tab will not be announced by the narrator, then the screen reader users will not get the information of the control and they may get confused.

To Reproduce

1. Open the PWA Builder URL- https://www.pwabuilder.com/reportcard?site=https://webboard.app.
2. PWA Builder page will appear.
3. Navigate to the 'Edit your Manifest' button activate it.
4. Turn on the narrator using Ctrl + Win + Enter.
5. Dialogue will appear now navigate to the tab items info, setting, platforms, etc.
6. Observe the narrator's announcement.

Demo

https://www.pwabuilder.com/reportcard?site=https://webboard.app

Screenshots

Narrator.is.announcing.Tab.items.present.inside.the.Edit.your.manifest.dialogue.as.Group.mp4

Browser / OS

OS: Windows11
OS Version: 23H2 (Build 25905.1000)
Browser: Edge Dev (Version 117.0.2007.0 (Official build) dev (64-bit))
Screen reader: Narrator

Additional information

Issue is also repro at https://www.pwabuilder.com/reportcard?site=https://example.com

[msftedad]

Hi team, Any update on this issue?

[claviska]

I'm not currently setup to test in Narrator, but a PR from the community would be very welcome to help out here.

[claviska]

@msftedad Can you confirm the same behavior happens in the docs? https://shoelace.style/components/tab-group

If so, this is a Narrator issue. If not, it could be an implementation issue. I can confirm that VoiceOver is announcing the tabs correctly in your demo.

[msftedad]

Hi @claviska , we are in discussion with PO team.Once we receive information from them we promptly update you.Thanks