From 54c8fdb14874050d6a32ebcb6fd5a3c8aea6f2ff Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 30 Sep 2024 16:00:28 +0000
Subject: [PATCH 1/5] Add note on `autocomplete` attribute

---
 content/components/text-input.mdx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/content/components/text-input.mdx b/content/components/text-input.mdx
index 4da524c40..8381dac35 100644
--- a/content/components/text-input.mdx
+++ b/content/components/text-input.mdx
@@ -159,12 +159,13 @@ The input must have an associated `<label>` to give it an accessible name that i
 
 If the text input's value is invalid, this must be programmatically conveyed, and not solely rely on visual styling (such as a colored border). In addition, the form must show a descriptive error message that provides further information to the user about what the error is, and how to correct it. See [documentation for form validation](https://primer.style/ui-patterns/forms/overview#validation) for further details.
 
-- Text inputs must have a visible label. While the component allows for labels to be visually hidden, this is only permitted if there is equivalent visible text already within the page that acts as a label for the input. [@COMMENT: In limited cases an icon alone could act as the visible label, so not just text.
+- Text inputs must have a visible label. While the component allows for labels to be visually hidden, this is only permitted if there is equivalent visible text already within the page that acts as a label for the input. In limited cases an icon alone could act as the visible label, so not just text.
 - [Placeholder text](/guides/accessibility/placeholders) is **never** an acceptable substitute for a label because:
   - The placeholder text disappears as soon as the input has a value
   - Placeholder text colors are typically too light to meet the minimum color contrast ratio required for accessibility
   - Do not rely solely on placeholder text as a label. Once a user enters information in a text input, this placeholder text won't be visible anymore, effectively leading to the input lacking a label.
 - Text inputs whose value is used to filter a list of results should be paired with an announcement for the effect of the filter. For more information, see the [conveying status (filter results)](/ui-patterns/loading#filter-results) section of the loading state pattern guidelines.
+- Text inputs should typically include an `autocomplete` attribute with the appropriate value, as this can help users understand the purpose of text input.
 
 ### Built-in accessibility features
 
@@ -174,6 +175,8 @@ Rails and React implementations automatically associate input captions and valid
 
 The colors used to visually denote the validation state of the input meet minimum color contrast requirements.
 
+Usage of the `autocomplete` attribute is available in `TextInput` via the `autoComplete` prop in the React version.
+
 ### Implementation requirements
 
 When using Octicons for leading and trailing visuals, note that icons don't have any text alternative. They are purely visual, and not conveyed to screen readers. Don't rely on these icons alone to convey meaning – make sure that the text label of the button provides sufficient meaning/context on its own.
@@ -182,6 +185,8 @@ In the React version, when setting the `loading` property, the component will in
 
 While the Rails version of the component allows for the visible label of the text input to be hidden using `visually_hide_label`, this should only be done if there is an equivalent visible text that acts as the label. In that case, make sure that the actual label / accessible name of the input matches, or is at least contained within, the visible text acting as the label.
 
+If using this component in a way where the input can be mapped to an `autocomplete` value, you should utilize the `autocomplete` attribute with the correct value. 
+
 ### How to test the component
 
 #### Integration tests
@@ -189,12 +194,15 @@ While the Rails version of the component allows for the visible label of the tex
 - The text input has a sufficiently descriptive visible label, and does not rely on the use of placeholder text alone to act as the visible label
 - If the text input includes icons for its leading or trailing visuals, the input's purpose is clear even without the icons (as these are only decorative and are not conveyed to screen reader users)
 - In the React version, when using the `loading` state, this state is conveyed appropriately to screen reader users
+- Ensure that the text input has a `autocomplete` attribute attached, if the field can be mapped to an [autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens).
 
 #### Component tests
 
 The `<label for="…">` attribute must point to the `id` of the `<input>`
 - If the component is set to `disabled`, the rendered `<input>` includes the `disabled` HTML attribute
 - If the component has a `placeholder` attribute, the rendered `<input>` includes the `placeholder` HTML attribute
+- If the component has a `autocomplete` attribute, the rendered `<input>` includes the `autocomplete` HTML attribute
+- If the component has a `autocomplete` attribute, the correct value is used for the `autocomplete` HTML attribute.
 - In the Rails implementation, if the component has a `caption`, the caption is rendered as an additional container underneath the `<input>`, and the `<input>` has an `aria-describedby="…"` pointing to the `id` attribute of the container
 - In the Rails implementation, if the component has a `validationMessage`, the message is rendered as an additional container underneath the `<input>`, and the `<input>` has an `aria-describedby="…"` pointing to the `id` attribute of the container
 - In the React implementation, text input fields are composed with the `FormControl` component.

From 339f95f8aaad24af15cc6a000831166db2835c2a Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 30 Sep 2024 16:19:16 -0400
Subject: [PATCH 2/5] Update content/components/text-input.mdx

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
---
 content/components/text-input.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/components/text-input.mdx b/content/components/text-input.mdx
index 8381dac35..13b32e60f 100644
--- a/content/components/text-input.mdx
+++ b/content/components/text-input.mdx
@@ -201,8 +201,8 @@ If using this component in a way where the input can be mapped to an `autocomple
 The `<label for="…">` attribute must point to the `id` of the `<input>`
 - If the component is set to `disabled`, the rendered `<input>` includes the `disabled` HTML attribute
 - If the component has a `placeholder` attribute, the rendered `<input>` includes the `placeholder` HTML attribute
-- If the component has a `autocomplete` attribute, the rendered `<input>` includes the `autocomplete` HTML attribute
-- If the component has a `autocomplete` attribute, the correct value is used for the `autocomplete` HTML attribute.
+- If the component has an `autocomplete` attribute, the rendered `<input>` includes the `autocomplete` HTML attribute
+- If the component has an `autocomplete` attribute, the correct value is used for the `autocomplete` HTML attribute.
 - In the Rails implementation, if the component has a `caption`, the caption is rendered as an additional container underneath the `<input>`, and the `<input>` has an `aria-describedby="…"` pointing to the `id` attribute of the container
 - In the Rails implementation, if the component has a `validationMessage`, the message is rendered as an additional container underneath the `<input>`, and the `<input>` has an `aria-describedby="…"` pointing to the `id` attribute of the container
 - In the React implementation, text input fields are composed with the `FormControl` component.

From 11f4a6c629cb831cfe10ad08d9729db23d773a5a Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 30 Sep 2024 16:19:25 -0400
Subject: [PATCH 3/5] Update content/components/text-input.mdx

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
---
 content/components/text-input.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/components/text-input.mdx b/content/components/text-input.mdx
index 13b32e60f..58a23343f 100644
--- a/content/components/text-input.mdx
+++ b/content/components/text-input.mdx
@@ -194,7 +194,7 @@ If using this component in a way where the input can be mapped to an `autocomple
 - The text input has a sufficiently descriptive visible label, and does not rely on the use of placeholder text alone to act as the visible label
 - If the text input includes icons for its leading or trailing visuals, the input's purpose is clear even without the icons (as these are only decorative and are not conveyed to screen reader users)
 - In the React version, when using the `loading` state, this state is conveyed appropriately to screen reader users
-- Ensure that the text input has a `autocomplete` attribute attached, if the field can be mapped to an [autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens).
+- Ensure that the text input has an `autocomplete` attribute attached, if the field can be mapped to an [autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens).
 
 #### Component tests
 

From 5d47b64b4f2d029de3d145497da8a5b6ef3f6b28 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 30 Sep 2024 19:13:44 -0400
Subject: [PATCH 4/5] Update content/components/text-input.mdx

Co-authored-by: Alistair Duggin <aduggin@users.noreply.github.com>
---
 content/components/text-input.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/components/text-input.mdx b/content/components/text-input.mdx
index 58a23343f..afd1c02f3 100644
--- a/content/components/text-input.mdx
+++ b/content/components/text-input.mdx
@@ -165,7 +165,7 @@ If the text input's value is invalid, this must be programmatically conveyed, an
   - Placeholder text colors are typically too light to meet the minimum color contrast ratio required for accessibility
   - Do not rely solely on placeholder text as a label. Once a user enters information in a text input, this placeholder text won't be visible anymore, effectively leading to the input lacking a label.
 - Text inputs whose value is used to filter a list of results should be paired with an announcement for the effect of the filter. For more information, see the [conveying status (filter results)](/ui-patterns/loading#filter-results) section of the loading state pattern guidelines.
-- Text inputs should typically include an `autocomplete` attribute with the appropriate value, as this can help users understand the purpose of text input.
+- Text inputs that collect personal information about the user who is filling in the form require  an `autocomplete` attribute with the appropriate value, as this can help users understand the purpose of text input.
 
 ### Built-in accessibility features
 

From a1404b4f046ce0e85bd4b52eadeb39cb9e2b26f0 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 30 Sep 2024 19:14:12 -0400
Subject: [PATCH 5/5] Update content/components/text-input.mdx

Co-authored-by: Alistair Duggin <aduggin@users.noreply.github.com>
---
 content/components/text-input.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/components/text-input.mdx b/content/components/text-input.mdx
index afd1c02f3..d3b98f248 100644
--- a/content/components/text-input.mdx
+++ b/content/components/text-input.mdx
@@ -194,7 +194,7 @@ If using this component in a way where the input can be mapped to an `autocomple
 - The text input has a sufficiently descriptive visible label, and does not rely on the use of placeholder text alone to act as the visible label
 - If the text input includes icons for its leading or trailing visuals, the input's purpose is clear even without the icons (as these are only decorative and are not conveyed to screen reader users)
 - In the React version, when using the `loading` state, this state is conveyed appropriately to screen reader users
-- Ensure that the text input has an `autocomplete` attribute attached, if the field can be mapped to an [autocomplete value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens).
+- Ensure that the text input has an `autocomplete` attribute attached, if the field collects personal information about the user who is filling in the form and maps to an autocomplete field described in [Input Purposes for User Interface Components](https://www.w3.org/TR/WCAG21/#input-purposes)
 
 #### Component tests