From fb537f8a82127af1b0cf23fc026a87fdd7ab24e6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 8 Aug 2024 17:52:33 -0400 Subject: [PATCH 1/6] docs(api): update keyboard navigation to use kbd element --- docs/api/accordion.md | 20 ++++----- docs/api/datetime.md | 36 ++++++++-------- docs/api/modal.md | 12 +++--- docs/api/picker.md | 20 ++++----- docs/api/popover.md | 37 ++++++++--------- docs/api/segment.md | 16 ++++---- docs/api/select.md | 44 +++++++++----------- versioned_docs/version-v6/api/accordion.md | 20 ++++----- versioned_docs/version-v6/api/datetime.md | 48 +++++++++++----------- versioned_docs/version-v6/api/modal.md | 8 ++-- versioned_docs/version-v6/api/popover.md | 30 +++++++------- versioned_docs/version-v6/api/segment.md | 16 ++++---- versioned_docs/version-v7/api/accordion.md | 20 ++++----- versioned_docs/version-v7/api/datetime.md | 48 +++++++++++----------- versioned_docs/version-v7/api/modal.md | 8 ++-- versioned_docs/version-v7/api/popover.md | 30 +++++++------- versioned_docs/version-v7/api/segment.md | 16 ++++---- 17 files changed, 212 insertions(+), 217 deletions(-) diff --git a/docs/api/accordion.md b/docs/api/accordion.md index f6cd737260c..7e4d33f324d 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -170,19 +170,19 @@ import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibili -### Keyboard Navigation +### Keyboard Interactions When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| `Home` | When focus is on an accordion header, moves focus to the first accordion header. | -| `End` | When focus is on an accordion header, moves focus to the last accordion header. | +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | ## Performance diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 7d8bb0be765..494e3dc226d 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -416,30 +416,30 @@ dates in JavaScript. ## Accessibility -### Keyboard Navigation +### Keyboard Interactions `ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does: -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Space` or `Enter` | Clicks the focusable element. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Space or Enter | Clicks the focusable element. | #### Date Grid -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `ArrowUp` | Moves focus to the same day of the previous week. | -| `ArrowDown` | Moves focus to the same day of the next week. | -| `ArrowRight` | Moves focus to the next day. | -| `ArrowLeft` | Moves focus to the previous day. | -| `Home` | Moves focus to the first day of the current week. | -| `End` | Moves focus to the last day of the current week. | -| `PageUp` | Changes the grid of dates to the previous month. | -| `PageDown` | Changes the grid of dates to the next month. | -| `Shift` + `PageUp` | Changes the grid of dates to the previous year. | -| `Shift` + `PageDown` | Changes the grid of dates to the next year. | +| Key | Description | +| -------------------------------------- | ------------------------------------------------- | +| ArrowUp | Moves focus to the same day of the previous week. | +| ArrowDown | Moves focus to the same day of the next week. | +| ArrowRight | Moves focus to the next day. | +| ArrowLeft | Moves focus to the previous day. | +| Home | Moves focus to the first day of the current week. | +| End | Moves focus to the last day of the current week. | +| PageUp | Changes the grid of dates to the previous month. | +| PageDown | Changes the grid of dates to the next month. | +| Shift + PageUp | Changes the grid of dates to the previous year. | +| Shift + PageDown | Changes the grid of dates to the next year. | #### Time, Month, and Year Wheels diff --git a/docs/api/modal.md b/docs/api/modal.md index bafa1f282f2..d8fb298ded3 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -98,7 +98,7 @@ Here's a simplified example illustrating how a child component can interact with import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss/child-state/index.md'; - + ## Card Modal Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property on `ion-modal`. @@ -170,7 +170,7 @@ Modals are presented at the root of your application so they overlay your entire `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: ::: -``` +``` ion-modal.stack-modal { --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); @@ -245,11 +245,11 @@ interface ModalCustomEvent extends CustomEvent { ## Accessibility -### Keyboard Navigation +### Keyboard Interactions -| Key | Function | -| ----- | ------------------- | -| `Esc` | Dismisses the modal | +| Key | Description | +| --------------- | ------------------- | +| Esc | Dismisses the modal | ### Labels diff --git a/docs/api/picker.md b/docs/api/picker.md index 397117cd6d3..888ec7e5286 100644 --- a/docs/api/picker.md +++ b/docs/api/picker.md @@ -48,7 +48,7 @@ Pickers can be displayed inside of overlays, such as `ion-modal` to create a pic import ModalExample from '@site/static/usage/v8/picker/modal/index.md'; - + ## Accessibility ### Screen Readers @@ -67,18 +67,18 @@ Picker supports navigation using a screen reader by implementing the [`slider` r The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. ::: -### Keyboard Navigation +### Keyboard Interactions Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `ArrowUp` | Scroll to the previous option. | -| `ArrowDown` | Scroll to the next option. | -| `PageUp` | Scroll up by more than one option. | -| `PageDown` | Scroll down by more than one option. | -| `Home` | Scroll to the first option. | -| `End` | Scroll to the last option. | +| Key | Description | +| -------------------- | ------------------------------------ | +| ArrowUp | Scroll to the previous option. | +| ArrowDown | Scroll to the next option. | +| PageUp | Scroll up by more than one option. | +| PageDown | Scroll down by more than one option. | +| Home | Scroll to the first option. | +| End | Scroll to the last option. | ## Properties diff --git a/docs/api/popover.md b/docs/api/popover.md index d57e258221c..7739c98e49a 100644 --- a/docs/api/popover.md +++ b/docs/api/popover.md @@ -34,7 +34,7 @@ Using a popover inline is useful when you do not want to explicitly wire up clic If you need fine grained control over when the popover is presented and dismissed, we recommend you use the `popoverController`. -### Angular +### Angular Since the component you passed in needs to be created when the popover is presented and destroyed when the popover is dismissed, we are unable to project the content using `` internally. Instead, we use `` which expects an `` to be passed in. As a result, when passing in your component you will need to wrap it in an ``: @@ -113,7 +113,7 @@ Regardless of what you choose for your reference point, you can position a popov ### Alignment -The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property. +The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property. ### Side and Alignment Demo @@ -172,7 +172,7 @@ interface PopoverOptions { enterAnimation?: AnimationBuilder; leaveAnimation?: AnimationBuilder; - + size?: PopoverSize; dismissOnSelect?: boolean; reference?: PositionReference; @@ -197,28 +197,27 @@ type PositionAlign = 'start' | 'center' | 'end'; ## Accessibility -### Keyboard Navigation +### Keyboard Interactions `ion-popover` has basic keyboard support for navigating between focusable elements inside of the popover. The following table details what each key does: -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Esc` | Closes the popover. | -| `Space` or `Enter` | Clicks the focusable element. | - +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover. | +| Space or Enter | Clicks the focusable element. | `ion-popover` has full arrow key support for navigating between `ion-item` elements with the `button` property. The most common use case for this is as a dropdown menu in a desktop-focused application. In addition to the basic keyboard support, the following table details arrow key support for dropdown menus: -| Key | Function | -| ------------------ | -------------------------------------------------------------- | -| `ArrowUp` | Moves focus to the previous focusable element. | -| `ArrowDown` | Moves focus to the next focusable element. | -| `Home` | Moves focus to the first focusable element. | -| `End` | Moves focus to the last focusable element. | -| `ArrowLeft` | When used in a child popover, closes the popover and returns focus to the parent popover. | -| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover. | +| Key | Description | +| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | +| ArrowUp | Moves focus to the previous focusable element. | +| ArrowDown | Moves focus to the next focusable element. | +| Home | Moves focus to the first focusable element. | +| End | Moves focus to the last focusable element. | +| ArrowLeft | When used in a child popover, closes the popover and returns focus to the parent popover. | +| Space, Enter, and ArrowRight | When focusing a trigger element, opens the associated popover. | ## Performance diff --git a/docs/api/segment.md b/docs/api/segment.md index 06d3d35ae3e..9fe74f7a326 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -66,17 +66,17 @@ import CSSProps from '@site/static/usage/v8/segment/theming/css-properties/index ## Accessibility -### Keyboard Navigation +### Keyboard Interactions The component has full keyboard support for navigating between and selecting `ion-segment-button` elements. By default, keyboard navigation will only focus `ion-segment-button` elements, but you can use the `selectOnFocus` property to ensure that they get selected on focus as well. The following table details what each key does: -| Key | Function | -| ------------------ | -------------------------------------------------------------- | -| `ArrowRight` | Focuses the next focusable element. | -| `ArrowLeft` | Focuses the previous focusable element. | -| `Home` | Focuses the first focusable element. | -| `End` | Focuses the last focusable element. | -| `Space` or `Enter` | Selects the element that is currently focused. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| ArrowRight | Focuses the next focusable element. | +| ArrowLeft | Focuses the previous focusable element. | +| Home | Focuses the first focusable element. | +| End | Focuses the last focusable element. | +| Space or Enter | Selects the element that is currently focused. | ## Interfaces diff --git a/docs/api/select.md b/docs/api/select.md index 4f6cd7fa937..d80fabaf5e4 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -295,31 +295,27 @@ These keyboard interactions apply to all `ion-select` elements when the followin - The select is focused. - The select is not disabled. -|Key|Description| -|----|----| -|Enter|Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option.| -|Space|Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option.| - +| Key | Description | +| --------------------- | ------------------------------------------------------------ | +| Enter | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | +| Space | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | #### Single Selection Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/). - These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover` elements when the overlay is presented and focused. -|Key|Description| -|----|----| -|ArrowDown|Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.| -|ArrowLeft|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| -|ArrowRight|Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.| -|ArrowUp|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| -|Enter|If an option is focused, it will select the option. Overlays **without** an 'OK' button will commit the value immediately, dismiss the overlay and return focus to the `ion-select` element.

If the 'OK' button is focused, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element.| -|Escape|Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element.| -|Space|If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing. If the overlay does not have an 'OK' button, the value will be committed immediately and the overlay will dismiss.| -|Tab|Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option.| - - +| Key | Description | +| --------------------- | ------------------------------------------------------------ | +| ArrowDown | Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option. | +| ArrowLeft | Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option. | +| ArrowRight | Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option. | +| ArrowUp | Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option. | +| Enter | If an option is focused, it will select the option. Overlays **without** an 'OK' button will commit the value immediately, dismiss the overlay and return focus to the `ion-select` element.

If the 'OK' button is focused, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element. | +| Escape | Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element. | +| Space | If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing. If the overlay does not have an 'OK' button, the value will be committed immediately and the overlay will dismiss. | +| Tab | Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option. | #### Multiple Selection @@ -327,12 +323,12 @@ Multiple selection keyboard interaction follows the [ARIA implementation pattern These keyboard interactions apply to `ion-alert` and `ion-popover` elements when the overlay is presented and multiple selection is enabled. -|Key|Description| -|----|----| -|Enter|When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element.| -|Escape|Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element.| -|Space|Selects or deselects the currently focused option. This does not deselect the other selected options. If the overlay does not have an 'OK' button, the value will be committed immediately.| -|Tab|Move focus to the next focusable element (cancel button, 'OK' button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option.| +| Key | Description | +| ------------------ | ------------------------------------------------------------ | +| Enter | When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element. | +| Escape | Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element. | +| Space | Selects or deselects the currently focused option. This does not deselect the other selected options. If the overlay does not have an 'OK' button, the value will be committed immediately. | +| Tab | Move focus to the next focusable element (cancel button, 'OK' button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option. | ## Properties diff --git a/versioned_docs/version-v6/api/accordion.md b/versioned_docs/version-v6/api/accordion.md index 5017a5b64e3..688adaad174 100644 --- a/versioned_docs/version-v6/api/accordion.md +++ b/versioned_docs/version-v6/api/accordion.md @@ -167,19 +167,19 @@ import AccessibilityAnimations from '@site/static/usage/v6/accordion/accessibili -### Keyboard Navigation +### Keyboard Interactions When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: -| Key | Function | -| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| `Home` | When focus is on an accordion header, moves focus to the first accordion header. | -| `End` | When focus is on an accordion header, moves focus to the last accordion header. | +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | ## Performance diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md index 7770a8b0e25..420cf4b7259 100644 --- a/versioned_docs/version-v6/api/datetime.md +++ b/versioned_docs/version-v6/api/datetime.md @@ -382,41 +382,41 @@ dates in JavaScript. ## Accessibility -### Keyboard Navigation +### Keyboard Interactions `ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does: -| Key | Function | -| ------------------ | ---------------------------------------------- | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Space` or `Enter` | Clicks the focusable element. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Space or Enter | Clicks the focusable element. | #### Date Grid -| Key | Function | -| -------------------- | ------------------------------------------------- | -| `ArrowUp` | Moves focus to the same day of the previous week. | -| `ArrowDown` | Moves focus to the same day of the next week. | -| `ArrowRight` | Moves focus to the next day. | -| `ArrowLeft` | Moves focus to the previous day. | -| `Home` | Moves focus to the first day of the current week. | -| `End` | Moves focus to the last day of the current week. | -| `PageUp` | Changes the grid of dates to the previous month. | -| `PageDown` | Changes the grid of dates to the next month. | -| `Shift` + `PageUp` | Changes the grid of dates to the previous year. | -| `Shift` + `PageDown` | Changes the grid of dates to the next year. | +| Key | Description | +| -------------------------------------- | ------------------------------------------------- | +| ArrowUp | Moves focus to the same day of the previous week. | +| ArrowDown | Moves focus to the same day of the next week. | +| ArrowRight | Moves focus to the next day. | +| ArrowLeft | Moves focus to the previous day. | +| Home | Moves focus to the first day of the current week. | +| End | Moves focus to the last day of the current week. | +| PageUp | Changes the grid of dates to the previous month. | +| PageDown | Changes the grid of dates to the next month. | +| Shift + PageUp | Changes the grid of dates to the previous year. | +| Shift + PageDown | Changes the grid of dates to the next year. | #### Time, Month, and Year Wheels When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused. -| Key | Function | -| ----------- | ---------------------------- | -| `ArrowUp` | Scroll to the previous item. | -| `ArrowDown` | Scroll to the next item. | -| `Home` | Scroll to the first item. | -| `End` | Scroll to the last item. | +| Key | Function | +| -------------------- | ---------------------------- | +| ArrowUp | Scroll to the previous item. | +| ArrowDown | Scroll to the next item. | +| Home | Scroll to the first item. | +| End | Scroll to the last item. | ## Interfaces diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md index f7fb937e656..0130d4e1eba 100644 --- a/versioned_docs/version-v6/api/modal.md +++ b/versioned_docs/version-v6/api/modal.md @@ -225,11 +225,11 @@ interface ModalCustomEvent extends CustomEvent { ## Accessibility -### Keyboard Navigation +### Keyboard Interactions -| Key | Function | -| ----- | ------------------- | -| `Esc` | Dismisses the modal | +| Key | Description | +| --------------- | ------------------- | +| Esc | Dismisses the modal | ### Labels diff --git a/versioned_docs/version-v6/api/popover.md b/versioned_docs/version-v6/api/popover.md index 3678c58a46a..79caca1d999 100644 --- a/versioned_docs/version-v6/api/popover.md +++ b/versioned_docs/version-v6/api/popover.md @@ -195,27 +195,27 @@ type PositionAlign = 'start' | 'center' | 'end'; ## Accessibility -### Keyboard Navigation +### Keyboard Interactions `ion-popover` has basic keyboard support for navigating between focusable elements inside of the popover. The following table details what each key does: -| Key | Function | -| ------------------ | ---------------------------------------------- | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Esc` | Closes the popover. | -| `Space` or `Enter` | Clicks the focusable element. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover. | +| Space or Enter | Clicks the focusable element. | `ion-popover` has full arrow key support for navigating between `ion-item` elements with the `button` property. The most common use case for this is as a dropdown menu in a desktop-focused application. In addition to the basic keyboard support, the following table details arrow key support for dropdown menus: -| Key | Function | -| ---------------------------------- | ----------------------------------------------------------------------------------------- | -| `ArrowUp` | Moves focus to the previous focusable element. | -| `ArrowDown` | Moves focus to the next focusable element. | -| `Home` | Moves focus to the first focusable element. | -| `End` | Moves focus to the last focusable element. | -| `ArrowLeft` | When used in a child popover, closes the popover and returns focus to the parent popover. | -| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover. | +| Key | Description | +| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | +| ArrowUp | Moves focus to the previous focusable element. | +| ArrowDown | Moves focus to the next focusable element. | +| Home | Moves focus to the first focusable element. | +| End | Moves focus to the last focusable element. | +| ArrowLeft | When used in a child popover, closes the popover and returns focus to the parent popover. | +| Space, Enter, and ArrowRight | When focusing a trigger element, opens the associated popover. | ## Performance diff --git a/versioned_docs/version-v6/api/segment.md b/versioned_docs/version-v6/api/segment.md index 971b3b6a460..c3b27e035f4 100644 --- a/versioned_docs/version-v6/api/segment.md +++ b/versioned_docs/version-v6/api/segment.md @@ -65,17 +65,17 @@ import CSSProps from '@site/static/usage/v6/segment/theming/css-properties/index ## Accessibility -### Keyboard Navigation +### Keyboard Interactions The component has full keyboard support for navigating between and selecting `ion-segment-button` elements. By default, keyboard navigation will only focus `ion-segment-button` elements, but you can use the `selectOnFocus` property to ensure that they get selected on focus as well. The following table details what each key does: -| Key | Function | -| ------------------ | ---------------------------------------------- | -| `ArrowRight` | Focuses the next focusable element. | -| `ArrowLeft` | Focuses the previous focusable element. | -| `Home` | Focuses the first focusable element. | -| `End` | Focuses the last focusable element. | -| `Space` or `Enter` | Selects the element that is currently focused. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| ArrowRight | Focuses the next focusable element. | +| ArrowLeft | Focuses the previous focusable element. | +| Home | Focuses the first focusable element. | +| End | Focuses the last focusable element. | +| Space or Enter | Selects the element that is currently focused. | ## Interfaces diff --git a/versioned_docs/version-v7/api/accordion.md b/versioned_docs/version-v7/api/accordion.md index a2b1c4db072..3f99b24c680 100644 --- a/versioned_docs/version-v7/api/accordion.md +++ b/versioned_docs/version-v7/api/accordion.md @@ -173,19 +173,19 @@ import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibili -### Keyboard Navigation +### Keyboard Interactions When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: -| Key | Function | -| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| `Home` | When focus is on an accordion header, moves focus to the first accordion header. | -| `End` | When focus is on an accordion header, moves focus to the last accordion header. | +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | ## Performance diff --git a/versioned_docs/version-v7/api/datetime.md b/versioned_docs/version-v7/api/datetime.md index 64751a64c78..c43504d58fd 100644 --- a/versioned_docs/version-v7/api/datetime.md +++ b/versioned_docs/version-v7/api/datetime.md @@ -418,41 +418,41 @@ dates in JavaScript. ## Accessibility -### Keyboard Navigation +### Keyboard Interactions `ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does: -| Key | Function | -| ------------------ | ---------------------------------------------- | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Space` or `Enter` | Clicks the focusable element. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Space or Enter | Clicks the focusable element. | #### Date Grid -| Key | Function | -| -------------------- | ------------------------------------------------- | -| `ArrowUp` | Moves focus to the same day of the previous week. | -| `ArrowDown` | Moves focus to the same day of the next week. | -| `ArrowRight` | Moves focus to the next day. | -| `ArrowLeft` | Moves focus to the previous day. | -| `Home` | Moves focus to the first day of the current week. | -| `End` | Moves focus to the last day of the current week. | -| `PageUp` | Changes the grid of dates to the previous month. | -| `PageDown` | Changes the grid of dates to the next month. | -| `Shift` + `PageUp` | Changes the grid of dates to the previous year. | -| `Shift` + `PageDown` | Changes the grid of dates to the next year. | +| Key | Description | +| -------------------------------------- | ------------------------------------------------- | +| ArrowUp | Moves focus to the same day of the previous week. | +| ArrowDown | Moves focus to the same day of the next week. | +| ArrowRight | Moves focus to the next day. | +| ArrowLeft | Moves focus to the previous day. | +| Home | Moves focus to the first day of the current week. | +| End | Moves focus to the last day of the current week. | +| PageUp | Changes the grid of dates to the previous month. | +| PageDown | Changes the grid of dates to the next month. | +| Shift + PageUp | Changes the grid of dates to the previous year. | +| Shift + PageDown | Changes the grid of dates to the next year. | #### Time, Month, and Year Wheels When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused. -| Key | Function | -| ----------- | ---------------------------- | -| `ArrowUp` | Scroll to the previous item. | -| `ArrowDown` | Scroll to the next item. | -| `Home` | Scroll to the first item. | -| `End` | Scroll to the last item. | +| Key | Function | +| -------------------- | ---------------------------- | +| ArrowUp | Scroll to the previous item. | +| ArrowDown | Scroll to the next item. | +| Home | Scroll to the first item. | +| End | Scroll to the last item. | ## Interfaces diff --git a/versioned_docs/version-v7/api/modal.md b/versioned_docs/version-v7/api/modal.md index ea4d4fb7dd7..0a4c4a55eed 100644 --- a/versioned_docs/version-v7/api/modal.md +++ b/versioned_docs/version-v7/api/modal.md @@ -249,11 +249,11 @@ interface ModalCustomEvent extends CustomEvent { ## Accessibility -### Keyboard Navigation +### Keyboard Interactions -| Key | Function | -| ----- | ------------------- | -| `Esc` | Dismisses the modal | +| Key | Description | +| --------------- | ------------------- | +| Esc | Dismisses the modal | ### Labels diff --git a/versioned_docs/version-v7/api/popover.md b/versioned_docs/version-v7/api/popover.md index c3d7044d97c..8b462803961 100644 --- a/versioned_docs/version-v7/api/popover.md +++ b/versioned_docs/version-v7/api/popover.md @@ -195,27 +195,27 @@ type PositionAlign = 'start' | 'center' | 'end'; ## Accessibility -### Keyboard Navigation +### Keyboard Interactions `ion-popover` has basic keyboard support for navigating between focusable elements inside of the popover. The following table details what each key does: -| Key | Function | -| ------------------ | ---------------------------------------------- | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Esc` | Closes the popover. | -| `Space` or `Enter` | Clicks the focusable element. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover. | +| Space or Enter | Clicks the focusable element. | `ion-popover` has full arrow key support for navigating between `ion-item` elements with the `button` property. The most common use case for this is as a dropdown menu in a desktop-focused application. In addition to the basic keyboard support, the following table details arrow key support for dropdown menus: -| Key | Function | -| ---------------------------------- | ----------------------------------------------------------------------------------------- | -| `ArrowUp` | Moves focus to the previous focusable element. | -| `ArrowDown` | Moves focus to the next focusable element. | -| `Home` | Moves focus to the first focusable element. | -| `End` | Moves focus to the last focusable element. | -| `ArrowLeft` | When used in a child popover, closes the popover and returns focus to the parent popover. | -| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover. | +| Key | Description | +| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | +| ArrowUp | Moves focus to the previous focusable element. | +| ArrowDown | Moves focus to the next focusable element. | +| Home | Moves focus to the first focusable element. | +| End | Moves focus to the last focusable element. | +| ArrowLeft | When used in a child popover, closes the popover and returns focus to the parent popover. | +| Space, Enter, and ArrowRight | When focusing a trigger element, opens the associated popover. | ## Performance diff --git a/versioned_docs/version-v7/api/segment.md b/versioned_docs/version-v7/api/segment.md index a03d62b86da..b9aae88a547 100644 --- a/versioned_docs/version-v7/api/segment.md +++ b/versioned_docs/version-v7/api/segment.md @@ -65,17 +65,17 @@ import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index ## Accessibility -### Keyboard Navigation +### Keyboard Interactions The component has full keyboard support for navigating between and selecting `ion-segment-button` elements. By default, keyboard navigation will only focus `ion-segment-button` elements, but you can use the `selectOnFocus` property to ensure that they get selected on focus as well. The following table details what each key does: -| Key | Function | -| ------------------ | ---------------------------------------------- | -| `ArrowRight` | Focuses the next focusable element. | -| `ArrowLeft` | Focuses the previous focusable element. | -| `Home` | Focuses the first focusable element. | -| `End` | Focuses the last focusable element. | -| `Space` or `Enter` | Selects the element that is currently focused. | +| Key | Description | +| ------------------------------------ | ---------------------------------------------- | +| ArrowRight | Focuses the next focusable element. | +| ArrowLeft | Focuses the previous focusable element. | +| Home | Focuses the first focusable element. | +| End | Focuses the last focusable element. | +| Space or Enter | Selects the element that is currently focused. | ## Interfaces From 3e387e102172f9fef44fd2e76e3f7022dc2c70dd Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 8 Aug 2024 17:54:51 -0400 Subject: [PATCH 2/6] style: consistent spacing --- docs/api/select.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/select.md b/docs/api/select.md index d80fabaf5e4..7f74734bde9 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -295,8 +295,8 @@ These keyboard interactions apply to all `ion-select` elements when the followin - The select is focused. - The select is not disabled. -| Key | Description | -| --------------------- | ------------------------------------------------------------ | +| Key | Description | +| ------------------ | ------------------------------------------------------------ | | Enter | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | | Space | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | From 52cbbc0acb242380324e1bd27d3ee6443f7ea678 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 8 Aug 2024 18:13:58 -0400 Subject: [PATCH 3/6] style: lint --- versioned_docs/version-v6/api/accordion.md | 18 +++++++++--------- versioned_docs/version-v6/api/modal.md | 6 +++--- versioned_docs/version-v7/api/accordion.md | 18 +++++++++--------- versioned_docs/version-v7/api/modal.md | 6 +++--- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/versioned_docs/version-v6/api/accordion.md b/versioned_docs/version-v6/api/accordion.md index 688adaad174..0743cbd0d1f 100644 --- a/versioned_docs/version-v6/api/accordion.md +++ b/versioned_docs/version-v6/api/accordion.md @@ -171,15 +171,15 @@ import AccessibilityAnimations from '@site/static/usage/v6/accordion/accessibili When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: -| Key | Description | -| ------------------------------------ | ------------------------------------------------------------ | -| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| Home | When focus is on an accordion header, moves focus to the first accordion header. | -| End | When focus is on an accordion header, moves focus to the last accordion header. | +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | ## Performance diff --git a/versioned_docs/version-v6/api/modal.md b/versioned_docs/version-v6/api/modal.md index 0130d4e1eba..7bf563fa9c0 100644 --- a/versioned_docs/version-v6/api/modal.md +++ b/versioned_docs/version-v6/api/modal.md @@ -227,9 +227,9 @@ interface ModalCustomEvent extends CustomEvent { ### Keyboard Interactions -| Key | Description | -| --------------- | ------------------- | -| Esc | Dismisses the modal | +| Key | Description | +| -------------- | ------------------- | +| Esc | Dismisses the modal | ### Labels diff --git a/versioned_docs/version-v7/api/accordion.md b/versioned_docs/version-v7/api/accordion.md index 3f99b24c680..47528bcef02 100644 --- a/versioned_docs/version-v7/api/accordion.md +++ b/versioned_docs/version-v7/api/accordion.md @@ -177,15 +177,15 @@ import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibili When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: -| Key | Description | -| ------------------------------------ | ------------------------------------------------------------ | -| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| Home | When focus is on an accordion header, moves focus to the first accordion header. | -| End | When focus is on an accordion header, moves focus to the last accordion header. | +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | ## Performance diff --git a/versioned_docs/version-v7/api/modal.md b/versioned_docs/version-v7/api/modal.md index 0a4c4a55eed..a3e661af9b4 100644 --- a/versioned_docs/version-v7/api/modal.md +++ b/versioned_docs/version-v7/api/modal.md @@ -251,9 +251,9 @@ interface ModalCustomEvent extends CustomEvent { ### Keyboard Interactions -| Key | Description | -| --------------- | ------------------- | -| Esc | Dismisses the modal | +| Key | Description | +| -------------- | ------------------- | +| Esc | Dismisses the modal | ### Labels From 5928dcd0a666404e443a19f577c7be9bcaf4f00a Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 8 Aug 2024 18:25:33 -0400 Subject: [PATCH 4/6] docs(item): document the keyboard interactions for item --- docs/api/item.md | 47 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/docs/api/item.md b/docs/api/item.md index f9382a65cc9..f933d67532a 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -42,7 +42,7 @@ Supporting visuals are decorative icons or other adornments for an item. Common If a visual is required to interact with the item, such as an icon button, then the visual is an [action](#actions) not a supporting visual. -If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional sentences to a Note at the bottom of the list. Adding the item to its own list makes it clear which item the text is associated with.} doText="Move long text outside of the list" doNotText="Don't try to fit long text in an item" @@ -82,7 +82,7 @@ import Text from '@site/static/usage/v8/item/content-types/text/index.md'; Metadata provides additional context for an item such as status text or counts. Components like [Badge](./badge) or [Note](./note) are great ways of showing metadata. -} /> -nested interactives which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. -Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.} doText={<>Use an Item Sliding to reveal multiple actions by swiping on the Item.} doNotText="Don't put more than 2 actions within an Item." @@ -130,7 +130,7 @@ import Actions from '@site/static/usage/v8/item/content-types/actions/index.md'; Controls are form components such as checkboxes, inputs, radios, and more. Each item in a list should have at most two controls due to screen space constraints. -Metadata such as helper text or character counts should not be used on form controls in list views. If such metadata is needed, the form control should be placed outside of a list. Filled Inputs are a great way of visually defining the input container outside of a list.} doText="Place inputs with metadata outside of the list." doNotText="Don't put metadata for inputs in the list." @@ -138,7 +138,7 @@ Controls are form components such as checkboxes, inputs, radios, and more. Each doNotImage={There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with.} /> -Alternatively, the metadata can be placed in a Note at the bottom of the list.} doText="Place metadata for inputs at the end of a list." doNotText="Don't put metadata for inputs in the list." @@ -146,7 +146,7 @@ Controls are form components such as checkboxes, inputs, radios, and more. Each doNotImage={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} /> -Items should typically have no more than two controls. If you need more controls, consider adding the additional controls in a Modal that is accessible from the item.} doText="Move additional controls to a submenu accessible from the item." doNotText="Don't use more than two controls within an item." @@ -245,6 +245,37 @@ The following guidelines will help ensure your list items are easy to understand 3. Items should never render [nested interactives](https://dequeuniversity.com/rules/axe/4.4/nested-interactive). Screen readers are unable to select the correct interactive element when nested interactives are used. For example, avoid placing a button inside of an `ion-item` that has `button="true"`. 4. Use [content types](#content-types) correctly. The Item component is designed to be a row in a [List](./list) and should not be used as a general purpose container. +## Accessibility + +### Keyboard Interactions + +An `` has the following keyboard interactions when any of these conditions are met: +- The `button` property is set to `"true"`, rendering a native `