ionic-team · rdlabo · Sep 14, 2023 · Mar 13, 2023 · Mar 13, 2023 · Mar 13, 2023
@@ -9,7 +9,7 @@ import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props
 import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
 
 <head>
-  <title>Ion-Accordion Components: How to Build & Examples | Ionic</title>
+  <title>ion-accordion: Accordion Components: How to Build & Examples</title>
   <meta name="description" content="Ion-accordionコンポーネントは、コンテンツに折りたたみ可能なセクションを設け、縦方向のスペースを減らし、情報を整理することができます。組み立て方とサンプルをご覧ください。" />
 </head>
 
@@ -114,12 +114,12 @@ import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expan
 
 アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
 
-| Class Name | Description |
-| ---------- | ----------- |
-| `.accordion-expanding` | Applied when the accordion is actively expanding |
-| `.accordion-expanded` | Applied when the accordion is fully expanded |
-| `.accordion-collapsing` | Applied when the accordion is actively collapsing |
-| `.accordion-collapsed` | Applied when the accordion is fully collapsed |
+| Class Name | Description                       |
+| ---------- |-----------------------------------|
+| `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。    |
+| `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。        |
+| `.accordion-collapsing` | アコーディオンがアクティブに折りたたまれているときに適用されます。 |
+| `.accordion-collapsed` | アコーディオンが完全に折りたたまれているときに適用されます。    |
 
 アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
 

@@ -1,6 +1,9 @@
 ---
 title: "ion-action-sheet"
 ---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
 import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
 import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
@@ -9,7 +12,7 @@ import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-pr
 import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
 
 <head>
-  <title>ion-action-sheet | Action Sheet Dialog for iOS and Android Apps</title>
+  <title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
   <meta name="description" content="アクションシートはアプリのコンテンツの上に一連のオプションを表示するダイアログで、手動で解除する必要があります。iOSとAndroidのデバイスでの使用方法については、こちらをご覧ください。" />
 </head>
 
@@ -94,9 +97,149 @@ import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-
 
 ## アクセシビリティ
 
-アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が与えられます。ARIA仕様に合わせるため、`aria-label`属性または`aria-labelledby`属性のいずれかを設定する必要があります。
+### Screen Readers
+
+アクションシートは、スクリーンリーダーにとって [アクセシブル](../reference/glossary#a11y) であるためにariaプロパティを設定しますが、これらのプロパティは、十分な説明になっていなかったり、アクションシートがアプリでどのように使用されているかに合っていなかったりする場合、オーバーライドすることができます。
+
+#### Role
+
+アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が設定されます。ARIA仕様に合わせるためには、`aria-label`属性か`aria-labelledby`属性のどちらかを設定しなければなりません。
+
+#### Action Sheet の概要
+
+Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することを強く推奨します。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使って、説明的な`aria-label`を指定するか、カスタムの`aria-labelledby`値を設定することもできます。
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
 
-Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することが強く推奨されています。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使用して、説明的な`aria-label`を提供するか、カスタム`aria-labelledby`値を設定することも可能です。
+<TabItem value="react">
+
+```javascript
+useIonActionSheet({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const actionSheet = await actionSheetController.create({
+  htmlAttributes: {
+    'aria-label': 'action sheet dialog',
+  },
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+#### Action Sheet Buttons の概要
+
+テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの `htmlAttributes` プロパティに `aria-label` を渡して、ラベルをボタンに割り当てる必要があります。
+
+<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
+
+<TabItem value="angular">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="javascript">
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="react">
+
+```javascript
+useIonActionSheet({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```javascript
+const actionSheet = await actionSheetController.create({
+  header: 'Header',
+  buttons: [
+    {
+      icon: 'close',
+      htmlAttributes: {
+        'aria-label': 'close',
+      },
+    },
+  ],
+});
+```
+
+</TabItem>
+
+</Tabs>
 
 ## Interfaces
 
@@ -108,6 +251,8 @@ interface ActionSheetButton<T = any> {
   role?: 'cancel' | 'destructive' | 'selected' | string;
   icon?: string;
   cssClass?: string | string[];
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
   handler?: () => boolean | void | Promise<boolean | void>;
   data?: T;
 }
@@ -150,4 +295,4 @@ interface ActionSheetOptions {
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />