From 37d053f55d4d7b39b27959801606067a1fbaebe7 Mon Sep 17 00:00:00 2001 From: lazarljubenovic Date: Wed, 20 Feb 2019 08:45:12 +0100 Subject: [PATCH] docs: normalize keyboard interaction sections and add escape key --- src/cdk/stepper/stepper.md | 2 +- src/lib/autocomplete/autocomplete.md | 7 ++++--- src/lib/datepicker/datepicker.md | 2 +- src/lib/menu/menu.md | 3 ++- src/lib/stepper/stepper.md | 4 +++- src/lib/tabs/tabs.md | 2 +- 6 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/cdk/stepper/stepper.md b/src/cdk/stepper/stepper.md index 2cc43082e459..c1d62173494e 100644 --- a/src/cdk/stepper/stepper.md +++ b/src/cdk/stepper/stepper.md @@ -54,7 +54,7 @@ resetting it will call `reset` on the underlying form control which clears the v - RIGHT_ARROW: Focuses the next step header - ENTER, SPACE: Selects the step that the focus is currently on - TAB: Focuses the next tabbable element -- TAB+SHIFT: Focuses the previous tabbable element +- SHIFT+TAB: Focuses the previous tabbable element ### Accessibility The CDK stepper is treated as a tabbed view for accessibility purposes, so it is given diff --git a/src/lib/autocomplete/autocomplete.md b/src/lib/autocomplete/autocomplete.md index d64e48c3b172..16a0949a501e 100644 --- a/src/lib/autocomplete/autocomplete.md +++ b/src/lib/autocomplete/autocomplete.md @@ -112,9 +112,10 @@ autocomplete is attached to using the `matAutocompleteOrigin` directive together ``` ### Keyboard interaction -- DOWN_ARROW: Next option becomes active. -- UP_ARROW: Previous option becomes active. -- ENTER: Select currently active item. +- DOWN_ARROW: Next option becomes active +- UP_ARROW: Previous option becomes active +- ENTER: Selects currently active item +- ESCAPE: Closes the autocomplete panel ### Option groups `mat-option` can be collected into groups using the `mat-optgroup` element: diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index afbf6b250272..ce5c6672e19f 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -346,7 +346,7 @@ the native input and toggle button elements respectively, and they trigger a cal should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or `MatDatepickerIntl`. -#### Keyboard shortcuts +#### Keyboard interaction The datepicker supports the following keyboard shortcuts: diff --git a/src/lib/menu/menu.md b/src/lib/menu/menu.md index c3d05c3267c7..3f0de3025c95 100644 --- a/src/lib/menu/menu.md +++ b/src/lib/menu/menu.md @@ -137,8 +137,9 @@ with a different set of data, depending on the trigger that opened it: - DOWN_ARROW: Focuses the next menu item - UP_ARROW: Focuses previous menu item - RIGHT_ARROW: Opens the menu item's sub-menu -- LEFT_ARROW: Closes the current menu, if it is a sub-menu. +- LEFT_ARROW: Closes the current menu, if it is a sub-menu - ENTER: Activates the focused menu item +- ESCAPE: Closes the menu ### Accessibility Menu triggers or menu items without text or labels should be given a meaningful label via diff --git a/src/lib/stepper/stepper.md b/src/lib/stepper/stepper.md index 161cab099725..e864972ca751 100644 --- a/src/lib/stepper/stepper.md +++ b/src/lib/stepper/stepper.md @@ -234,9 +234,11 @@ The stepper can now show error states by simply providing the `showError` option ### Keyboard interaction - LEFT_ARROW: Focuses the previous step header - RIGHT_ARROW: Focuses the next step header +- HOME: Focuses the first step header +- END: Focuses the last step header - ENTER, SPACE: Selects the step that the focus is currently on - TAB: Focuses the next tabbable element -- TAB+SHIFT: Focuses the previous tabbable element +- SHIFT+TAB: Focuses the previous tabbable element ### Localizing labels Labels used by the stepper are provided through `MatStepperIntl`. Localization of these messages diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md index a180b28e7439..662e1440f9ff 100644 --- a/src/lib/tabs/tabs.md +++ b/src/lib/tabs/tabs.md @@ -126,7 +126,7 @@ Tabs without text or labels should be given a meaningful label via `aria-label` `aria-labelledby`. For `MatTabNav`, the `