From 25c693b1732d40fbe3277269315e327b3f80b2f7 Mon Sep 17 00:00:00 2001 From: Devon Persing Date: Wed, 5 Jun 2019 16:01:07 -0700 Subject: [PATCH 1/3] Adds a11y guidance for the component --- src/components/Form/README.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/src/components/Form/README.md b/src/components/Form/README.md index 8a9b1e2148c..39529eea70a 100644 --- a/src/components/Form/README.md +++ b/src/components/Form/README.md @@ -127,3 +127,37 @@ class FormExample extends React.Component { - To arrange fields within a form using standard spacing, [use the form layout component](/components/forms/form-layout) - To see all of the components that make up a form, [visit the form section](/components/forms/checkbox#navigation) of the component library + +--- + +## Accessibility + + + +See Material Design and development documentation about accessibility for Android: + +- [Accessible design on Android](https://material.io/design/usability/accessibility.html) +- [Accessible development on Android](https://developer.android.com/guide/topics/ui/accessibility/) + + + + + +See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS: + +- [Accessible design on iOS](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/accessibility/) +- [Accessible development on iOS](https://developer.apple.com/accessibility/ios/) + + + + + +The form component wraps content in an HTML `
` 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. + +### Keyboard support + +By default, the `implicitSubmit` prop is set to `true`. This allows merchants to submit the form with the enter/return key when focus is in any text field inside the form. This provides a shortcut for keyboard users. If this behavior doesn’t fit the form, then set the prop to `false`. + + From c188de3b5e8d2010680ed4905833b1bdb389bf54 Mon Sep 17 00:00:00 2001 From: Devon Persing Date: Wed, 5 Jun 2019 16:07:55 -0700 Subject: [PATCH 2/3] Adds documentation entry --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 969f46e88f9..43c6a8427b0 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -42,6 +42,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Fixed an accessibility issue in the `Collapsible` component example ([#1591](https://github.com/Shopify/polaris-react/pull/1591)) - Added accessibility documentation for the `RangeSlider` component ([#1630](https://github.com/Shopify/polaris-react/pull/1630)) - Added accessibility documentation for the `Collapsible` component ([#1631](https://github.com/Shopify/polaris-react/pull/1631)) +- Added accessibility documentation for the `Form` component ([#1636](https://github.com/Shopify/polaris-react/pull/1636)) ### Development workflow From e2e75159a601a8443b14af699c240625815c2af8 Mon Sep 17 00:00:00 2001 From: Devon Persing Date: Thu, 6 Jun 2019 10:51:50 -0700 Subject: [PATCH 3/3] Clarifies submit button implementation --- src/components/Form/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/README.md b/src/components/Form/README.md index 39529eea70a..1588c038006 100644 --- a/src/components/Form/README.md +++ b/src/components/Form/README.md @@ -154,7 +154,7 @@ See Apple’s Human Interface Guidelines and API documentation about accessibili The form component wraps content in an HTML `` 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. +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 (`type="submit"`), set the `submit` prop on the button. ### Keyboard support