From 54158fdeaadebd6737cbeddfb1b63e9ed7b808df Mon Sep 17 00:00:00 2001 From: tinayuangao Date: Tue, 15 Aug 2017 14:50:18 -0700 Subject: [PATCH] =?UTF-8?q?docs(a11y):=20Add=20a11y=20docs=20to=20button,?= =?UTF-8?q?=20button=20toggle,=20checkbox,=20progress=20spinner/ba?= =?UTF-8?q?=E2=80=A6=20(#6402)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add a11y docs to button, button toggle, checkbox, progress spinner/bar, radio button and grid list * address comments * address comments * address comments * fix typo --- src/lib/button-toggle/button-toggle.md | 9 ++++++++- src/lib/button/button.md | 9 +++++++++ src/lib/checkbox/checkbox.md | 8 ++++++++ src/lib/grid-list/grid-list.md | 9 +++++++++ src/lib/progress-bar/progress-bar.md | 3 +++ src/lib/progress-spinner/progress-spinner.md | 3 +++ src/lib/radio/radio.md | 7 +++++++ 7 files changed, 47 insertions(+), 1 deletion(-) diff --git a/src/lib/button-toggle/button-toggle.md b/src/lib/button-toggle/button-toggle.md index 39e50322031..2d63576f1f8 100644 --- a/src/lib/button-toggle/button-toggle.md +++ b/src/lib/button-toggle/button-toggle.md @@ -15,8 +15,15 @@ mode the values of the the toggles are not used, the `md-button-toggle-group` do and `ngModel` is not supported. ### Accessibility -The button-toggles will present themselves as either checkboxes or radio-buttons based on the +The button-toggles will present themselves as either checkboxes or radio-buttons based on the presence of the `multiple` attribute. +For button toggles containing only icons, each button toggle should be given a meaningful label via +`aria-label` or `aria-labelledby`. + +For button toggle groups, each group should be given a meaningful label via `aria-label` or +`aria-labelledby`. + + ### Orientation The button-toggles can be rendered in a vertical orientation by adding the `vertical` attribute. diff --git a/src/lib/button/button.md b/src/lib/button/button.md index 19688037a60..7271f1ed8c7 100644 --- a/src/lib/button/button.md +++ b/src/lib/button/button.md @@ -31,3 +31,12 @@ to capitalize buttons automatically via `text-transform: uppercase`, because it certain locales. It is also worth noting that using ALL CAPS in the text itself causes issues for screen-readers, which will read the text character-by-character. We leave the decision of how to approach this to the consuming app. + +### Accessibility +Angular Material uses native `