fix(InfoTip): Remove aria-live and implement focus mgmt

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

@@ -33,6 +33,11 @@ export interface ConnectedFormGroupBaseProps
   name: string;
   label: React.ReactNode;
   required?: boolean;
+  /**
+   * InfoTip to display next to the field label. String labels automatically
+   * label the InfoTip button. For ReactNode labels, provide `ariaLabel` or
+   * set `labelledByFieldLabel: true` to ensure the InfoTip is accessible.
+   */
   infotip?: InfoTipProps;
 }
 

packages/gamut/src/ConnectedForm/__tests__/ConnectedForm.test.tsx

@@ -2,8 +2,9 @@ import { setupRtl } from '@codecademy/gamut-tests';
 import { fireEvent, queries } from '@testing-library/dom';
 import { act, RenderResult, waitFor } from '@testing-library/react';
 
+import { InfoTipProps } from '../../Tip/InfoTip';
 import { createPromise } from '../../utils';
-import { ConnectedForm } from '..';
+import { ConnectedForm, ConnectedFormGroup, ConnectedInput } from '..';
 import { PlainConnectedFields } from '../__fixtures__/helpers';
 
 const renderView = setupRtl(ConnectedForm, {
@@ -359,3 +360,87 @@ describe('ConnectedForm', () => {
     });
   });
 });
+
+describe('ConnectedFormGroup infotip accessibility', () => {
+  const label = 'Infotip Label';
+  const info = 'helpful information';
+  const ariaLabel = 'Custom label';
+
+  const renderConnectedFormGroupView = setupRtl(ConnectedForm, {
+    defaultValues: { input: '' },
+    onSubmit: jest.fn(),
+    children: null,
+  });
+
+  const renderWithInfotip = ({
+    infotip,
+    fieldLabel = label,
+  }: {
+    infotip: InfoTipProps;
+    fieldLabel?: React.ReactNode;
+  }) =>
+    renderConnectedFormGroupView({
+      children: (
+        <ConnectedFormGroup
+          field={{ component: ConnectedInput }}
+          infotip={infotip}
+          label={fieldLabel}
+          name="input"
+        />
+      ),
+    });
+
+  it('automatically labels InfoTip button by the field label when label is a string', () => {
+    const { view } = renderWithInfotip({ infotip: { info } });
+
+    view.getByRole('button', { name: `${label}\u00A0(optional)` });
+  });
+
+  it('uses explicit ariaLabel when provided', () => {
+    const { view } = renderWithInfotip({
+      infotip: { info, ariaLabel },
+    });
+
+    view.getByRole('button', { name: ariaLabel });
+  });
+
+  it('uses explicit ariaLabelledby when provided', () => {
+    const externalLabelId = 'external-label-id';
+    const externalLabelText = 'External Label';
+
+    const { view } = renderConnectedFormGroupView({
+      children: (
+        <>
+          <span id={externalLabelId}>{externalLabelText}</span>
+          <ConnectedFormGroup
+            field={{ component: ConnectedInput }}
+            infotip={{ info, ariaLabelledby: externalLabelId }}
+            label={label}
+            name="input"
+          />
+        </>
+      ),
+    });
+
+    view.getByRole('button', { name: externalLabelText });
+  });
+
+  it('does not automatically label InfoTip when label is a ReactNode', () => {
+    const { view } = renderWithInfotip({
+      infotip: { info, ariaLabel },
+      fieldLabel: <span>{label}</span>,
+    });
+
+    view.getByRole('button', { name: ariaLabel });
+    expect(view.queryByRole('button', { name: new RegExp(label) })).toBeNull();
+  });
+
+  it('labels InfoTip by field label when labelledByFieldLabel is true with ReactNode label', () => {
+    const { view } = renderWithInfotip({
+      infotip: { info, labelledByFieldLabel: true },
+      fieldLabel: <span>{label}</span>,
+    });
+
+    view.getByRole('button', { name: new RegExp(label) });
+  });
+});

packages/gamut/src/Form/__tests__/FormGroup.test.tsx

@@ -70,4 +70,44 @@ describe('FormGroup', () => {
       'there is no up dog here...'
     );
   });
+
+  describe('infotip accessibility', () => {
+    const info = 'helpful information';
+    const ariaLabel = 'Custom label';
+
+    it('automatically labels InfoTip button by the field label when label is a string', () => {
+      const { view } = renderView({ label, htmlFor, infotip: { info } });
+
+      view.getByRole('button', { name: new RegExp(label) });
+    });
+
+    it('uses explicit ariaLabel when provided', () => {
+      const { view } = renderView({
+        label,
+        htmlFor,
+        infotip: { info, ariaLabel },
+      });
+
+      view.getByRole('button', { name: ariaLabel });
+    });
+
+    it('uses explicit ariaLabelledby when provided', () => {
+      const externalLabelId = 'external-label-id';
+      const externalLabelText = 'External Label';
+
+      const { view } = renderView({
+        label,
+        htmlFor,
+        infotip: { info, ariaLabelledby: externalLabelId },
+        children: (
+          <>
+            <span id={externalLabelId}>{externalLabelText}</span>
+            <Input id={htmlFor} />
+          </>
+        ),
+      });
+
+      view.getByRole('button', { name: externalLabelText });
+    });
+  });
 });

packages/gamut/src/Form/elements/FormGroupLabel.tsx

@@ -1,7 +1,7 @@
 import { states, variant } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useId } from 'react';
 import * as React from 'react';
 
 import { FlexBox } from '../..';
@@ -62,6 +62,13 @@ export const FormGroupLabel: React.FC<FormGroupLabelProps> = ({
   size,
   ...rest
 }) => {
+  const labelId = useId();
+  const isStringLabel = typeof children === 'string';
+  const shouldLabelInfoTip =
+    (isStringLabel || infotip?.labelledByFieldLabel) &&
+    !infotip?.ariaLabel &&
+    !infotip?.ariaLabelledby;
+
   return (
     <FlexBox justifyContent="space-between" mb={4}>
       <Label
@@ -70,6 +77,7 @@ export const FormGroupLabel: React.FC<FormGroupLabelProps> = ({
         className={className}
         disabled={disabled}
         htmlFor={htmlFor}
+        id={infotip && shouldLabelInfoTip ? labelId : undefined}
         size={size}
       >
         {children}
@@ -82,7 +90,12 @@ export const FormGroupLabel: React.FC<FormGroupLabelProps> = ({
             '\u00A0(optional)'
           ))}
       </Label>
-      {infotip && <InfoTip {...infotip} />}
+      {infotip && (
+        <InfoTip
+          {...infotip}
+          ariaLabelledby={shouldLabelInfoTip ? labelId : infotip.ariaLabelledby}
+        />
+      )}
     </FlexBox>
   );
 };

packages/gamut/src/GridForm/GridFormInputGroup/__fixtures__/renderers.tsx

@@ -83,13 +83,15 @@ export const getComponent = (componentName: string) => {
 
 type GridFormInputGroupTestComponentProps = GridFormInputGroupProps & {
   mode?: 'onSubmit' | 'onChange';
+  externalLabel?: { id: string; text: string };
 };
 
 export const GridFormInputGroupTestComponent: React.FC<
   GridFormInputGroupTestComponentProps
-> = ({ field, mode = 'onSubmit', ...rest }) => {
+> = ({ field, mode = 'onSubmit', externalLabel, ...rest }) => {
   return (
     <FormContext mode={mode}>
+      {externalLabel && <span id={externalLabel.id}>{externalLabel.text}</span>}
       <GridFormInputGroup field={field} {...rest} />
     </FormContext>
   );

packages/gamut/src/GridForm/GridFormInputGroup/__tests__/GridFormInputGroup.test.tsx

@@ -238,4 +238,69 @@ describe('GridFormInputGroup', () => {
     });
     expect(view.container).not.toContainHTML('Column');
   });
+
+  describe('infotip accessibility', () => {
+    const info = 'helpful information';
+    const ariaLabel = 'Custom label';
+    const textLabel = 'Stub Text';
+    const checkboxLabel = 'Check me!';
+
+    it('automatically labels InfoTip button by the field label when label is a string', () => {
+      const { view } = renderView({
+        field: { ...stubTextField, infotip: { info } },
+      });
+
+      view.getByRole('button', { name: new RegExp(textLabel) });
+    });
+
+    it('uses explicit ariaLabel when provided', () => {
+      const { view } = renderView({
+        field: { ...stubTextField, infotip: { info, ariaLabel } },
+      });
+
+      view.getByRole('button', { name: ariaLabel });
+    });
+
+    it('uses explicit ariaLabelledby when provided', () => {
+      const externalLabelId = 'external-label-id';
+      const externalLabelText = 'External Label';
+
+      const { view } = renderView({
+        field: {
+          ...stubTextField,
+          infotip: { info, ariaLabelledby: externalLabelId },
+        },
+        externalLabel: { id: externalLabelId, text: externalLabelText },
+      });
+
+      view.getByRole('button', { name: externalLabelText });
+    });
+
+    it('does not automatically label InfoTip when label is a ReactNode', () => {
+      const { view } = renderView({
+        field: {
+          ...stubCheckboxField,
+          label: <span>{checkboxLabel}</span>,
+          infotip: { info, ariaLabel },
+        },
+      });
+
+      view.getByRole('button', { name: ariaLabel });
+      expect(
+        view.queryByRole('button', { name: new RegExp(checkboxLabel) })
+      ).toBeNull();
+    });
+
+    it('labels InfoTip by field label when labelledByFieldLabel is true with ReactNode label', () => {
+      const { view } = renderView({
+        field: {
+          ...stubCheckboxField,
+          label: <span>{checkboxLabel}</span>,
+          infotip: { info, labelledByFieldLabel: true },
+        },
+      });
+
+      view.getByRole('button', { name: new RegExp(checkboxLabel) });
+    });
+  });
 });

packages/gamut/src/GridForm/types.ts

@@ -31,6 +31,11 @@ export type BaseFormField<Value> = {
    */
   id?: string;
 
+  /**
+   * InfoTip to display next to the field label. String labels automatically
+   * label the InfoTip button. For ReactNode labels, provide `ariaLabel` or
+   * set `labelledByFieldLabel: true` to ensure the InfoTip is accessible.
+   */
   infotip?: InfoTipProps;
 
   isSoloField?: boolean;

packages/gamut/src/Tip/InfoTip/InfoTipButton.tsx

@@ -22,15 +22,26 @@ export type InfoTipButtonProps = ComponentProps<typeof InfoTipButtonBase> &
   Pick<InfoTipProps, 'emphasis'>;
 
 export const InfoTipButton = forwardRef<ButtonBaseElements, InfoTipButtonProps>(
-  ({ active, children, emphasis, ...props }, ref) => {
+  (
+    {
+      active,
+      children,
+      emphasis,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      ...props
+    },
+    ref
+  ) => {
     const Icon = emphasis === 'high' ? MiniInfoCircleIcon : MiniInfoOutlineIcon;
 
     return (
       <InfoTipButtonBase
+        {...props}
         active={active}
         aria-expanded={active}
-        aria-label="Show information"
-        {...props}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
         ref={ref}
       >
         {Icon && (