From fe2881de7d5f3005884069cebaa07253921e0185 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lazar=20Ljubenovi=C4=87?= Date: Fri, 22 Feb 2019 06:48:02 +0100 Subject: [PATCH] docs: normalize keyboard interaction headers and add escape key (#15241) Also normalized the sections a bit (titles, tenses, and usage of period). Fixes #15165 --- 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 394693eef8e..2342c6dec0c 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 d64e48c3b17..16a0949a501 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 afbf6b25027..ce5c6672e19 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 c3d05c3267c..3f0de3025c9 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 5ef4793f629..36e3e965b81 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 a180b28e743..662e1440f9f 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 `