Skip to content

PopupButton does not properly manage focus in Safari #682

@hashkov-evncd

Description

@hashkov-evncd

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    newFlag for new issues before someone replies

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions