From 274a9161197ed28ac2bb4f0fcc0da96b4517b7e0 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Sat, 24 Aug 2024 09:47:21 +0200 Subject: [PATCH] chore: Update Switch docs (#1527) Co-authored-by: Vincent Smedinga --- packages/css/src/components/checkbox/README.md | 2 +- packages/css/src/components/page-menu/README.md | 2 +- packages/css/src/components/search-field/README.md | 2 +- packages/css/src/components/switch/README.md | 4 ++-- storybook/src/components/Switch/Switch.docs.mdx | 4 ---- storybook/src/components/Switch/Switch.stories.tsx | 9 +-------- 6 files changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/css/src/components/checkbox/README.md b/packages/css/src/components/checkbox/README.md index 50b285c450..65add9474a 100644 --- a/packages/css/src/components/checkbox/README.md +++ b/packages/css/src/components/checkbox/README.md @@ -27,4 +27,4 @@ It is written in the first person when asking the user to agree to the terms and - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is. -Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +Checkbox is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. diff --git a/packages/css/src/components/page-menu/README.md b/packages/css/src/components/page-menu/README.md index 89cca39fa8..f430f8e860 100644 --- a/packages/css/src/components/page-menu/README.md +++ b/packages/css/src/components/page-menu/README.md @@ -21,4 +21,4 @@ Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--do - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html) -PageMenu is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +Page Menu is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. diff --git a/packages/css/src/components/search-field/README.md b/packages/css/src/components/search-field/README.md index e3d22915c1..122f2732a6 100644 --- a/packages/css/src/components/search-field/README.md +++ b/packages/css/src/components/search-field/README.md @@ -32,4 +32,4 @@ These features can be disruptive for a user searching for part of a word, and `a - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is. - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input. -Search Field is an interactive element; therefore, [the general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. +Search Field is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. diff --git a/packages/css/src/components/switch/README.md b/packages/css/src/components/switch/README.md index b5de489a77..3763763660 100644 --- a/packages/css/src/components/switch/README.md +++ b/packages/css/src/components/switch/README.md @@ -7,16 +7,16 @@ A switch applies to a page or the entire system, such as an on/off switch. ## Guidelines +- A Switch must have a label, and in most cases, this label should be visible. - Switch only between two different states. It is a binary action. -- Use labels with a switch to make the action clear. - The action takes place immediately when the user operates the switch. ## Relevant WCAG requirements - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is. -Switch is an interactive element; general requirements and guidelines for interactivity apply [here](/docs/docs-developer-guide-interactivity--docs). +Switch is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply. ## References diff --git a/storybook/src/components/Switch/Switch.docs.mdx b/storybook/src/components/Switch/Switch.docs.mdx index 2613611379..3d5d6359b2 100644 --- a/storybook/src/components/Switch/Switch.docs.mdx +++ b/storybook/src/components/Switch/Switch.docs.mdx @@ -8,10 +8,6 @@ import README from "../../../../packages/css/src/components/switch/README.md?raw {README} -It can be used as a standalone component or as a form control element. -When used as a standalone component provide an `aria-label` or `aria-labelledby` prop to keep it accessible. -When used as a formcontrol, make sure to add the associated `