From 9be822b35aa4dfc39ded5b3db1804d557e8981bc Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 7 Jul 2023 14:08:13 -0400 Subject: [PATCH 1/2] docs(button): include accessibility section with best practices for text wrapping (#3008) --- docs/api/button.md | 18 +++++++++++++++ docs/reference/glossary.md | 12 ++++++++++ .../usage/v7/button/text-wrapping/angular.md | 4 ++++ .../usage/v7/button/text-wrapping/demo.html | 23 +++++++++++++++++++ static/usage/v7/button/text-wrapping/index.md | 8 +++++++ .../v7/button/text-wrapping/javascript.md | 4 ++++ static/usage/v7/button/text-wrapping/react.md | 17 ++++++++++++++ static/usage/v7/button/text-wrapping/vue.md | 15 ++++++++++++ 8 files changed, 101 insertions(+) create mode 100644 static/usage/v7/button/text-wrapping/angular.md create mode 100644 static/usage/v7/button/text-wrapping/demo.html create mode 100644 static/usage/v7/button/text-wrapping/index.md create mode 100644 static/usage/v7/button/text-wrapping/javascript.md create mode 100644 static/usage/v7/button/text-wrapping/react.md create mode 100644 static/usage/v7/button/text-wrapping/vue.md diff --git a/docs/api/button.md b/docs/api/button.md index c538075468d..c103d4c21d2 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -78,6 +78,24 @@ import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index. +## Accessibility + +Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides. + +### Overflowing Text Content + +There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text. + +The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release. + +:::info +The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width. +::: + +import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md'; + + + ## Properties diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md index 1d70bd176dc..4c86dd95d4c 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -12,6 +12,18 @@ title: Glossary
+
+ +

Accessibility

+ +

+ + Accessibility + {' '} + (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. +

+
+

Android SDK

diff --git a/static/usage/v7/button/text-wrapping/angular.md b/static/usage/v7/button/text-wrapping/angular.md new file mode 100644 index 00000000000..6f4f27df707 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/angular.md @@ -0,0 +1,4 @@ +```html +Default +This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends +``` diff --git a/static/usage/v7/button/text-wrapping/demo.html b/static/usage/v7/button/text-wrapping/demo.html new file mode 100644 index 00000000000..de02ce9c31d --- /dev/null +++ b/static/usage/v7/button/text-wrapping/demo.html @@ -0,0 +1,23 @@ + + + + + + Button + + + + + + + + + +
+ Default + This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends +
+ + + + diff --git a/static/usage/v7/button/text-wrapping/index.md b/static/usage/v7/button/text-wrapping/index.md new file mode 100644 index 00000000000..7696d798857 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/index.md @@ -0,0 +1,8 @@ +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/button/text-wrapping/javascript.md b/static/usage/v7/button/text-wrapping/javascript.md new file mode 100644 index 00000000000..6f4f27df707 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/javascript.md @@ -0,0 +1,4 @@ +```html +Default +This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends +``` diff --git a/static/usage/v7/button/text-wrapping/react.md b/static/usage/v7/button/text-wrapping/react.md new file mode 100644 index 00000000000..f0e5fe2ef40 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + + This is the button that never ends it just goes on and on and on and on + and on and on and on and on my friends + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/button/text-wrapping/vue.md b/static/usage/v7/button/text-wrapping/vue.md new file mode 100644 index 00000000000..1af8055c939 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` From c9a58f603567b2db83ac52b2398805174435e8db Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 19 Jul 2023 12:55:16 -0400 Subject: [PATCH 2/2] chore: lint --- docs/reference/glossary.md | 4 +++- static/usage/v7/button/text-wrapping/angular.md | 5 ++++- static/usage/v7/button/text-wrapping/demo.html | 5 ++++- static/usage/v7/button/text-wrapping/javascript.md | 5 ++++- static/usage/v7/button/text-wrapping/react.md | 3 +-- static/usage/v7/button/text-wrapping/vue.md | 5 ++++- 6 files changed, 20 insertions(+), 7 deletions(-) diff --git a/docs/reference/glossary.md b/docs/reference/glossary.md index 4c86dd95d4c..0ac1a08c706 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -20,7 +20,9 @@ title: Glossary Accessibility {' '} - (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. + (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited + abilities. This includes people with disabilities, those using mobile devices, and those with slow network + connections. Content should be developed to be as accessible as technology allows.

diff --git a/static/usage/v7/button/text-wrapping/angular.md b/static/usage/v7/button/text-wrapping/angular.md index 6f4f27df707..876e9dc8344 100644 --- a/static/usage/v7/button/text-wrapping/angular.md +++ b/static/usage/v7/button/text-wrapping/angular.md @@ -1,4 +1,7 @@ ```html Default -This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends +This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends ``` diff --git a/static/usage/v7/button/text-wrapping/demo.html b/static/usage/v7/button/text-wrapping/demo.html index de02ce9c31d..ae3e5b9ca4a 100644 --- a/static/usage/v7/button/text-wrapping/demo.html +++ b/static/usage/v7/button/text-wrapping/demo.html @@ -15,7 +15,10 @@
Default - This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends + This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends
diff --git a/static/usage/v7/button/text-wrapping/javascript.md b/static/usage/v7/button/text-wrapping/javascript.md index 6f4f27df707..876e9dc8344 100644 --- a/static/usage/v7/button/text-wrapping/javascript.md +++ b/static/usage/v7/button/text-wrapping/javascript.md @@ -1,4 +1,7 @@ ```html Default -This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends +This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends ``` diff --git a/static/usage/v7/button/text-wrapping/react.md b/static/usage/v7/button/text-wrapping/react.md index f0e5fe2ef40..babad89f4c1 100644 --- a/static/usage/v7/button/text-wrapping/react.md +++ b/static/usage/v7/button/text-wrapping/react.md @@ -7,8 +7,7 @@ function Example() { <> Default - This is the button that never ends it just goes on and on and on and on - and on and on and on and on my friends + This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends ); diff --git a/static/usage/v7/button/text-wrapping/vue.md b/static/usage/v7/button/text-wrapping/vue.md index 1af8055c939..3462f7357ea 100644 --- a/static/usage/v7/button/text-wrapping/vue.md +++ b/static/usage/v7/button/text-wrapping/vue.md @@ -1,7 +1,10 @@ ```html