docs(a11y): Adding accessibility sections to datepicker, menu, slide toggle, slider, snackbar and toolbar

Author: tinayuangao

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`.

src/lib/menu/menu.md

@@ -98,3 +98,7 @@ that should trigger the sub-menu:
 - <kbd>RIGHT_ARROW</kbd>: Opens the menu item's sub-menu
 - <kbd>LEFT_ARROW</kbd>: Closes the current menu, if it is a sub-menu.
 - <kbd>ENTER</kbd>: Activates the focused menu item
+
+### Accessibility
+Menu triggers or menu items without text or labels should be given a meaningful label via
+`aria-label` or `aria-labelledby`.

src/lib/slide-toggle/slide-toggle.md

@@ -22,3 +22,11 @@ and `ReactiveFormsModule`.
 ### Theming
 The color of a `<md-slide-toggle>` can be changed by using the `color` property. By default, 
 slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`.  
+
+### Accessibility
+The `<md-slide-toggle>` uses an internal `<input type="checkbox">` to provide an accessible
+experience. This internal checkbox receives focus and is automatically labelled by the text content
+of the `<md-slide-toggle>` element.
+
+Slide toggles without text or labels should be given a meaningful label via `aria-label` or
+`aria-labelledby`.

src/lib/slider/slider.md

@@ -85,3 +85,7 @@ The slider has the following keyboard bindings:
 | Page down   | Decrement the slider value by 10 steps.                                            |
 | End         | Set the value to the maximum possible.                                             |
 | Home        | Set the value to the minimum possible.                                             |
+
+### Accessibility
+Sliders without text or labels should be given a meaningful label via `aria-label` or
+`aria-labelledby`.

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
+message or having a chance to press the button. For this reason, you should consider offering an
+alternate way to perform any Snackbar action.

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
+`aria-labelledby`.