From 241617c4fcbc7750c0a71d05c972ff5b30ec7a4e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 21 Jun 2023 15:32:03 -0400 Subject: [PATCH 1/2] docs(button): include accessibility section with demo for text wrapping --- docs/api/button.md | 18 +++++++++++++++ .../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 ++++++++++++ 7 files changed, 89 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/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 16dd0577ea950c02e54825f6d0871aaa092c23c1 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 21 Jun 2023 15:32:36 -0400 Subject: [PATCH 2/2] docs(glossary): add section on what accessibility is --- docs/reference/glossary.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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