From 01181d474af5ce1d4b4645dbac52fef336666dce Mon Sep 17 00:00:00 2001 From: Devon Persing Date: Thu, 25 Apr 2019 14:03:41 -0700 Subject: [PATCH 1/2] Add a11y documentation for the badge component --- src/components/Badge/README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md index 5d2c6198c28..111b3624ea1 100644 --- a/src/components/Badge/README.md +++ b/src/components/Badge/README.md @@ -265,3 +265,31 @@ Use to indicate when a given task has been completed. For example, when merchant ## Related components - To represent an interactive list of categories provided by merchants, [use tags](/components/forms/tag) + +--- + +## 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/) + + + + + +Badges that convey information with icons or color include text provided by the [visually hidden component](/components/titles-and-text/visually-hidden#navigation). This text is read out by assistive technologies like screen readers so that merchants with vision issues can access the meaning of the badge in context. + + From 99c9b4296f3cb6b556f483675a486fe458414d52 Mon Sep 17 00:00:00 2001 From: Devon Persing Date: Thu, 25 Apr 2019 14:11:07 -0700 Subject: [PATCH 2/2] Add entry for documentation change --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 57fd8fb0959..608f376e7e7 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -30,6 +30,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Added accessibility guidance for `Heading` and `Subheading`. ([#1351](https://github.com/Shopify/polaris-react/pull/1351)) - Added accessibility documentation for `List` and `Stack`. ([#1353](https://github.com/Shopify/polaris-react/pull/1353)) - Added accessibility guidance for `DisplayText`. ([#1354](https://github.com/Shopify/polaris-react/pull/1354)) +- Added accessibility documentation for `Badge`. ([#1364](https://github.com/Shopify/polaris-react/pull/1364)) ### Development workflow