docs(a11y): Adding accessibility sections to datepicker, menu, slide … #6710

tinayuangao · 2017-08-29T23:21:55Z

…toggle, slider, snackbar and toolbar

kara

One nit, otherwise LGTM

kara · 2017-08-29T23:26:31Z

src/lib/snack-bar/snack-bar.md

@@ -72,3 +72,7 @@ export class MessageArchivedComponent {
  constructor(@Inject(MD_SNACK_BAR_DATA) public data: any) { }
 }
 ```
+### Accessibility
+A Snackbar automatically goes away after a short time, so you can't count on the user seeing the


Nit: To be consistent with the rest of the doc, use snack-bar instead of Snackbar ?

Changed to snack-bar. Thanks for review.

kara · 2017-08-29T23:35:47Z

LGTM

jelbourn · 2017-08-30T01:33:55Z

src/lib/datepicker/datepicker.md

@@ -228,3 +228,6 @@ application root module.
 })
 export class MyApp {}
 ```
+### Accessibility
+The input box for datepicker should have a placeholder or be given a meaningful label via


I'd like to expand this to describe what the datepicker does in general (input with aria-haspopup that triggers a role="dialog") along with the keyboard shortcuts, but that can go in another PR.

jelbourn · 2017-08-30T01:34:58Z

src/lib/datepicker/datepicker.md

@@ -228,3 +228,6 @@ application root module.
 })
 export class MyApp {}
 ```
+### Accessibility
+The input box for datepicker should have a placeholder or be given a meaningful label via
+`aria-label` or `aria-labelledby`.


We should mention that MdDatepickerIntl includes strings that are used for aria-labels.

jelbourn · 2017-08-30T01:38:39Z

src/lib/snack-bar/snack-bar.md

@@ -72,3 +72,7 @@ export class MessageArchivedComponent {
  constructor(@Inject(MD_SNACK_BAR_DATA) public data: any) { }
 }
 ```
+### Accessibility
+A snack-bar automatically goes away after a short time, so you can't count on the user seeing the


I would phrase this as

Snack-bar messages are announced via an `aria-live` region. Focus is not moved to the snack-bar element, as this would be disruptive to a user in the middle of a workflow. For any action offered in the snack-bar, the application should offer the user an alternative way to perform the action (typically via keyboard shortcut).

jelbourn · 2017-08-30T01:41:19Z

src/lib/toolbar/toolbar.md

@@ -49,3 +49,7 @@ easily accomplished with `display: flex`:
 The color of a `<md-toolbar>` can be changed by using the `color` property. By default, toolbars
 use a neutral background color based on the current theme (light or dark). This can be changed to 
 `'primary'`, `'accent'`, or `'warn'`.  
+
+### Accessibility
+Toolbar items without text or labels should be given a meaningful label via `aria-label` or


I think this isn't quite right. Similar to list and grid-list, we treat toolbar as decorative-only by default. Generally, the toolbar is used as a header where role="header" would be appropriate.

Only if the use-case of the toolbar match that of role="toolbar", the user should add the role and an appropriate label.

crisbeto

LGTM

tinayuangao · 2017-08-30T17:26:28Z

Comments addressed. Please take another look. Thanks!

jelbourn · 2017-08-30T17:24:27Z

src/lib/datepicker/datepicker.md

+
+#### Keyboard shortcuts
+The keyboard shortcuts to handle datepicker are:
+`ALT` + `DOWN_ARROR`: trigger calendar dialog


ARROR -> ARROW

jelbourn · 2017-08-30T17:29:33Z

src/lib/datepicker/datepicker.md

+should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or
+`MdDatepickerIntl`.
+
+#### Keyboard shortcuts


It would be good to put these in a table, e.g.

| Shortcut | Action | |----------------------|---------------------------| | `ALT` + `DOWN_ARROW` | Open the calendar pop-up | | `ESCAPE` | Close the calendar pop-up |

jelbourn · 2017-08-30T17:30:35Z

src/lib/datepicker/datepicker.md

+#### Keyboard shortcuts
+The keyboard shortcuts to handle datepicker are:
+
+`ALT` + `DOWN_ARROR`: trigger calendar dialog


ARROR -> ARROW

mmalerba · 2017-08-30T17:44:51Z

LGTM on datepicker and slider

tinayuangao · 2017-08-30T17:44:54Z

Put shortcuts in tables. Please take another look. Thanks!

jelbourn · 2017-08-30T17:44:45Z

src/lib/datepicker/datepicker.md

+| `LEFT_ARROW`         | Goes to previous day              |
+| `RIGHT_ARROW`        | Goes to next day                  |
+| `UP_ARROW`           | Goes to previous 7 days           |
+| `DOWN_ARROW`         | Goes to next 7 days               |


Goes -> Go for each of these

For up and down arrow, I'd say Go to same day in the next week

jelbourn · 2017-08-30T17:45:04Z

src/lib/datepicker/datepicker.md

+| `UP_ARROW`           | Goes to previous 7 days           |
+| `DOWN_ARROW`         | Goes to next 7 days               |
+| `HOME`               | Focus the first day of the month  |
+| `END`                | Focus the last day of the month   |


Why say Focus for home/end and Goes / Go everywhere else?

…toggle, slider, snackbar and toolbar

.

tinayuangao · 2017-08-30T18:11:17Z

Changed to Go to everywhere. Please take another look. Thanks!

jelbourn

LGTM

…ngular#6710)

angular-automatic-lock-bot · 2019-09-08T12:01:47Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

tinayuangao requested review from crisbeto, devversion, jelbourn, josephperrott, kara and mmalerba as code owners August 29, 2017 23:21

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Aug 29, 2017

kara approved these changes Aug 29, 2017

View reviewed changes

kara added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Aug 29, 2017

jelbourn reviewed Aug 30, 2017

View reviewed changes

jelbourn removed the action: merge The PR is ready for merge by the caretaker label Aug 30, 2017

crisbeto approved these changes Aug 30, 2017

View reviewed changes

jelbourn added the pr: merge safe label Aug 30, 2017

tinayuangao force-pushed the a11y-docs branch 2 times, most recently from e07db8d to 604e728 Compare August 30, 2017 17:25

jelbourn reviewed Aug 30, 2017

View reviewed changes

tinayuangao force-pushed the a11y-docs branch from 800faa0 to 1ff6b8c Compare August 30, 2017 17:42

jelbourn reviewed Aug 30, 2017

View reviewed changes

tinayuangao added 5 commits August 30, 2017 11:09

docs(a11y): Adding accessibility sections to datepicker, menu, slide …

36bf833

…toggle, slider, snackbar and toolbar

address comments

d61ae32

add docs for datepicker keyboard

665cf7a

use table for shortcuts

c3b5242

changes to go

1e7c679

.

tinayuangao force-pushed the a11y-docs branch from 2a0fb62 to 1e7c679 Compare August 30, 2017 18:09

jelbourn approved these changes Aug 31, 2017

View reviewed changes

jelbourn added the action: merge The PR is ready for merge by the caretaker label Aug 31, 2017

josephperrott approved these changes Aug 31, 2017

View reviewed changes

mmalerba approved these changes Aug 31, 2017

View reviewed changes

devversion approved these changes Sep 1, 2017

View reviewed changes

jelbourn merged commit 1b6b270 into angular:master Sep 1, 2017

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 5, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

d3f091a

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 5, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

f83cdcf

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 6, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

c3f4ade

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 12, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

803ef69

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 15, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

1de43c3

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Sep 29, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

c7d8cd1

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Oct 5, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

ff02aa8

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Oct 12, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

42342d6

…ngular#6710)

josephperrott pushed a commit to josephperrott/components that referenced this pull request Oct 16, 2017

docs(a11y): add accessibility sections to datepicker, menu, slide … (a…

6bc207a

…ngular#6710)

tinayuangao deleted the a11y-docs branch March 9, 2018 23:32

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(a11y): Adding accessibility sections to datepicker, menu, slide … #6710

docs(a11y): Adding accessibility sections to datepicker, menu, slide … #6710

tinayuangao commented Aug 29, 2017

kara left a comment

kara Aug 29, 2017

tinayuangao Aug 29, 2017

kara commented Aug 29, 2017

jelbourn Aug 30, 2017

jelbourn Aug 30, 2017

jelbourn Aug 30, 2017

jelbourn Aug 30, 2017

crisbeto left a comment

tinayuangao commented Aug 30, 2017

jelbourn Aug 30, 2017

jelbourn Aug 30, 2017

jelbourn Aug 30, 2017

mmalerba commented Aug 30, 2017

tinayuangao commented Aug 30, 2017

jelbourn Aug 30, 2017

jelbourn Aug 30, 2017

tinayuangao commented Aug 30, 2017

jelbourn left a comment

angular-automatic-lock-bot bot commented Sep 8, 2019

docs(a11y): Adding accessibility sections to datepicker, menu, slide … #6710

docs(a11y): Adding accessibility sections to datepicker, menu, slide … #6710

Conversation

tinayuangao commented Aug 29, 2017

kara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kara commented Aug 29, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto left a comment

Choose a reason for hiding this comment

tinayuangao commented Aug 30, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmalerba commented Aug 30, 2017

tinayuangao commented Aug 30, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tinayuangao commented Aug 30, 2017

jelbourn left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 8, 2019