diff --git a/.gitignore b/.gitignore index 4b10b69fe49..e34ae50b1dc 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ # Production /build /www +/i18n # Generated files .docusaurus diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cf3eb243153..6452724858e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -178,4 +178,4 @@ The Ionic documentation's `main` branch is deployed automatically and separately This repo is licensed and managed separately from Ionic itself. -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. +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. diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 878a46a3be4..96576a1b061 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -193,6 +193,10 @@ Developers can use the existing syntax for standalone component routing from Ang export class AppRoutingModule {} ``` +:::tip +If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone). +::: + To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). ## Live Example diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 9e8e633579f..836b717114a 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -101,7 +101,7 @@ The `ion-slides` component had additional styling that helped create a native lo ```css swiper-container { - --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc); + --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc); --swiper-pagination-color: var(--ion-color-primary, #0054e9); --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25); --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); diff --git a/docs/api/accordion.md b/docs/api/accordion.md index 96911389ff5..a60f352a68b 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -170,19 +170,19 @@ import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibili -### キーボードナビゲーション +### キーボードインタラクション `ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。 -| 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. | ## パフォーマンス diff --git a/docs/api/app.md b/docs/api/app.md index c62275d20cf..32602254b86 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -15,8 +15,7 @@ import Slots from '@ionic-internal/component-api/v8/app/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -AppはIonicアプリケーションのコンテナ要素です。プロジェクトごとに `` 要素は1つだけにしてください。アプリケーションには、menus, headers, content, footersなど、多くのIonicコンポーネントを含めることができます。オーバーレイコンポーネントは、表示されるときに `` に追加されます。 +AppはIonicアプリケーションのコンテナ要素です。1つのプロジェクトにつき``要素は1つだけです。アプリはメニュー、ヘッダー、コンテンツ、フッターなど多くのIonicコンポーネントを持つことができます。オーバーレイコンポーネントは表示時に `` に追加されます。 `ion-app`を使用すると、以下の動作が可能になります。 @@ -27,6 +26,13 @@ AppはIonicアプリケーションのコンテナ要素です。プロジェク * Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。 * Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。 +## Programmatic Focus + +Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like Tab, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`. + +import SetFocus from '@site/static/usage/v8/app/set-focus/index.md'; + + ## プロパティ diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 0667ac4c836..dc9a773ebf0 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -204,7 +204,7 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U ### 月と年の選択 -月と年の選択は、 `presentation` プロパティに `month-year` , `year-month` , `month` , または `year` を渡すことで行うことができます。 +月と年の選択は、 `presentation` プロパティに `month-year` , `month` , または `year` を渡すことで行うことができます。 この例では、 `month-year` を設定した datetime を示しています。 @@ -416,30 +416,30 @@ JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使う ## アクセシビリティ -### キーボードナビゲーション +### キーボードインタラクション `ion-datetime` は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。 -| 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. | #### 日付の表示 -| 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. | #### 時刻、月、年のホイール diff --git a/docs/api/input.md b/docs/api/input.md index e2b3c872289..7664fb62c33 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -83,9 +83,11 @@ import Clear from '@site/static/usage/v8/input/clear/index.md'; Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。 -`fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。 +Filled inputs をiOSで使うためには、inputの `mode` を `md` に設定する必要があります。 -Filled inputs can be used on iOS by setting Input's `mode` to `md`. +:::warning +Inputs that use `fill` should not be used in an `ion-item` due to styling conflicts between the components. +::: import Fill from '@site/static/usage/v8/input/fill/index.md'; @@ -160,7 +162,7 @@ In most cases, [Icon](./icon.md) components placed in these slots should have `a If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. ::: -import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md'; diff --git a/docs/api/item.md b/docs/api/item.md index 422e98aefb1..ae23c687b98 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -42,7 +42,7 @@ import Basic from '@site/static/usage/v8/item/basic/index.md'; アイコン・ボタンのように、アイテムとのインタラクションにビジュアルが必要な場合、そのビジュアルはサポート・ビジュアルではなく、 [アクション](#actions) となります。 -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'; メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。Badge](./badge)や[Note](./note)のようなコンポーネントは、メタデータを表示する素晴らしい方法です。 -} /> -入れ子になったインタラクティブ機能を作成することは避けるべきです。例えば、 `button` プロパティが `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'; コントロールは、チェックボックス、入力、ラジオなどのフォームコンポーネントです。リスト内の各項目は、画面スペースの制約上、最大でも2つのコントロールを持つ必要があります。 -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 @@ import Actions from '@site/static/usage/v8/item/content-types/actions/index.md'; 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 @@ import Actions from '@site/static/usage/v8/item/content-types/actions/index.md'; 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,7 +245,38 @@ import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md 3. アイテムは決して[入れ子になったインタラクティヴ](https://dequeuniversity.com/rules/axe/4.4/nested-interactive)をレンダリングすべきではありません。入れ子になったインタラクティブ要素が使用されている場合、スクリーンリーダーは正しいインタラクティブ要素を選択することができません。例えば、`button="true"`を持つ`ion-item`の中にボタンを置くことは避けてください。 4. コンテントタイプ](#content-types)を正しく使用してください。Itemコンポーネントは、[List](./list)内の行として設計されており、汎用コンテナとして使用すべきではありません。 -## プロパティ +## アクセシビリティ + +### キーボードインタラクション + +An `` has the following keyboard interactions when any of these conditions are met: +- The `button` property is set to `"true"`, rendering a native `