-
Notifications
You must be signed in to change notification settings - Fork 131
Open
Labels
newFlag for new issues before someone repliesFlag for new issues before someone replies
Description
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
- When clicking the
PopupButton
, the Typeform modal should open. - Focus should automatically move into the modal, ensuring screen readers detect and announce the modal content.
- 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
- Click the button to open the Typeform modal.
- Observe focus behavior (it does not shift inside the modal).
- Enable VoiceOver in Safari and notice that it does not announce the modal.
- Try navigating using the keyboard (Tab, Shift+Tab) and notice that focus is still outside.
Metadata
Metadata
Assignees
Labels
newFlag for new issues before someone repliesFlag for new issues before someone replies