From 449dcb8427da1d5ff081b08d41e884921e321b59 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Sat, 24 Aug 2024 09:38:33 +0200
Subject: [PATCH 1/3] chore: Remove unnecessary 'autocapitalize' attribute
 (#1531)

---
 packages/css/src/components/password-input/README.md    | 2 +-
 packages/css/src/components/text-input/README.md        | 2 +-
 packages/react/src/PasswordInput/PasswordInput.test.tsx | 3 +--
 packages/react/src/PasswordInput/PasswordInput.tsx      | 1 -
 storybook/src/components/TextInput/TextInput.docs.mdx   | 4 ++--
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/css/src/components/password-input/README.md b/packages/css/src/components/password-input/README.md
index afe1f37891..8dcd5a2273 100644
--- a/packages/css/src/components/password-input/README.md
+++ b/packages/css/src/components/password-input/README.md
@@ -10,7 +10,7 @@ Helps users enter a password.
   It ensures that the input is not readable by others who might be looking at the screen.
 - The characters entered are hidden, represented by squares.
 
-This component sets `autocapitalize="none"`, `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
+This component sets `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
 Passwords shouldn’t be checked for spelling or grammar.
 This may also prevent posting the password to third-party plugins.
 These props cannot be overridden.
diff --git a/packages/css/src/components/text-input/README.md b/packages/css/src/components/text-input/README.md
index dd52c5c0ad..d63da5379f 100644
--- a/packages/css/src/components/text-input/README.md
+++ b/packages/css/src/components/text-input/README.md
@@ -10,7 +10,7 @@ A form field in which a user can enter text.
 - Do not use a Text Input when users could provide more than 1 sentence of text.
 - The width of the Text Input should be appropriate for the information to be entered.
 - A Text Input must have a Label, and in most cases, this label should be visible.
-- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as personal data.
   Some browser extensions for spell-checking send this information to external servers.
 - Apply automatic assistance where possible.
   For example, in logged-in systems, pre-filling known values can prevent errors and save time.
diff --git a/packages/react/src/PasswordInput/PasswordInput.test.tsx b/packages/react/src/PasswordInput/PasswordInput.test.tsx
index d66760b0b0..61124d0cda 100644
--- a/packages/react/src/PasswordInput/PasswordInput.test.tsx
+++ b/packages/react/src/PasswordInput/PasswordInput.test.tsx
@@ -31,12 +31,11 @@ describe('Password input', () => {
     expect(component).toHaveClass('ams-password-input extra')
   })
 
-  it('renders three attributes for privacy', () => {
+  it('renders two attributes for privacy', () => {
     const { container } = render(<PasswordInput />)
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveAttribute('autocapitalize', 'none')
     expect(component).toHaveAttribute('autocorrect', 'off')
     expect(component).toHaveAttribute('spellcheck', 'false')
   })
diff --git a/packages/react/src/PasswordInput/PasswordInput.tsx b/packages/react/src/PasswordInput/PasswordInput.tsx
index 3df1d9095c..dc4ccd6039 100644
--- a/packages/react/src/PasswordInput/PasswordInput.tsx
+++ b/packages/react/src/PasswordInput/PasswordInput.tsx
@@ -20,7 +20,6 @@ export const PasswordInput = forwardRef(
     <input
       {...restProps}
       aria-invalid={invalid || undefined}
-      autoCapitalize="none"
       autoCorrect="off"
       className={clsx('ams-password-input', className)}
       dir={dir ?? 'auto'}
diff --git a/storybook/src/components/TextInput/TextInput.docs.mdx b/storybook/src/components/TextInput/TextInput.docs.mdx
index f399a2bf3f..02d659eaad 100644
--- a/storybook/src/components/TextInput/TextInput.docs.mdx
+++ b/storybook/src/components/TextInput/TextInput.docs.mdx
@@ -26,7 +26,7 @@ On some devices, it may show an email-specific keyboard.
 Consider setting the following attributes:
 
 1. Set `autocomplete="email"` to help browsers autofill the user’s email address.
-2. Set `autocapitalize="none"`, `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
+2. Set `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
    Email addresses shouldn’t be checked for spelling or grammar.
    This may also prevent posting the email address to third-party plugins.
 
@@ -46,7 +46,7 @@ On some devices, it may show a URL-specific keyboard to aid in entering web addr
 Consider setting the following attributes:
 
 1. Set `autocomplete="url"` to help browsers autofill the user’s web address.
-2. Set `autocapitalize="none"`, `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
+2. Set `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
    Email addresses shouldn’t be checked for spelling or grammar.
    This may also prevent posting the web address to third-party plugins.
 

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 2/3] chore: Update Switch docs (#1527)

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 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
 
 <Markdown>{README}</Markdown>
 
-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 `<Label>` component.
-
 <Primary />
 
 <Controls />
diff --git a/storybook/src/components/Switch/Switch.stories.tsx b/storybook/src/components/Switch/Switch.stories.tsx
index 368a9f750f..fbba1969a3 100644
--- a/storybook/src/components/Switch/Switch.stories.tsx
+++ b/storybook/src/components/Switch/Switch.stories.tsx
@@ -16,9 +16,6 @@ const meta = {
     disabled: false,
   },
   argTypes: {
-    'aria-label': {
-      description: 'Describes the control.',
-    },
     checked: {
       description: 'Whether the control is initially checked.',
     },
@@ -45,11 +42,7 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    'aria-label': 'Default',
-  },
-}
+export const Default: Story = {}
 
 export const WithLabel: Story = {
   decorators: [

From 339bd1eff89e095a96be048ea6f6311bbf3e7980 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Sat, 24 Aug 2024 10:02:10 +0200
Subject: [PATCH 3/3] feat: Show selected and disabled Tabs in forced colors
 mode (#1517)

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 packages/css/src/components/tabs/tabs.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index 5013182b03..9e13233d15 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -38,6 +38,10 @@
   &:disabled {
     color: var(--ams-tabs-button-disabled-color);
     cursor: var(--ams-tab-button-disabled-cursor);
+
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
   }
 
   &:hover:not([aria-selected="true"], [disabled]) {
@@ -48,5 +52,9 @@
   &[aria-selected="true"] {
     background-color: var(--ams-tabs-button-selected-background-color);
     color: var(--ams-tabs-button-selected-color);
+
+    @media (forced-colors: active) {
+      background-color: SelectedItem;
+    }
   }
 }