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.

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

PopupButton does not properly manage focus in Safari #682

Open
hashkov-evncd opened this issue Feb 11, 2025 · 0 comments
Open

PopupButton does not properly manage focus in Safari #682

hashkov-evncd opened this issue Feb 11, 2025 · 0 comments
Labels
new Flag for new issues before someone replies

Comments

@hashkov-evncd
Copy link

Description

When using the PopupButton component from @typeform/embed-react, focus is not properly moved into the modal when it opens, especially in Safari with VoiceOver enabled. This creates an accessibility issue, as users navigating via screen readers are not informed of the modal opening and cannot navigate inside it without manually interacting.

🔹 Expected Behavior

  1. When clicking the PopupButton, the Typeform modal should open.
  2. Focus should automatically move into the modal, ensuring screen readers detect and announce the modal content.
  3. VoiceOver on Safari should read the modal as a dialog, allowing users to navigate smoothly.

🔻 Actual Behavior

  • The modal opens, but focus remains on the triggering button.
  • Safari's VoiceOver does not detect the modal as a new dialog.
  • Manually navigating is required for screen reader users to access the form.

⚙️ Steps to Reproduce

  1. Click the button to open the Typeform modal.
  2. Observe focus behavior (it does not shift inside the modal).
  3. Enable VoiceOver in Safari and notice that it does not announce the modal.
  4. Try navigating using the keyboard (Tab, Shift+Tab) and notice that focus is still outside.
@github-actions github-actions bot added the new Flag for new issues before someone replies label Feb 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new Flag for new issues before someone replies
Projects
None yet
Development

No branches or pull requests

1 participant