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/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/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/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; + } } } 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() 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( {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 `