View & Developer tabs do not work with VoiceOver on iOS

[steverep]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Tabs for different Lovelace views and tabs on the developer tools page cannot be activated with VoiceOver on iOS. This may be as simple as paper-tab implementations do not work while mwc-tab implementations work fine (e.g. tabs on configuration pages, more info dialogs, entity settings dialogs all work fine).

Describe the behavior you expected

Expect to be able to click to select a tab and programmatically know which one is selected.

Steps to reproduce the issue

1. Turn on VoiceOver screen reader on iOS
2. Try to change a view tab or developer tool tab
   ...

What version of Home Assistant Core has the issue?

2022.4.dev

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Any

Which operating system are you using to run this browser?

iOS 15.3.1

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[steverep]

@bramkragten can you put paper-tab next on the priority list for migration to mwc-tab? Looks like there's only just a few implementations to convert. If this is still an issue after that, I'll work on it.

[bramkragten]

The problem with mwc-tab is that is doesn't have the same functionality as paper-tab. That is the reason it has not been migrated completely yet.

The main issue is that mwc-tab doesn't allow a tab bar to be scrolled by dragging with the mouse, this is a major accessibility issue and at the moment a show stopper for pages that can have more tabs than fit on the screen.

We are thinking about adding this functionality ourselves, but that might take a little longer.

[bramkragten]

Related: material-components/material-web#487

[steverep]

Maybe I'm misunderstanding, but how is the lack of drag scrolling an accessibility issue? Their scrolling demo page works fine for me on desktop with NVDA and mobile with VoiceOver.

The problem and irony for a screen reader user is that the paper-tab's were one of the only things that worked before turning off cancelSyntheticClickEvents to cure #8178. Now everything else will work but they won't.

I don't see a lot of furious activity on the mwc repo, and I understand click and drag behavior is not a quick implementation to get right. What can be done about this in the meantime? There's no workaround as in #11502.

[steverep]

So, this may or may not be a false issue. I just tried it with my production HA and it works fine on iOS both in the companion app and browser. Any idea why this would fail only in a development environment?

[steverep]

I can't reproduce this issue anymore, even in a development environment. I'm closing it for now.