Skip to content

Commit

Permalink
translation(jp): 20230824 updated (#3103)
Browse files Browse the repository at this point in the history
* docs(alert): alert input label is only for radio/checkbox (#2810)

* feat: docusaurus plugin to generate component api docs (#2797)

* Revert " feat: docusaurus plugin to generate component api docs (#2797)" (#2824)

This reverts commit cb056e9.

* docs(input, textarea): update migration guide for proper metadata usage (#2827)

* docs(slides): update migration guides to use Swiper 9 (#2833)

Co-authored-by: Liam DeBeasi <[email protected]>

* feat(translate): update translate

* feat(translate): add auto translation by DeepL

* feat(translate): h2 is translated

* feat(v7): translate api

* feat(translate): translate api

* feat(translate): translate api

* fix(api): fixed spelling

* feat(translation): partial retranslation

* chore(): remove unused file

* docs(modal): clarify swipeToClose migration (#2839)

* docs(select): fix typeahead search (#2840)

Co-authored-by: BlackHakwDC <[email protected]>

* docs(updating): clean up verbiage and broken links on migration guides (#2842)

* fix(translate): proofread the translation of DeepL

* chore(translate): run translate

* feat(translate): translate searchbar

* feat(translate): fix deepl translation

* fix(translate): translate docs/index

* docs(badge): content must be passed to be shown (#2844)

* docs(config): move framework config guides to unified config guide (#2727)

* docs(live reload): update docs about Capacitor programmatic builds (#2843)

Resolves #2805

* docs(many): update config links (#2846)

* docs(config): add documentation for innerHTMLTemplatesEnabled (#2826)

* docs: update dev workflow instructions (#2848)

* docs(react, vue): add vite pwa docs (#2841)

* docs(v5): change CDN links to use core@v5 (#2847)

* docs(quickstart): update to include imports and match current starter (#2849)

resolves #2485

---------

Co-authored-by: Liam DeBeasi <[email protected]>

* docs(input, textarea): clarify error text behavior (#2853)

* docs(native): fix grammar and typos (#2806)

* docs: rxjs migration guide for v7 (#2852)

* docs(modal): playground example to prevent swipe to dismiss (#2820)

* docs(react): update imports for swiper migration (#2851)

* docs(slides): fix typo in Angular migration guide (#2856)

* docs(toast): remove hardware back button dismissal (#2854)

Co-authored-by: liamdebeasi <[email protected]>

* feat(translate): remove '自動翻訳' from cache data

* docs(lifecycle): clarify when lifecycles are called (#2858)

* docs(config): update innerHTMLTemplatesEnabled default (#2857)

* feat: docusaurus plugin to generate component api docs (#2829)

* chore: remove v7 beta banner (#2836)

* docs(config): update v7 to latest version (#2862)

* chore(many): update v7 playgrounds to point to Ionic 7.0.0 (#2859)

* fix(plugin): account for versions with no paths (#2865)

* fix(config): fall back to label (#2866)

* docs(upgrade-pill): link to v7 upgrade guide (#2724)

* chore(): remove unused auto translated

* docs(support): update support table for v7 (#2868)

resolves #2867

* docs(datetime): remove unused variable from example (#2803)

* docs(v7): update breaking changes link (#2869)

* docs(v7): update migration guide tags (#2870)

* feat(translate): translate api

* docs(migration): fix header levels in v4 migration guide (#2872)

* docs(migration): update versioned migration guide to link to latest version of page (#2871)

Co-authored-by: skofgar <[email protected]>

* chore(docs contributing): update code of conduct to link out to full … (#2875)

* chore(i18n): remove production check for Japanese docs (#2825)

* docs(deployment): typo with windows requirements (#2879)

* chore(coc email): update email to devrel (#2881)

* fix(path): fix language path

* fix(lang): default path change to be en(if Japanese

* feat(api): update api translate

* fix(jp): set the v7 document version to v7 (#2884)

* docs(select): popover can be used with multiple prop (#2887)

* Revert "fix(jp): set the v7 document version to v7 (#2884)" (#2889)

This reverts commit c4004b5.

* docs(react): add example for useIonRouter (#2888)

* docs(modal): controller playground uses bolded action (#2890)

* docs(theming): update vendor prefixed line height (#2661)

* docs(layout): update structure docs to use new playground examples (#2882)

resolves #594

* docs(theming): remove stray whitespace (#2895)

* docs(CONTRIBUTING): update misspell and period addition (#2893)

* fix(modal): controller playground uses v7 label syntax (#2891)

* fix(styles): add sidebar indentation for nested sections (#2886)

* fix(styles): add sidebar indentation for nested sections

* fix: spacing at end of sidebar

* fix: spacing between sections

* fix: padding between collapsed sections

* docs(router-link): removal of phone demo on v6 and v7 (#2899)

* docs(studio): removal of studio pages for v7, v6, and v5 (#2900)

* docs(native): correctly show all the native plugins (#2903)

* docs(nav): clearly state that it's not used for routing (#2901)

* fix(ColorGenerator): always prepend entered colors with pound sign (#2904)

* docs(item): migrate inputs example to v7 (#2835)

* docs(vue): update quickstart steps to remove typescript (#2689)

* docs(modal): playground for auto height sheets (#2905)

* docs(react): clarify state behavior with Ionic React (#2894)

Co-authored-by: Liam DeBeasi <[email protected]>

* docs(quickstart): remove unnecessary references to React Native (#2238)

* Update quickstart.md

this was set as intro to React Native which is wrong in my opinion. Should be Ionic React instead.

* Remove other incorrect references to React Native

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(searchbar): debounce uses ionInput (#2913)

Co-authored-by: guillaumesmo <[email protected]>

* docs(react): remove old overview and update link (#2897)

Resolves #2220

* docs(react): update pwa-elements import

* styles(): Add developer experts cta section to intro/next page (#2908)

* fix(developer experts card): Add dark mode compatability (#2919)

* docs(react): provide unique key instead of index (#2630)

As providing index as keys is a bad practice, this commit modifies the key value to be `photo.filepath` which will be unique and consistent while adding new photos.

[Keys - react docs](https://reactjs.org/docs/lists-and-keys.html#keys)
[example why it is not recommended](https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/)

* docs(toast): clarify aria-live usage (#2914)

* docs(security): clarify IonicSafeString usage with innerHTMLTemplatesEnabled (#2906)

* docs(cli): update Ionic CLI docs for version 7 (#2924)

* docs(pwa): update firebase instructions for deploying pwa (#2916)

* docs(react): update firebase instructions for deploying pwa

---------

Co-authored-by: Brett Peary <[email protected]>

* docs(support): remove migration guide link (#2925)

This link does not exist anymore as the migration guides are available as a top-level category in the sidebar.

* fix(release-notes): remove element symbols and names and update design (#2921)

* docs(angular): add missing non-null assertion operator (#2683)

* fix(): page components file structure (#2907)

* docs(your-first-app): mark webviewPath as optional in UserPhoto interface (#2926)

Co-authored-by: derf974 <[email protected]>

* fix(angular-getting-started): type errors (#2688)

Co-authored-by: Greg Billetdeaux <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>

* Revert "fix(): page components file structure (#2907)" (#2928)

This reverts commit d848669.

* refactor(api): v5 docs use internal import (#2929)

* fix(playground): allow automatic mode selection when relevant base file is overwritten (#2922)

* fix: styles for ion-slides migration (#2930)

* refactor(playground): remove unused angularModuleOptions feature (#2933)

* docs(ionicslides): include slides param link (#2934)

Co-authored-by: Arno <[email protected]>

* docs(tab): remove references to using Stencil with tab (#2932)

* chore(crowdin): api docs are no longer ignored (#2938)

* fix(docsdemo, playground): add keys to list items (#2940)

* fix(ColorAccordion, LayeredColorsSelect): add keys to list items (#2942)

* fix(docdemo, coloraccordion): correctly format SVG/CSS props (#2941)

* chore(contributing): remove slack link on v5 (#2939)

* docs(Swiper): fix typo in slidesPerView value (#2945)

* docs(android): update where to find SDK/AVD managers (#2947)

Co-authored-by: rtpHarry <[email protected]>

* chore(intro/next): Elite Ionic -> Ionic Start (#2931)

* docs(developing): tip for changing node_modules permissions (#2950)

Co-authored-by: Utku Demir <[email protected]>

* docs(breadcrumbs): update vue example (#2949)

* docs(lifecycle): clarify method descriptions (#2951)

Co-authored-by: BAYiTUPAi <[email protected]>

* docs(updating): add angular toolkit upgrade to v7 upgrade guide (#2952)

* chore(lint): add prettier and lint on CI (#2946)

- Adds prettier to a lint command (prettier was installed just not used anywhere)
- Runs `npm install` & `npm lint` on CI
- Updates the `.prettierignore` to be more up-to-date with the current docs structure 
  - `static/code/stackblitz` files were ignored because it was modifying the indentation surrounding `{ TEMPLATE }` and this caused the StackBlitz to look worse when opened
- Adds `mdx` as a parser to the `@ionic/prettier-config` and updates this repo to use that version

* docs(support): update angular support policy (#2953)

This PR updates the support table to note that Angular 16 is supported for Ionic v7

* docs(range): update docs to use label prop (#2955)

* fix(tabs): correct router playground src (#2957)

* docs(app-store): add reference to App Store Connect (#2198)

Co-authored-by: Brandy Carney <[email protected]>

* docs(developing): update Java instructions to mention JDK 11 for latest cordova-android (#2200)

Updates the developing android documentation to reflect the latest Cordova guide here: https://cordova.apache.org/docs/en/11.x/guide/platforms/android/#java-development-kit-jdk

---------

Co-authored-by: Brandy Carney <[email protected]>

* docs(react): remove IonContent from tabs example (#2958)

* docs(vue): remove IonContent from tabs example (#2959)

* docs(dark-mode): replace deprecated addListener() usage (#1908)

Co-authored-by: Maria Hutt <[email protected]>

* docs(quickstart): remove typescript for imports and tests (#2216)

* Update quickstart.md

Currently, the "use Javascript" section is incomplete as Jest is still configured to use Typescript and running `npm run test:unit` will throw errors. The section was revised to to include Jest Javascript configuration changes.

---------

Co-authored-by: Shawn Taylor <[email protected]>

* fix(CodeColor, LayeredColorsSelect): fix invalid DOM nesting (#2963)

* docs(react): remove unopened closing tag (#2964)

* fix: Ionic CLI links to latest docs page (#2961)

* docs(tabs): angular usage does not use explicit ion-router-outlet (#2965)

Co-authored-by: skytern <[email protected]>

* doc(CORS): update the native options (#2954)

Include different options for Capacitor and Cordova (legacy).
Also fixes what was a dead link to Ionic Native.

* feat(playground): inline dependencies per framework example (#2970)

* chore: update minor release to happen every 4 weeks if needed (#2972)

* docs(select): add label slot and aria label playgrounds (#2971)

* docs(vue): add community guide by theafolayan (#1795)

Co-authored-by: Maria Hutt <[email protected]>

* docs(PWAs): add Vue to list of PWA deployment guides (#2974)

Co-authored-by: VAS000 <[email protected]>

* docs(spinner): add docs for resizing (#2966)

* docs(spinner): add docs for resizing

* docs(developing): update default Android SDK path (#2771)

Co-authored-by: Brandy Carney <[email protected]>

* docs(native): fix typo (#2976)

* chore: prettier formatting (#2979)

* chore: prettier formatting

* chore: revert invalid changes

* docs(angular): relative routing is supported (#2980)

Co-authored-by: rdlabo<[email protected]>>

* docs(angular): update component testing code snippets (#2985)

* chore(deps): update react and vue playground dependencies (#2989)

* docs(datetime): add playground for styling wheel pickers (#2982)

* docs(angular):updated component photo service (#2986) (#2987)

* docs(angular):updated component photo service (#2986)

* docs(angular):changed component photo service (#2986)

changed photo.path --> photo.path!

* remove extra newline

---------

Co-authored-by: Amanda Johnston <[email protected]>

* docs(android): clarify steps to set up native project and run with Capacitor (#1889)

Co-authored-by: Shawn Taylor <[email protected]>

* docs(security): content security policies (#2975)


Co-authored-by: Liam DeBeasi <[email protected]>

* chore(fundamentals): clarify events (#2992)

* docs(app-store): add release flag (#2990)

Co-authored-by: zhangshengjie <[email protected]>

* docs(vue): fix lifecycle table formatting (#2967)

Adds a new line before the table to allow the markdown to render properly

* docs(infinite-scroll): use the correct custom event (#2995)

* docs(angular): fix indentation in 5-adding-mobile.md (#2855)

* docs: fix indentation in 5-adding-mobile.md

* Also change in v7 docs

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(input): add label slot and no visible label demos (#2997)

* docs(select): add playgrounds for toggle icon customization (#2996)

* add playgrounds

* lint

* Update static/usage/v7/select/customization/custom-toggle-icons/index.md

Co-authored-by: Liam DeBeasi <[email protected]>

* Update static/usage/v7/select/customization/icon-flip-behavior/index.md

Co-authored-by: Liam DeBeasi <[email protected]>

* fix icon usage for React and Vue

* rename toggleIconWhenOpen to expandedIcon

---------

Co-authored-by: Liam DeBeasi <[email protected]>

* docs(input): input masking examples (#2993)

* docs(textarea): add label slot examples (#3001)

* chore: add playgrounds for JP docs (#3004)

* chore: upgrade maskito dependencies to v1 (#3005)

* fix(playground-tabs): show arrows on long list (#3009)

* docs(native): improve grammar

fixed wording mistakes

* docs(your-first-app): switch to Date.now() (#2915)

Co-authored-by: Maria Hutt <[email protected]>

* docs(list): use dark mode aware color (#3015)

Co-authored-by: reslear <[email protected]>

* docs(maskito): update credit card mask format (#3007)

* chore(ci): check for diff after running prettier (#2981)

* chore: lint content (#3020)

* docs(animation): add playground for override example (#3018)

Co-authored-by: dillionmegida <[email protected]>

* docs(button): include accessibility section with best practices for text wrapping (#3008)

* docs(vue): Improve documentation for removing Typescript steps in v7 (#3002)

* feat(playground): add support for generating a new playground (#2994)

* Add prompts and generate vue file

* Generate other files

* Use variables in headers

* Add readme

* Add prompt with option to generate css files

* Add version to prompt and modify files accordingly

* Update readme

* Address PR review

* Add hint for component name casing

* Add Angular TS option

* Reformat to use advanced prompting

* Refactor where markdown output comes from

* Remove default value for path; add validation

* Add validation for component name

---------

Co-authored-by: Amanda Johnston <[email protected]>

* chore: enable renovate for component playground deps (#3016)

* Configure Renovate (#3017)

* Add renovate.json

* chore: remove invalid setting

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Sean Perkins <[email protected]>

* docs(modal): clarify swipe to close section (#3021)

* docs(react): clarify IonTabs behavior with IonPage (#3012)

* chore(renovate): remove extending docs config (#3027)

* docs(animation): add playground for group example (#3025)

* docs(animations): add playground for chained animations (#3026)

Co-authored-by: dillionmegida <[email protected]>

* chore(deps): update dependency vite to v2.9.16 [security] (#3028)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(animation): add playground for basic animations (#3031)

Co-authored-by: dillionmegida <[email protected]>

* fix(deps): update dependency @types/node to v16.18.38 (#3033)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(generation): correct angular imports (#3034)

* Refactor: Improve readability

* Combine index files and fix bug with angular ts generation

* docs(animations): buttons in StackBlitz demos do not need id (#3037)

* chore(renovate): limit include paths (#3030)

* chore(renovate): limit include paths

* fix: use matchPackagePatterns

* docs(animations): add playground for before and after hooks (#3035)

Co-authored-by: dillionmegida <[email protected]>

* docs(animations): add playground for preference based (#3036)

Co-authored-by: dillionmegida <[email protected]>

* docs(angular): add type assertion for your first app code snippet (#2910)

Was getting an error: "Type 'string | undefined' is not assignable to type 'string'." Adding an exclamation point at the end of line 111 solves it.

* docs(animation): add playground example for double-click gesture  (#3042)

Co-authored-by: dillionmegida < [email protected]>

Co-authored-by: Maria Hutt <[email protected]>

* docs(animation): add gesture animation playground (#3043)

Co-authored-by: dillionmegida <[email protected]>

* docs(gesture): add playground example for basic usage (#3038)

Co-authored-by: dillionmegida <[email protected]>

* docs(animation): add playground example for keyframes (#3039)

Co-authored-by: dillionmegida < [email protected]>

* docs(item-sliding): clarify expandable behavior (#3044)

* docs(menu): add playgrounds for menu sides and multiple menus (#3049)

* fix(): fix conflict package.json

* chore(): fixed lint

* fix(ci): fix lint and diff

* chore: lint

* fix(script): follow new docs script

* translate

* chore

* chore(): fix confrect

* fmt

* fix(): remove i18n folder from git

* chore: JP docs point to v7 (#3056)

* chore: use correct name for JP docs (#3057)

* docs(android,iOS): link to capacitor getting started guide (#3055)

* docs(theming): add section about safe area padding (#3065)

* docs(quickstart): change wording for installing CLI (#3040)

Co-authored-by: Maria Hutt <[email protected]>

* docs(previewing): adding instruction about "ionic serve --external"  (#3045)

Co-authored-by: Maria Hutt <[email protected]>

* docs(theming): migrate Dark Mode Codepens to playground examples (#3067)

Resolves #2998

Co-authored-by: Colum Ferry <[email protected]>

* docs(api): add accessibility section for new htmlAttributes property (#3064)

* docs(vue): streamline usage examples with script setup syntax (#2956)

* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(input): update `Maskito` documentation link (#3072)

* docs(react): document lifecycle hook dependencies arg (#3078)

resolves #1949

* docs(input): update `Maskito` repository link (#3074)

* feat(playground): add prop to display console messages from demo (#3060)

* fix(): consolidate docusaurus tab groupids (#3079)

* fix(vue): fix bug with key type

* fix(): alphabetize sidebar (#3081)

* Revert "fix(): alphabetize sidebar (#3081)" (#3087)

This reverts commit 760204f.

* docs(picker): describe how to set the initial value of a picker column (#3091)

* chore: standardize title tag format (#3092)

* fix(docs): fix merge mistake

* translate(core): create translate file

* fmt

* translate(docs): translated

* fmt

---------

Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: Liam DeBeasi <[email protected]>
Co-authored-by: Amanda Johnston <[email protected]>
Co-authored-by: BlackHakwDC <[email protected]>
Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Shawn Taylor <[email protected]>
Co-authored-by: ptmkenny <[email protected]>
Co-authored-by: reslear <[email protected]>
Co-authored-by: skofgar <[email protected]>
Co-authored-by: John Wheeler <[email protected]>
Co-authored-by: Robert G <[email protected]>
Co-authored-by: Serhii Kulykov <[email protected]>
Co-authored-by: Yusuf Sahin HAMZA <[email protected]>
Co-authored-by: FernetB <[email protected]>
Co-authored-by: Ashraf Latif <[email protected]>
Co-authored-by: guillaumesmo <[email protected]>
Co-authored-by: James McDonald <[email protected]>
Co-authored-by: jaredcbaum <[email protected]>
Co-authored-by: Thejas Kiran P S <[email protected]>
Co-authored-by: Matt Netkow <[email protected]>
Co-authored-by: Brett Peary <[email protected]>
Co-authored-by: Daniel Feliz <[email protected]>
Co-authored-by: derf974 <[email protected]>
Co-authored-by: gregbilletdeaux <[email protected]>
Co-authored-by: Greg Billetdeaux <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Arno <[email protected]>
Co-authored-by: rtpHarry <[email protected]>
Co-authored-by: Utku Demir <[email protected]>
Co-authored-by: BAYiTUPAi <[email protected]>
Co-authored-by: Joost Jansen <[email protected]>
Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: Austine A <[email protected]>
Co-authored-by: Stephan Schmitz <[email protected]>
Co-authored-by: praxxys <[email protected]>
Co-authored-by: Zakuru San <[email protected]>
Co-authored-by: skytern <[email protected]>
Co-authored-by: Ken Sodemann <[email protected]>
Co-authored-by: Oluwaseun Raphael Afolayan <[email protected]>
Co-authored-by: VAS000 <[email protected]>
Co-authored-by: Julien De Coster <[email protected]>
Co-authored-by: Martijn Grendelman <[email protected]>
Co-authored-by: Chandra Nandan <[email protected]>
Co-authored-by: Sanjeed <[email protected]>
Co-authored-by: zhangshengjie <[email protected]>
Co-authored-by: Kevin Cunningham <[email protected]>
Co-authored-by: Bobby Galli <[email protected]>
Co-authored-by: Stefan Kempinger <[email protected]>
Co-authored-by: Biskweet <[email protected]>
Co-authored-by: reslear <[email protected]>
Co-authored-by: dillionmegida <[email protected]>
Co-authored-by: Simo Mafuxwana <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: dillionmegida <[email protected]>
Co-authored-by: Joshua Albrechtsen <[email protected]>
Co-authored-by: Faizanahmed Saiyed <[email protected]>
Co-authored-by: Mohammed Ashfaq <[email protected]>
Co-authored-by: Colum Ferry <[email protected]>
Co-authored-by: Treigh Mawaka <[email protected]>
Co-authored-by: Nikita Barsukov <[email protected]>
Co-authored-by: fc92 <[email protected]>
Co-authored-by: Damian Tarnawsky <[email protected]>
  • Loading branch information
Show file tree
Hide file tree
Showing 323 changed files with 23,486 additions and 1,718 deletions.
14 changes: 7 additions & 7 deletions docs/api/accordion.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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 をカスタマイズしたい場合、以下のセレクタを使用することができます。

Expand Down
153 changes: 149 additions & 4 deletions docs/api/action-sheet.md
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>

Expand Down Expand Up @@ -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

Expand All @@ -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;
}
Expand Down Expand Up @@ -150,4 +295,4 @@ interface ActionSheetOptions {
<CustomProps />

## Slots
<Slots />
<Slots />
Loading

0 comments on commit 5bbf6a7

Please sign in to comment.