fix: resolve a11y errors

.nx/version-plans/version-plan-1780519770858.md

@@ -0,0 +1,5 @@
+---
+gamut: patch
+---
+
+fix a11y errors and enable SB addon-a11y to error

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

@@ -1,6 +1,6 @@
 import { css } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
-import { useEffect } from 'react';
+import { useEffect, useId } from 'react';
 import * as React from 'react';
 
 import { FormError, FormGroup, FormGroupLabel, FormGroupProps } from '..';
@@ -65,6 +65,8 @@ export function ConnectedFormGroup<T extends ConnectedField>({
     disabled,
   });
   const { component: Component, ...rest } = field;
+  const uniqueIdSuffix = useId();
+  const htmlForId = `${name}-${uniqueIdSuffix}`;
 
   useEffect(() => {
     if (customError) {
@@ -78,7 +80,7 @@ export function ConnectedFormGroup<T extends ConnectedField>({
   const renderedLabel = (
     <FormGroupLabel
       disabled={isDisabled}
-      htmlFor={id || name}
+      htmlFor={id || htmlForId}
       infotip={infotip}
       isSoloField={isSoloField}
       required={!!validation?.required}
@@ -100,6 +102,7 @@ export function ConnectedFormGroup<T extends ConnectedField>({
         aria-describedby={errorId}
         aria-invalid={showError}
         disabled={disabled}
+        htmlFor={htmlForId}
         name={name}
       />
       {children}

packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useId } from 'react';
 import { Controller } from 'react-hook-form';
 
 import { Checkbox } from '../..';
@@ -21,6 +22,7 @@ export const ConnectedCheckbox: React.FC<ConnectedCheckboxProps> = ({
     name,
     disabled,
   });
+  const uniqueIdSuffix = useId();
 
   return (
     <Controller
@@ -40,7 +42,7 @@ export const ConnectedCheckbox: React.FC<ConnectedCheckboxProps> = ({
           checked={value}
           className={className}
           disabled={isDisabled}
-          htmlFor={name}
+          htmlFor={`${name}-${uniqueIdSuffix}`}
           id={id}
           infotip={infotip}
           label={label}

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

@@ -27,10 +27,10 @@ const getBaseCases = (view: RenderResult<typeof queries, HTMLElement>) => {
     name: 'cool-checkbox',
   }) as HTMLInputElement;
   const selectField = view.getByRole('combobox', {
-    name: '',
+    name: /cool-select/,
   }) as HTMLInputElement;
   const textField = view.getByRole('textbox', {
-    name: '',
+    name: /cool-input/,
   }) as HTMLInputElement;
   const radioGroup = view.getByRole('radiogroup');
   const radioOption = view.getByLabelText('two') as HTMLInputElement;

packages/gamut/src/DataList/Tables/Rows/TableRow.tsx

@@ -142,6 +142,11 @@ export const TableRow: DataRow = ({
         if (loading) {
           return (
             <ListCol {...colProps} key={newKey}>
+              {type === 'header' && (
+                <Text as="span" screenreader>
+                  Loading data
+                </Text>
+              )}
               <Shimmer
                 height="calc(100% - 1rem)"
                 minHeight={24}

packages/gamut/src/DataList/__tests__/DataGrid.test.tsx

@@ -642,6 +642,18 @@ describe('DataGrid', () => {
     }
   );
 
+  describe('Loading state', () => {
+    it('renders screenreader loading text for header type columns when loading', () => {
+      const { view } = renderView({
+        loading: true,
+        rows: [],
+        columns: [{ key: 'name', type: 'header' }, { key: 'sin' }],
+      });
+
+      expect(view.getAllByText('Loading data')).toHaveLength(5);
+    });
+  });
+
   describe('Container query control', () => {
     it('applies container query styles by default', () => {
       const { view } = renderView();

packages/gamut/src/List/ListRow.tsx

@@ -114,6 +114,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
     return (
       <RowEl
         aria-live={renderExpanded ? 'polite' : undefined}
+        as={isTable ? 'tr' : 'li'}
         expanded={isTable ? undefined : !!renderExpanded}
         flexWrap={
           isTable && renderExpanded

packages/gamut/src/Menu/MenuItem.tsx

@@ -75,6 +75,7 @@ export const MenuItem = forwardRef<
       label,
       target,
       width = 1,
+      'aria-label': explicitAriaLabel,
       ...props
     },
     ref
@@ -110,7 +111,7 @@ export const MenuItem = forwardRef<
       variant: 'link',
       role: role === 'menu' ? 'menuitem' : undefined,
       [activeProp]: active,
-      'aria-label': isIconOnly ? ariaLabel : undefined,
+      'aria-label': isIconOnly ? ariaLabel ?? explicitAriaLabel : undefined,
       'aria-describedby': !isIconOnly && ariaLabel ? tipId : undefined,
       'aria-disabled': disabled,
       isDisabled: disabled,

packages/gamut/src/Menu/MenuSeparator.tsx

@@ -9,8 +9,15 @@ interface MenuSeperatorProps extends FlexBoxProps {
 
 export const MenuSeparator: React.FC<MenuSeperatorProps> = (props) => {
   return (
-    <FlexBox as="li" center fit height={8} role="separator" {...props}>
-      <Box bg="text-disabled" borderRadius="sm" fit height="1px" mx={16} />
+    <FlexBox as="li" center fit height={8} {...props}>
+      <Box
+        bg="text-disabled"
+        borderRadius="sm"
+        fit
+        height="1px"
+        mx={16}
+        role="separator"
+      />
     </FlexBox>
   );
 };

packages/gamut/src/Tabs/TabNavLink.tsx

@@ -7,7 +7,7 @@ const StyledTabNavLink = styled(TabButton)();
 
 export const TabNavLink: React.FC<ComponentProps<typeof StyledTabNavLink>> = ({
   variant = 'standard',
-  role = 'tab',
+  role = 'button',
   ...rest
 }) => {
   return <StyledTabNavLink role={role} variant={variant} {...rest} />;

packages/gamut/src/Tabs/__tests__/TabNavLink.test.tsx

@@ -0,0 +1,16 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+
+import { TabNavLink } from '../TabNavLink';
+
+const renderView = setupRtl(TabNavLink, {
+  href: '/',
+  children: 'Tab Link',
+});
+
+describe('TabNavLink', () => {
+  it('renders with role button by default', () => {
+    const { view } = renderView();
+
+    view.getByRole('button', { name: 'Tab Link' });
+  });
+});

packages/gamut/src/Tag/index.tsx

@@ -89,7 +89,7 @@ export const Tag: React.FC<TagProps> = ({
       {isSelection && (
         <DismissButton
           aria-disabled={disabled}
-          aria-label={disabled ? '' : `Dismiss ${children} Tag`}
+          aria-label={`Dismiss ${children} Tag`}
           disabled={disabled}
           icon={isLarge ? LargeMiniDeleteIcon : DefaultMiniDeleteIcon}
           isLarge={isLarge}

packages/styleguide/.storybook/components/Elements/ImageGallery.tsx

@@ -45,6 +45,14 @@ const StyledText = styled(Text)(
   })
 );
 
+const StyledLabel = styled.label(
+  css({
+    fontSize: 14,
+    fontWeight: 'bold',
+    textTransform: 'capitalize',
+  })
+);
+
 export const ImageGallery: React.FC<ImageGalleryProps> = ({
   images = [],
   showControls = true,
@@ -111,26 +119,19 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     <Box width="100%">
       {showControls && (
         <FlexBox center gap={12} mb={16} p={16} pb={0}>
-          <Text fontSize={14} fontWeight="bold">
-            Columns:
-          </Text>
+          <StyledLabel htmlFor="columns">Columns:</StyledLabel>
           <Input
+            id="columns"
             type="number"
             min={minColumns}
             max={maxColumns}
             value={columns}
             onChange={handleColumnsChange}
             size="small"
           />
-          <Text
-            fontSize={14}
-            fontWeight="bold"
-            ml={16}
-            textTransform="capitalize"
-          >
-            {imageType} size:
-          </Text>
+          <StyledLabel htmlFor="image-size">{imageType} size:</StyledLabel>
           <Input
+            id="image-size"
             type="number"
             min={minImageSize}
             max={maxImageSize}
@@ -142,10 +143,9 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
           />
           <Box flex={1} />
           <FlexBox center row gap={12}>
-            <Text fontSize={14} fontWeight="bold">
-              Filter:
-            </Text>
+            <StyledLabel htmlFor="filter">Filter:</StyledLabel>
             <Input
+              id="filter"
               type="text"
               placeholder={`Search ${imageType}s...`}
               value={filter}

packages/styleguide/.storybook/preview.ts

@@ -27,7 +27,7 @@ const mdxComponents = {
 const preview: Preview = {
   parameters: {
     a11y: {
-      test: 'todo',
+      test: 'error',
     },
     interactions: {
       disable: true,

packages/styleguide/src/lib/Atoms/Animations/Rotation/Rotation.stories.tsx

@@ -18,7 +18,10 @@ export const Default: React.FC<ComponentProps<typeof Rotation>> = (args) => {
   }, [args.rotated]);
 
   return (
-    <StrokeButton onClick={() => setRotated(!isRotated)}>
+    <StrokeButton
+      aria-label="Toggle rotation demo"
+      onClick={() => setRotated(!isRotated)}
+    >
       <Rotation {...args} rotated={isRotated}>
         <MiniChevronDownIcon />
       </Rotation>

packages/styleguide/src/lib/Atoms/Badge/Badge.stories.tsx

@@ -55,7 +55,7 @@ export const Custom: Story = {
         variant="custom"
         {...args}
       />
-      <Badge bg="green" variant="custom" {...args} />
+      <Badge bg="green-400" variant="custom" {...args} />
       <Badge bg="orange-500" variant="custom" {...args} />
       <Badge
         bg="lightBlue"