Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[button] Cannot activate the button on iOS when using VoiceOver #3367

Closed
2 of 10 tasks
yuriy-fix opened this issue Jan 31, 2022 · 3 comments
Closed
2 of 10 tasks

[button] Cannot activate the button on iOS when using VoiceOver #3367

yuriy-fix opened this issue Jan 31, 2022 · 3 comments
Assignees
@vursen
Labels
a11y Accessibility issue needs research More information needed to estimate vaadin-app-layout vaadin-button

Comments

@yuriy-fix
Copy link
Contributor

yuriy-fix commented Jan 31, 2022 •
edited by vursen
Loading

What is the problem?

It is not possible to activate the toggle button on iOS with VoiceOver running. This is not a problem on Android with TalkBack running.

UPD: The issue is rather about <vaadin-button> not activating on iOS when using VoiceOver.

Browsers

  • Chrome
  • Firefox
  • Safari
  • Safari on iOS
  • Edge

Screen Readers

  • None
  • NVDA
  • JAWS
  • VoiceOver on MacOS
  • VoiceOver on iOS
@yuriy-fix yuriy-fix added needs research More information needed to estimate a11y Accessibility issue vaadin-app-layout labels Jan 31, 2022
@vursen vursen self-assigned this Feb 28, 2022
@vursen
Copy link
Contributor

vursen commented Feb 28, 2022

It is not specific to the app-layout's toggle button. I tested <vaadin-button> with VoiceOver on iOS and it has the same issue: pressing the button doesn't trigger any action when VoiceOver is enabled.

@vursen vursen changed the title [app-layout] Cannot activate toggle button [button] Cannot activate the button on iOS when using VoiceOver Feb 28, 2022
@vursen vursen mentioned this issue Mar 1, 2022
Merged
@vursen
Copy link
Contributor

vursen commented Mar 1, 2022 •
edited
Loading

This issue is caused by the iron-icon component that gets auto-imported through the @vaadin/vaadin-lumo-styles entrypoint. When you import iron-icon, it will also import the Polymer gestures module. It is not clear why, but having the gesture module imported prevents clicks from working properly on iOS with VoiceOver.

Anyway, the iron-icon component is considered deprecated and normally shouldn't be auto-imported so I believe removing iron-icon import from @vaadin/vaadin-lumo-styles will be the proper fix here.

@vursen
Copy link
Contributor

vursen commented Mar 1, 2022 •
edited
Loading

Confirmed that the issue is no longer reproducible after #3502 is merged.

RPReplay_Final1646144940.MP4

@vursen vursen closed this as completed Mar 1, 2022
This was referenced Mar 2, 2022
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@vursen vursen

Labels
a11y Accessibility issue needs research More information needed to estimate vaadin-app-layout vaadin-button
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rolfsmeds @vursen @yuriy-fix