From 044fe6d107a00f0acb02527083ced0c3d285b371 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 14 Jun 2023 15:09:32 -0400 Subject: [PATCH 1/7] add no visible label demo --- .../v7/input/no-visible-label/angular.md | 7 +++++ .../usage/v7/input/no-visible-label/demo.html | 26 +++++++++++++++++++ .../usage/v7/input/no-visible-label/index.md | 12 +++++++++ .../v7/input/no-visible-label/javascript.md | 7 +++++ .../usage/v7/input/no-visible-label/react.md | 15 +++++++++++ static/usage/v7/input/no-visible-label/vue.md | 18 +++++++++++++ 6 files changed, 85 insertions(+) create mode 100644 static/usage/v7/input/no-visible-label/angular.md create mode 100644 static/usage/v7/input/no-visible-label/demo.html create mode 100644 static/usage/v7/input/no-visible-label/index.md create mode 100644 static/usage/v7/input/no-visible-label/javascript.md create mode 100644 static/usage/v7/input/no-visible-label/react.md create mode 100644 static/usage/v7/input/no-visible-label/vue.md diff --git a/static/usage/v7/input/no-visible-label/angular.md b/static/usage/v7/input/no-visible-label/angular.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v7/input/no-visible-label/angular.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v7/input/no-visible-label/demo.html b/static/usage/v7/input/no-visible-label/demo.html new file mode 100644 index 00000000000..b8155e10e6f --- /dev/null +++ b/static/usage/v7/input/no-visible-label/demo.html @@ -0,0 +1,26 @@ + + + + + + input + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v7/input/no-visible-label/index.md b/static/usage/v7/input/no-visible-label/index.md new file mode 100644 index 00000000000..de0fe522748 --- /dev/null +++ b/static/usage/v7/input/no-visible-label/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/input/no-visible-label/javascript.md b/static/usage/v7/input/no-visible-label/javascript.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v7/input/no-visible-label/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v7/input/no-visible-label/react.md b/static/usage/v7/input/no-visible-label/react.md new file mode 100644 index 00000000000..38842ecb0b6 --- /dev/null +++ b/static/usage/v7/input/no-visible-label/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/input/no-visible-label/vue.md b/static/usage/v7/input/no-visible-label/vue.md new file mode 100644 index 00000000000..cc181047943 --- /dev/null +++ b/static/usage/v7/input/no-visible-label/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` From dcb751cbf45c2a4c25032c87e34533b995813413 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 14 Jun 2023 15:13:03 -0400 Subject: [PATCH 2/7] add label slot demo --- static/usage/v7/input/label-slot/angular.md | 9 ++++++ static/usage/v7/input/label-slot/demo.html | 28 +++++++++++++++++++ static/usage/v7/input/label-slot/index.md | 12 ++++++++ .../usage/v7/input/label-slot/javascript.md | 9 ++++++ static/usage/v7/input/label-slot/react.md | 17 +++++++++++ static/usage/v7/input/label-slot/vue.md | 20 +++++++++++++ 6 files changed, 95 insertions(+) create mode 100644 static/usage/v7/input/label-slot/angular.md create mode 100644 static/usage/v7/input/label-slot/demo.html create mode 100644 static/usage/v7/input/label-slot/index.md create mode 100644 static/usage/v7/input/label-slot/javascript.md create mode 100644 static/usage/v7/input/label-slot/react.md create mode 100644 static/usage/v7/input/label-slot/vue.md diff --git a/static/usage/v7/input/label-slot/angular.md b/static/usage/v7/input/label-slot/angular.md new file mode 100644 index 00000000000..21bdbf74b64 --- /dev/null +++ b/static/usage/v7/input/label-slot/angular.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v7/input/label-slot/demo.html b/static/usage/v7/input/label-slot/demo.html new file mode 100644 index 00000000000..aff283c4d36 --- /dev/null +++ b/static/usage/v7/input/label-slot/demo.html @@ -0,0 +1,28 @@ + + + + + + input + + + + + + + + + +
+ + + +
Email (Required)
+ + + +
+ + + + diff --git a/static/usage/v7/input/label-slot/index.md b/static/usage/v7/input/label-slot/index.md new file mode 100644 index 00000000000..24328d5cd70 --- /dev/null +++ b/static/usage/v7/input/label-slot/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/input/label-slot/javascript.md b/static/usage/v7/input/label-slot/javascript.md new file mode 100644 index 00000000000..494d85ba6cb --- /dev/null +++ b/static/usage/v7/input/label-slot/javascript.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v7/input/label-slot/react.md b/static/usage/v7/input/label-slot/react.md new file mode 100644 index 00000000000..d4bc7902935 --- /dev/null +++ b/static/usage/v7/input/label-slot/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
Email (Required)
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/input/label-slot/vue.md b/static/usage/v7/input/label-slot/vue.md new file mode 100644 index 00000000000..4b3fb3daeb8 --- /dev/null +++ b/static/usage/v7/input/label-slot/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` From 5a24cfec91bbbc6699a97367bc080904b5d924da Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 14 Jun 2023 15:13:18 -0400 Subject: [PATCH 3/7] update docs page --- docs/api/input.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/api/input.md b/docs/api/input.md index 02c34e0d726..2164e53f022 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -36,8 +36,15 @@ import Types from '@site/static/usage/v7/input/types/index.md'; +## Labels -## Label Placement +Input has several options for supplying a label for the component: + +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels (experimental) +- `aria-label`: used for selects with no visible label + +### Label Placement Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. @@ -45,6 +52,25 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md +### Label Slot (experimental) + +While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. + +Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. + +import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, devs should still supply an `aria-label` so the input is accessible to screen readers. + +import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md'; + + + + ## Clear Options From 80dff9a95990e78455b3373e2c16cb359ecd77ad Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 15 Jun 2023 14:18:07 -0400 Subject: [PATCH 4/7] =?UTF-8?q?devs=20=E2=80=94>=20developers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/input.md | 2 +- docs/api/range.md | 2 +- docs/api/select.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 2164e53f022..57e4a41412b 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -64,7 +64,7 @@ import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; ### No Visible Label -If no visible label is needed, devs should still supply an `aria-label` so the input is accessible to screen readers. +If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers. import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md'; diff --git a/docs/api/range.md b/docs/api/range.md index be52a7b1fea..bf4b09e0bce 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -47,7 +47,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md ### No Visible Label -If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers. +If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers. import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md'; diff --git a/docs/api/select.md b/docs/api/select.md index 2636e7d04bb..0b0535adbec 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -50,7 +50,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; ### No Visible Label -If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers. +If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers. import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md'; From 2cd03f11ba7f8735395b64c92609dc9892bf5ecd Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 15 Jun 2023 14:19:32 -0400 Subject: [PATCH 5/7] clarify aria-label usage --- docs/api/input.md | 2 +- docs/api/range.md | 2 +- docs/api/select.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 57e4a41412b..88b2ce7e188 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -42,7 +42,7 @@ Input has several options for supplying a label for the component: - `label` property: used for plaintext labels - `label` slot: used for custom HTML labels (experimental) -- `aria-label`: used for selects with no visible label +- `aria-label`: used to provide a label for screen readers but adds no visible label ### Label Placement diff --git a/docs/api/range.md b/docs/api/range.md index bf4b09e0bce..84e68f7d343 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -27,7 +27,7 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1 Range has several options for supplying a label for the component: - `label` property: used for plaintext labels - `label` slot: used for custom HTML labels -- `aria-label`: used for ranges with no visible label +- `aria-label`: used to provide a label for screen readers but adds no visible label ### Label Placement diff --git a/docs/api/select.md b/docs/api/select.md index 0b0535adbec..d25546dc536 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -30,7 +30,7 @@ Select has several options for supplying a label for the component: - `label` property: used for plaintext labels - `label` slot: used for custom HTML labels -- `aria-label`: used for selects with no visible label +- `aria-label`: used to provide a label for screen readers but adds no visible label ### Label Placement From cd40556fbe075c759e53801293e37461d674182f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 15 Jun 2023 14:29:49 -0400 Subject: [PATCH 6/7] clarify purpose of labels --- docs/api/input.md | 2 +- docs/api/range.md | 3 ++- docs/api/select.md | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 88b2ce7e188..6bdecfc9568 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -38,7 +38,7 @@ import Types from '@site/static/usage/v7/input/types/index.md'; ## Labels -Input has several options for supplying a label for the component: +Labels should be used to describe the input. They can be used visually, and they will also be read out by screen readers when the user is focused on the input. This makes it easy for the user to understand the intent of the input. Input has several ways to assign a label: - `label` property: used for plaintext labels - `label` slot: used for custom HTML labels (experimental) diff --git a/docs/api/range.md b/docs/api/range.md index 84e68f7d343..3ff4f6adb35 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -24,7 +24,8 @@ By default the Range slider has a minimum value of `0` and a maximum value of `1 ## Labels -Range has several options for supplying a label for the component: +Labels should be used to describe the range. They can be used visually, and they will also be read out by screen readers when the user is focused on the range. This makes it easy for the user to understand the intent of the range. Range has several ways to assign a label: + - `label` property: used for plaintext labels - `label` slot: used for custom HTML labels - `aria-label`: used to provide a label for screen readers but adds no visible label diff --git a/docs/api/select.md b/docs/api/select.md index d25546dc536..d34b353cf1b 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -26,6 +26,8 @@ If `value` is set on the ``, the selected option will be chosen base ## Labels +Labels should be used to describe the select. They can be used visually, and they will also be read out by screen readers when the user is focused on the select. This makes it easy for the user to understand the intent of the select. Select has several ways to assign a label: + Select has several options for supplying a label for the component: - `label` property: used for plaintext labels From 4b612781c6110f307a4692d28dd5370306f1198f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Jun 2023 09:21:50 -0400 Subject: [PATCH 7/7] remove dev build --- static/usage/v7/input/label-slot/demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/input/label-slot/demo.html b/static/usage/v7/input/label-slot/demo.html index aff283c4d36..234aa3cbec3 100644 --- a/static/usage/v7/input/label-slot/demo.html +++ b/static/usage/v7/input/label-slot/demo.html @@ -6,8 +6,8 @@ input - - + +