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..0ac1a08c706 100644 --- a/docs/reference/glossary.md +++ b/docs/reference/glossary.md @@ -12,6 +12,20 @@ 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..876e9dc8344 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/angular.md @@ -0,0 +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 +``` 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..ae3e5b9ca4a --- /dev/null +++ b/static/usage/v7/button/text-wrapping/demo.html @@ -0,0 +1,26 @@ + + + + + + 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..876e9dc8344 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/javascript.md @@ -0,0 +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 +``` 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..babad89f4c1 --- /dev/null +++ b/static/usage/v7/button/text-wrapping/react.md @@ -0,0 +1,16 @@ +```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..3462f7357ea --- /dev/null +++ b/static/usage/v7/button/text-wrapping/vue.md @@ -0,0 +1,18 @@ +```html + + + +```