You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -178,4 +178,4 @@ The Ionic documentation's `main` branch is deployed automatically and separately
178
178
179
179
This repo is licensed and managed separately from Ionic itself.
180
180
181
-
By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](../LICENSE) for the full license text.
181
+
By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](LICENSE) for the full license text.
|`Space` or `Enter`| When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
180
-
|`Tab`| Moves focus to the next focusable element. |
181
-
|`Shift` + `Tab`| Moves focus to the previous focusable element. |
182
-
|`Down Arrow`| - When focus is on an accordion header, moves focus to the next accordion header. <br />- When focus is on the last accordion header, moves focus to the first accordion header. |
183
-
|`Up Arrow`| - When focus is on an accordion header, moves focus to the previous accordion header. <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
184
-
|`Home`| When focus is on an accordion header, moves focus to the first accordion header. |
185
-
|`End`| When focus is on an accordion header, moves focus to the last accordion header. |
|<kbd>Space</kbd> or <kbd>Enter</kbd>| When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
180
+
|<kbd>Tab</kbd> | Moves focus to the next focusable element. |
181
+
|<kbd>Shift</kbd> + <kbd>Tab</kbd>| Moves focus to the previous focusable element. |
182
+
|<kbd>Down Arrow</kbd> | - When focus is on an accordion header, moves focus to the next accordion header. <br />- When focus is on the last accordion header, moves focus to the first accordion header. |
183
+
|<kbd>Up Arrow</kbd> | - When focus is on an accordion header, moves focus to the previous accordion header. <br />- When focus is on the first accordion header, moves focus to the last accordion header. |
184
+
|<kbd>Home</kbd> | When focus is on an accordion header, moves focus to the first accordion header. |
185
+
|<kbd>End</kbd> | When focus is on an accordion header, moves focus to the last accordion header. |
Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like <kbd>Tab</kbd>, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`.
32
+
33
+
import SetFocus from '@site/static/usage/v8/app/set-focus/index.md';
text={<>If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional sentences to a <a href={useBaseUrl('api/note')}>Note</a> at the bottom of the list. Adding the item to its own list makes it clear which item the text is associated with.</>}
65
65
doText="Move long text outside of the list"
66
66
doNotText="Don't try to fit long text in an item"
@@ -82,15 +82,15 @@ import Text from '@site/static/usage/v8/item/content-types/text/index.md';
text="Limit the amount of metadata you include to only the most relevant information."
87
87
doText="Add only the most important metadata"
88
88
doNotText="Don't add too much metadata as it can overwhelm or confuse the user."
89
89
doImage={<img alt="A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item." src={useBaseUrl('img/item/metadata-relevant-do.jpg')} />}
90
90
doNotImage={<img alt="A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today." src={useBaseUrl('img/item/metadata-relevant-do-not.jpg')} />}
91
91
/>
92
92
93
-
<BestPracticeFigure
93
+
<BestPracticeFigure
94
94
text="Developers should also consider how important the metadata is. Drawing attention to the metadata may be helpful for the user or it may distract them from the more important information depending on the use case."
95
95
doText="Prioritize the most important content."
96
96
cautionText="Prioritized metadata may distract from other important content."
@@ -112,7 +112,7 @@ import Metadata from '@site/static/usage/v8/item/content-types/metadata/index.md
text={<>Actions can be added by using the <a href={useBaseUrl('api/item-sliding')}>Item Sliding</a> 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.</>}
117
117
doText={<>Use an <a href={useBaseUrl('api/item-sliding')}>Item Sliding</a> to reveal multiple actions by swiping on the Item.</>}
118
118
doNotText="Don't put more than 2 actions within an Item."
@@ -130,23 +130,23 @@ import Actions from '@site/static/usage/v8/item/content-types/actions/index.md';
text={<>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. <a href={useBaseUrl('api/input#filled-inputs')}>Filled Inputs</a> are a great way of visually defining the input container outside of a list.</>}
135
135
doText="Place inputs with metadata outside of the list."
136
136
doNotText="Don't put metadata for inputs in the list."
137
137
doImage={<img alt="There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with." src={useBaseUrl('img/item/controls-metadata-list-do.jpg')} />}
138
138
doNotImage={<img alt="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." src={useBaseUrl('img/item/controls-metadata-list-do-not.jpg')} />}
139
139
/>
140
140
141
-
<BestPracticeFigure
141
+
<BestPracticeFigure
142
142
text={<>Alternatively, the metadata can be placed in a <a href={useBaseUrl('api/note')}>Note</a> at the bottom of the list.</>}
143
143
doText="Place metadata for inputs at the end of a list."
144
144
doNotText="Don't put metadata for inputs in the list."
145
145
doImage={<img alt="There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above." src={useBaseUrl('img/item/controls-metadata-do.jpg')} />}
146
146
doNotImage={<img alt="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." src={useBaseUrl('img/item/controls-metadata-do-not.jpg')} />}
147
147
/>
148
148
149
-
<BestPracticeFigure
149
+
<BestPracticeFigure
150
150
text={<>Items should typically have no more than two controls. If you need more controls, consider adding the additional controls in a <ahref="useBaseUrl('api/modal')">Modal</a> that is accessible from the item.</>}
151
151
doText="Move additional controls to a submenu accessible from the item."
152
152
doNotText="Don't use more than two controls within an item."
@@ -245,7 +245,38 @@ import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md
| <kbd>Tab</kbd> | Moves focus to the next focusable element. |
260
+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves focus to the previous focusable element. |
261
+
262
+
#### Button
263
+
264
+
When an `<ion-item>` renders a native `<button>` element, the keyboard interactions follow the same pattern as the [button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#keyboard_interactions):
| <kbd>Enter</kbd> | Activates the item, triggering its `click` event. If the item is within a form and has `type` set to `"submit"`, it submits the form. |
269
+
| <kbd>Space</kbd> | Activates the item, triggering its `click` event. Does not submit the form, even if the item `type` is `"submit"`. |
270
+
271
+
#### Anchor
272
+
273
+
When an `<ion-item>` renders a native `<a>` element, the keyboard interactions follow the same pattern as the [link role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role):
0 commit comments