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

[Form] Reorder form markup to prevent VisuallyHidden bug #5181

Merged
merged 3 commits into from
Feb 22, 2022

Conversation

emma-boardman
Copy link
Contributor

@emma-boardman emma-boardman commented Feb 15, 2022

WHY are these changes introduced?

The top: 0 CSS was removed from VisuallyHidden in Polaris v7.4.0.

In long forms that utilise the deprecated Sheet, the updated positioning of VisuallyHidden in a Form component scrolls the underlying Form out of view when the Sheet is opened.

In online-store-web, this scrolling was causing the Popover inside the AddMenuItem sheet to close immediately after opening.

Full context from support: https://shopify.slack.com/archives/C8RBQFF6U/p1644009960815369

📹 Media

Before

Screen.Recording.2022-02-15.at.17.21.57.mov

After

Screen.Recording.2022-02-15.at.17.06.04.mov

WHAT is this pull request doing?

  • reorders submitMarkup and children

🎩 checklist

  • Tested on mobile
  • Tested on [multiple browsers](MacOS: chrome, firefox, safari)
  • Tested for accessibility

@github-actions
Copy link
Contributor

github-actions bot commented Feb 15, 2022

size-limit report

Path Size
cjs 156.29 KB (0%)
esm 88.35 KB (-0.01% 🔽)
esnext 137.5 KB (0%)
css 36.54 KB (0%)

{submitMarkup}
{children}
Copy link
Contributor Author

@emma-boardman emma-boardman Feb 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change doesn't impact implicitSubmit functionality:

Screen.Recording.2022-02-15.at.16.45.39.mov

It also won't affect the order AT users encounter the markup - the VisuallyHidden button here is aria-hidden.

@emma-boardman emma-boardman marked this pull request as ready for review February 15, 2022 17:44
Copy link
Member

@alex-page alex-page left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it. Thank you @emma-boardman

@emma-boardman
Copy link
Contributor Author

@alex-page how do I get the Test (16.9.1) status check to pass? 🤔 It's been Expected — Waiting for status to be reported for a few hours now

Screenshot 2022-02-16 at 10 31 30

Copy link
Contributor

@alexandcote alexandcote left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@alex-page alex-page merged commit 684cf8d into main Feb 22, 2022
@alex-page alex-page deleted the reorder-form-implicitsubmit-markup branch February 22, 2022 19:29
@alex-page
Copy link
Member

@emma-boardman shipping this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants