added: [M3-6989] - aria-describedby to TextField with helper text (#…

…11351)

* Add aria-describedby to TextField with helper text

* Always some ID

* cleanup

* add coverage

* Added changeset: aria-describedby to TextField with helper text

* cleanup

* feedback @hkhalil-akamai

packages/manager/.changeset/pr-11351-added-1733194164261.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+aria-describedby to TextField with helper text ([#11351](https://github.com/linode/manager/pull/11351))

packages/ui/src/components/TextField/TextField.test.tsx

@@ -91,4 +91,36 @@ describe('TextField', () => {
     fireEvent.change(input, { target: { value: '1' } });
     expect(input?.getAttribute('value')).toBe('2');
   });
+
+  it('renders a helper text with an input id', () => {
+    const { getByText } = renderWithTheme(
+      <TextField helperText="Helper text" inputId="input-id" label="" />
+    );
+
+    expect(getByText('Helper text')).toBeInTheDocument();
+    const helperText = getByText('Helper text');
+    expect(helperText.getAttribute('id')).toBe('input-id-helper-text');
+  });
+
+  it('renders a helper text with a label', () => {
+    const { getByText } = renderWithTheme(
+      <TextField helperText="Helper text" label="Label" />
+    );
+
+    const helperText = getByText('Helper text');
+
+    expect(helperText).toBeInTheDocument();
+    expect(helperText.getAttribute('id')).toBe('label-helper-text');
+  });
+
+  it('renders a helper text with a fallback id', () => {
+    const { getByText } = renderWithTheme(
+      <TextField helperText="Helper text" label="" />
+    );
+
+    const helperText = getByText('Helper text');
+
+    // ':rg:' being the default react generated id
+    expect(helperText.getAttribute('id')).toBe(':rg:-helper-text');
+  });
 });

packages/ui/src/components/TextField/TextField.tsx

@@ -113,7 +113,8 @@ interface InputToolTipProps {
   tooltipWidth?: number;
 }
 
-interface TextFieldPropsOverrides extends StandardTextFieldProps {
+interface TextFieldPropsOverrides
+  extends Omit<StandardTextFieldProps, 'label'> {
   // We override this prop to make it required
   label: string;
 }
@@ -166,6 +167,7 @@ export const TextField = (props: TextFieldProps) => {
 
   const [_value, setValue] = React.useState<Value>(value);
   const theme = useTheme();
+  const fallbackId = React.useId();
 
   React.useEffect(() => {
     setValue(value);
@@ -249,7 +251,14 @@ export const TextField = (props: TextFieldProps) => {
   }
 
   const validInputId =
-    inputId || (label ? convertToKebabCase(`${label}`) : undefined);
+    inputId ||
+    (label
+      ? convertToKebabCase(label)
+      : // label could still be an empty string
+        fallbackId);
+
+  const helperTextId = `${validInputId}-helper-text`;
+  const errorTextId = `${validInputId}-error-text`;
 
   const labelSuffixText = required
     ? '(required)'
@@ -316,6 +325,7 @@ export const TextField = (props: TextFieldProps) => {
             marginTop: 0,
           }}
           data-qa-textfield-helper-text
+          id={helperTextId}
         >
           {helperText}
         </FormHelperText>
@@ -363,6 +373,9 @@ export const TextField = (props: TextFieldProps) => {
             ...SelectProps,
           }}
           inputProps={{
+            'aria-describedby': helperText ? helperTextId : undefined,
+            'aria-errormessage': errorText ? errorTextId : undefined,
+            'aria-invalid': !!error || !!errorText,
             'data-testid': 'textfield-input',
             id: validInputId,
             ...inputProps,
@@ -436,7 +449,7 @@ export const TextField = (props: TextFieldProps) => {
         </FormHelperText>
       )}
       {helperText && helperTextPosition === 'bottom' && (
-        <FormHelperText data-qa-textfield-helper-text>
+        <FormHelperText data-qa-textfield-helper-text id={helperTextId}>
           {helperText}
         </FormHelperText>
       )}