Skip to content

Conversation

dpersing
Copy link

@dpersing dpersing commented Jun 5, 2019

WHY are these changes introduced?

Adds accessibility guidance for the form component, to appear in polaris-react docs and in the style guide.

WHAT is this pull request doing?

  • Adds accessibility information to the component README.md
  • Adds an entry to the documentation section of UNRELEASED.md

How to 🎩

  1. Check out master from polaris-styleguide
  2. In another Terminal tab or window, check out this branch from polaris-react and run the instructions for testing in a consuming project
  3. In the polaris-styleguide tab, run dev up && dev start
  4. View changes after examples and props: https://polaris.myshopify.io/components/forms/form (web only)

Screenshots

Web

Screenshot of the updated content

@dpersing dpersing requested a review from sadiesaurus June 5, 2019 23:07
@dpersing dpersing self-assigned this Jun 5, 2019
@BPScott BPScott temporarily deployed to polaris-react-pr-1636 June 5, 2019 23:07 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1636 June 5, 2019 23:08 Inactive

The form component wraps content in an HTML `<form>` element. This helps to support assistive technologies that use different interaction and browse modes.

By default, any buttons that you add to the form are given a `type` attribute set to `button`. Use the `submit` prop to set the `type` attribute to `submit` instead. The form can have only one submit button, and it must be at the end of the form.
Copy link
Member

Choose a reason for hiding this comment

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

Use the submit prop to set the type attribute to submit instead.

Here I'm unclear whether you mean the submit prop on Button or Form 🤔

Suggested change
By default, any buttons that you add to the form are given a `type` attribute set to `button`. Use the `submit` prop to set the `type` attribute to `submit` instead. The form can have only one submit button, and it must be at the end of the form.
Forms can have only one submit button and it must be at the end of the form. By default, all buttons contained by the form component are given a `type` attribute set to `button`. Set the `submit` prop on the button component to set its `type` attribute to `submit` instead.

Copy link
Author

@dpersing dpersing Jun 6, 2019

Choose a reason for hiding this comment

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

@chloerice Gotcha! Would this be clearer?

Forms can have only one submit button and it must be at the end of the form. By default, buttons added to the form are given a type attribute set to button to avoid conflicts. To make a button the submit button instead, set the submit prop on the button.

@BPScott BPScott requested a deployment to polaris-react-pr-1636 June 6, 2019 21:27 Abandoned
@dpersing dpersing merged commit 8aa4f9d into master Jun 6, 2019
@dpersing dpersing deleted the form-a11y-docs branch June 6, 2019 21:34
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.

4 participants