Skip to content

Commit 41e0a06

Browse files
committed
Merge branch 'main' of github.com:ionic-team/ionic-docs
# Conflicts: # docs/api/datetime.md # docs/api/fab.md # docs/api/title.md
2 parents 9b6487c + 71ae5e6 commit 41e0a06

File tree

24 files changed

+876
-463
lines changed

24 files changed

+876
-463
lines changed

docs/api/content.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md';
5454

5555
スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
5656

57+
The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key.
58+
5759
import Fixed from '@site/static/usage/v8/content/fixed/index.md';
5860

5961
<Fixed />

docs/api/datetime.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -443,14 +443,7 @@ JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使う
443443

444444
#### 時刻、月、年のホイール
445445

446-
タイムホイールピッカーを使用する場合、列がフォーカスされているときに、数字キーで時、分の値を選択することができます。
447-
448-
| Key | Function |
449-
| ------------------ | ------------------------------------------------------------ |
450-
| `ArrowUp` | Scroll to the previous item. |
451-
| `ArrowDown` | Scroll to the next item. |
452-
| `Home` | Scroll to the first item. |
453-
| `End` | Scroll to the last item. |
446+
Datetimeのホイールピッカーは、内部的に [Picker](./picker) を使用しています。ホイールピッカーのアクセシビリティ機能の詳細については、 [ピッカー アクセシビリティ](./picker#accessibility) を参照してください。
454447

455448
## Interfaces
456449

docs/api/fab.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,16 @@ import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md';
6767

6868
<SafeArea />
6969

70+
### 無限リストとの相対関係
71+
72+
無限にスクロールするリストなど、ビューに多くのインタラクティブ要素が含まれるシナリオでは、フローティングアクションボタン(FAB)がDOM内のすべてのアイテムの下に配置されていると、ユーザーがフローティングアクションボタンに移動するのが難しい場合があります。
73+
74+
[Content](./content)`fixedSlotPlacement` プロパティを `before` に設定することで、FABはDOM内のメインコンテンツの前に配置されます。これにより、他のインタラクティブ要素がフォーカスを受ける前にFABがキーボードフォーカスを受けるようになり、ユーザがFABにアクセスしやすくなります。
75+
76+
import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md';
77+
78+
<BeforeContent />
79+
7080
## ボタンサイズ
7181

7282
メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。

docs/api/picker.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,37 @@ import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index.
4848
import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
4949

5050
<ModalExample />
51+
52+
## Accessibility
53+
54+
### Screen Readers
55+
56+
Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
57+
58+
| Gesture | Function |
59+
| - | - |
60+
| Swipe Left | Move focus to the previous Picker Column. |
61+
| Swipe Right | Move focus to the next Picker Column. |
62+
| Swipe Up | Select the next option in the Picker Column. |
63+
| Swipe Down | Select the previous option in the Picker Column. |
64+
| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
65+
66+
:::caution
67+
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.
68+
:::
69+
70+
### Keyboard Navigation
71+
72+
Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
73+
74+
| Key | Function |
75+
| ------------------ | ------------------------------------------------------------ |
76+
| `ArrowUp` | Scroll to the previous option. |
77+
| `ArrowDown` | Scroll to the next option. |
78+
| `PageUp` | Scroll up by more than one option. |
79+
| `PageDown` | Scroll down by more than one option. |
80+
| `Home` | Scroll to the first option. |
81+
| `End` | Scroll to the last option. |
5182

5283
## プロパティ
5384
<Props />

docs/api/title.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,13 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsibl
5353

5454
### 見出し
5555

56-
見出しを作成する場合、一般的には [セマンティック見出し要素(h1-h6)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) を使うことをお勧めします。しかし、支援技術によって特定の見出しとして扱われるようにTitleを更新する必要がある場合があります。例えば、ビューの一番上にTitleがある場合、これをレベル1の見出しと見なしたいかもしれません。
57-
これを実現するために、開発者はTitleで [`heading` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role) を使用する必要があります。これにより、Titleが見出しの一種であることを支援技術に示すことができます。そこから、開発者は [`aria-level`属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level) を使用して見出しレベルを設定する必要があります。
58-
例えば、Titleを`h1`要素のように動作させたい場合、Titleに`role="heading"``aria-level="1"`を設定します。
59-
複数のTitle要素をセマンティック見出し要素と組み合わせてビュー上で使用することができるため、Ionicは自動的にTitleの`role``aria-level`を設定しません。これを処理するのは開発者の責任です。
56+
見出しを作成する場合、一般的には[セマンティック見出し要素(h1-h6)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)を使うことをお勧めします。しかし、支援技術によって特定の見出しとして扱われるようにTitleを更新する必要がある場合があります。例えば、ビューの一番上にTitleがある場合、これをレベル1の見出しと見なしたいかもしれません。
57+
58+
これを実現するために、開発者はTitleで[`heading` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role)を使用する必要があります。これにより、Titleが見出しの一種であることを支援技術に示すことができます。そこから、開発者は[`aria-level`属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level)を使用して見出しレベルを設定する必要があります。
59+
60+
例えば、Titleを`h1`要素のように動作させたい場合、Titleに`role="heading"``aria-level="1"`を設定します。これは[Focus Manager](../developing/managing-focus#assistive-technology-focus-management)を使用するときに必要です。
61+
62+
複数のTitle要素をセマンティック見出し要素と組み合わせてビューで使用することができるため、Ionicは自動的にTitleの`role``aria-level`を設定しません。これを処理するのは開発者の責任です。
6063

6164
## Theming
6265

0 commit comments

Comments
 (0)