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/item.md b/docs/api/item.md index f9382a65cc9..c357c0022a7 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 `