Skip to content

Commit

Permalink
[a11y] Add documentation for the badge component (#1364)
Browse files Browse the repository at this point in the history
* Add a11y documentation for the badge component
* Add entry for documentation change
  • Loading branch information
dpersing authored Apr 26, 2019
1 parent c3c68cc commit 47debe4
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 0 deletions.
1 change: 1 addition & 0 deletions UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
28 changes: 28 additions & 0 deletions src/components/Badge/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

<!-- content-for: android -->

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/)

<!-- /content-for -->

<!-- content-for: ios -->

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/)

<!-- /content-for -->

<!-- content-for: web -->

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.

<!-- /content-for -->

0 comments on commit 47debe4

Please sign in to comment.