From aebbfdf4b2ac9f6024f5ed9da723e5e48e162147 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 2 Sep 2024 10:22:50 +0200 Subject: [PATCH] docs(button-elements): add a11y docs for disabled elements --- src/elements/button/button/readme.md | 6 ++++++ src/elements/button/mini-button/readme.md | 6 ++++++ src/elements/button/secondary-button/readme.md | 6 ++++++ src/elements/button/tertiary-button/readme.md | 6 ++++++ src/elements/button/transparent-button/readme.md | 6 ++++++ src/elements/expansion-panel/expansion-panel/readme.md | 6 ++++++ src/elements/link/block-link-button/readme.md | 8 ++++++++ src/elements/link/link-button/readme.md | 8 ++++++++ src/elements/menu/menu-button/readme.md | 8 ++++++++ src/elements/tag/tag/readme.md | 6 ++++++ 10 files changed, 66 insertions(+) diff --git a/src/elements/button/button/readme.md b/src/elements/button/button/readme.md index 07d5768ef8..254b5f928a 100644 --- a/src/elements/button/button/readme.md +++ b/src/elements/button/button/readme.md @@ -62,6 +62,12 @@ sbb-button { Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-button` for screen-reader users. +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/button/mini-button/readme.md b/src/elements/button/mini-button/readme.md index 2914661af0..3b4acab184 100644 --- a/src/elements/button/mini-button/readme.md +++ b/src/elements/button/mini-button/readme.md @@ -70,6 +70,12 @@ sbb-mini-button { Use the accessibility properties to describe the purpose of the `sbb-mini-button` for screen-reader users. +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/button/secondary-button/readme.md b/src/elements/button/secondary-button/readme.md index 19fe5ecfd9..4e96d48615 100644 --- a/src/elements/button/secondary-button/readme.md +++ b/src/elements/button/secondary-button/readme.md @@ -67,6 +67,12 @@ sbb-secondary-button { Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-secondary-button` for screen-reader users. +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/button/tertiary-button/readme.md b/src/elements/button/tertiary-button/readme.md index a887ea0d7e..db1d38a4ce 100644 --- a/src/elements/button/tertiary-button/readme.md +++ b/src/elements/button/tertiary-button/readme.md @@ -67,6 +67,12 @@ sbb-tertiary-button { Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-tertiary-button` for screen-reader users. +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/button/transparent-button/readme.md b/src/elements/button/transparent-button/readme.md index 0cfa743e4f..c03a4a10c8 100644 --- a/src/elements/button/transparent-button/readme.md +++ b/src/elements/button/transparent-button/readme.md @@ -67,6 +67,12 @@ sbb-transparent-button { Use the accessibility properties in case of an icon-only button to describe the purpose of the `sbb-transparent-button` for screen-reader users. +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/expansion-panel/expansion-panel/readme.md b/src/elements/expansion-panel/expansion-panel/readme.md index 9f9a940218..0ee438bed4 100644 --- a/src/elements/expansion-panel/expansion-panel/readme.md +++ b/src/elements/expansion-panel/expansion-panel/readme.md @@ -74,6 +74,12 @@ and the header's `id` is set as `aria-labelledby` attribute on the content. The `expanded` attribute is used to correctly set the `aria-expanded` attribute on the header and the `aria-hidden` attribute on the content. +### Disabled elements + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/link/block-link-button/readme.md b/src/elements/link/block-link-button/readme.md index 6d192a31ca..e88bd33e92 100644 --- a/src/elements/link/block-link-button/readme.md +++ b/src/elements/link/block-link-button/readme.md @@ -42,6 +42,14 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). Refunds ``` +## Accessibility + +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/link/link-button/readme.md b/src/elements/link/link-button/readme.md index 10b5ed0b10..3b89b4cd38 100644 --- a/src/elements/link/link-button/readme.md +++ b/src/elements/link/link-button/readme.md @@ -28,6 +28,14 @@ accepting its associated properties (`type`, `name`, `value` and `form`). ``` +## Accessibility + +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/menu/menu-button/readme.md b/src/elements/menu/menu-button/readme.md index 35976dc18a..fa4317a543 100644 --- a/src/elements/menu/menu-button/readme.md +++ b/src/elements/menu/menu-button/readme.md @@ -26,6 +26,14 @@ accepting its associated properties (`type`, `name`, `value` and `form`). Button ``` +## Accessibility + +### Disabled buttons + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties diff --git a/src/elements/tag/tag/readme.md b/src/elements/tag/tag/readme.md index 4fac36ac8b..cc6544e49a 100644 --- a/src/elements/tag/tag/readme.md +++ b/src/elements/tag/tag/readme.md @@ -53,6 +53,12 @@ It's recommended to check the parent's `sbb-tag-group` for the value. The component imitates an `button` element to provide an accessible experience. The state is reflected via `aria-pressed` attribute. +### Disabled elements + +Generally speaking, `disabled` elements are considered a bad pattern for a11y. They are invisible to assistive technology and do not provide the reason for which they are disabled. +To partially address the problem, disabled elements are kept focusable (other interactions are still prevented). +Still, the consumer's responsible for providing the reason for a disabled element. + ## Properties