@arbor-education/design-system.components 4.7.1 → 4.8.0

package/src/components/fileUpload/FileUpload.tsx

@@ -3,18 +3,17 @@ import { Button } from 'Components/button/Button';
 import { Card } from 'Components/card/Card';
 import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
-import { Separator } from 'Components/separator/Separator';
 import { useState, type AnchorHTMLAttributes, type ReactElement, type ReactNode } from 'react';
 import Dropzone from 'react-dropzone';
-import { Progress } from 'Components/progress/Progress';
 import type { WidgetRenderLinkArgs } from 'Components/widget/types';
 import { FileUploadLinkModal, type FileUploadLink } from './FileUploadLinkModal.js';
+import { FileList, type FileListProps as ListProps } from './FileList.js';
 
 export type { FileUploadLink };
 
 type LinkAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
 
-type UploadedFile = {
+export type UploadedFile = {
   fileName: string;
   icon?: IconName;
   fileType?: string;
@@ -24,7 +23,7 @@ type UploadedFile = {
   renderLink?: (args: WidgetRenderLinkArgs) => ReactElement;
   onEdit?: (link: FileUploadLink) => void;
   onDownload?: () => void;
-  onDelete: () => void;
+  onDelete?: () => void;
   progressPercentage?: number;
   hasUploadFailed?: boolean;
 };
@@ -39,18 +38,6 @@ export type FileUploadProps = {
 
 type LinkPopupState = { mode: 'add' } | { mode: 'edit'; index: number } | null;
 
-const renderFileLink = ({ href = '', linkProps, renderLink }: UploadedFile, children: ReactNode) => {
-  const className = 'ds-file-upload__file-link';
-  if (renderLink) {
-    return renderLink({ href, className, children, linkProps });
-  }
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" className={className} {...linkProps}>
-      {children}
-    </a>
-  );
-};
-
 export const FileUpload = (props: FileUploadProps) => {
   const {
     className,
@@ -88,7 +75,7 @@ export const FileUpload = (props: FileUploadProps) => {
     </>
   );
 
-  const editedFile = linkPopup?.mode === 'edit' ? uploadedFiles[linkPopup.index] : undefined;
+  const fileToEdit = linkPopup?.mode === 'edit' ? uploadedFiles[linkPopup.index] : undefined;
 
   return (
     <div
@@ -136,108 +123,32 @@ export const FileUpload = (props: FileUploadProps) => {
           onCancel={() => setLinkPopup(null)}
         />
       )}
-      {editedFile?.href && editedFile.onEdit && (
+      {fileToEdit?.href && fileToEdit.onEdit && (
         <FileUploadLinkModal
           title="Update URL attachment"
           submitLabel="Update"
-          initialLink={{ url: editedFile.href, name: editedFile.fileName }}
+          initialLink={{ url: fileToEdit.href, name: fileToEdit.fileName }}
           onSubmit={(link) => {
-            editedFile.onEdit?.(link);
+            fileToEdit.onEdit?.(link);
             setLinkPopup(null);
           }}
           onCancel={() => setLinkPopup(null)}
         />
       )}
       {uploadedFiles.length > 0 && (
-        <Card className="ds-file-upload__file-list">
-          {uploadedFiles.map((file, index) => {
-            const {
-              fileName,
-              fileSize,
-              fileType,
-              href,
-              onEdit,
-              onDelete,
-              onDownload,
-              hasUploadFailed,
-              progressPercentage,
-            } = file;
-            const icon = file.icon ?? (href ? 'link' : 'file');
-            const nameNode = <span className="ds-file-upload__file-name">{fileName}</span>;
-            return (
-              <div key={fileName} className="ds-file-upload__file-outer">
-                <span className="ds-file-upload__file">
-                  <span className="ds-file-upload__icon-wrapper">
-                    <Icon size={24} name={icon} color="var(--color-brand-600)" />
-                  </span>
-                  <span className="ds-file-upload__file-details">
-                    {href ? renderFileLink(file, nameNode) : nameNode}
-                    {
-                      hasUploadFailed
-                        ? (
-                            <span className="ds-file-upload__upload-failed">
-                              <Icon name="circle-alert" />
-                              {' '}
-                              Upload failed
-                            </span>
-                          )
-                        : <span className="ds-file-upload__file-meta">{href ?? `${fileType}, ${fileSize}`}</span>
-                    }
-                  </span>
-                  {href && (
-                    <Button
-                      variant="secondary"
-                      isRound
-                      onClick={() => navigator.clipboard.writeText(href)}
-                    >
-                      <Icon name="copy" screenReaderText="Copy link" />
-                    </Button>
-                  )}
-                  {href && onEdit && (
-                    <Button
-                      variant="secondary"
-                      isRound
-                      onClick={() => setLinkPopup({ mode: 'edit', index })}
-                    >
-                      <Icon name="pencil" screenReaderText="Edit link" />
-                    </Button>
-                  )}
-                  {onDownload && (
-                    <Button
-                      variant="secondary"
-                      isRound
-                      onClick={onDownload}
-                    >
-                      <Icon name="download" screenReaderText="Download file" />
-                    </Button>
-                  )}
-                  {onDelete && (
-                    <Button
-                      variant="secondary"
-                      isRound
-                      onClick={onDelete}
-                    >
-                      <Icon name="trash" screenReaderText={href ? 'Delete link' : 'Delete file'} />
-                    </Button>
-                  )}
-                </span>
-                {typeof progressPercentage === 'number' && progressPercentage < 100
-                  && (
-                    <Progress
-                      value={progressPercentage}
-                      className="ds-file-upload__progress-bar"
-                      aria-label="Upload progress bar"
-                      indicatorClassName={classNames('ds-file-upload__progress-bar-indicator', {
-                        'ds-file-upload__progress-bar-indicator--failed': hasUploadFailed,
-                      })}
-                    />
-                  )}
-                {index < uploadedFiles.length - 1 && <Separator />}
-              </div>
-            );
-          })}
-        </Card>
+        <FileList
+          uploadedFiles={uploadedFiles}
+          onEditFile={index => setLinkPopup({ mode: 'edit', index })}
+        />
       )}
     </div>
   );
 };
+
+FileUpload.FileList = FileList;
+
+export namespace FileUpload {
+  export type Props = FileUploadProps;
+  export type FileListProps = ListProps;
+  export type File = UploadedFile;
+}

package/src/components/heading/Heading.stories.tsx

@@ -256,6 +256,17 @@ const meta = {
         type: { summary: 'string' },
       },
     },
+    errorMessage: {
+      control: 'text',
+      description: [
+        'Error message shown beneath the heading with the error icon, matching the FormField error style.',
+        'Setting it also sets `aria-describedby` on the heading so screen readers announce the message with it.',
+        'Write it as what went wrong plus how to fix it.',
+      ].join(' '),
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 } satisfies Meta<typeof Heading>;
 
@@ -447,6 +458,18 @@ export const Default: Story = withDescription(
   'The interactive canvas story — every prop is wired to the **Controls** panel. Use the controls to change `level` (1–4) and see the heading typography scale live. The `children` control is disabled because complex JSX cannot be round-tripped through Storybook\'s serialiser — use the named stories below to explore composition patterns.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    args: {
+      level: 1,
+      children: 'Student records',
+      errorMessage: 'Select a school before saving these records',
+    },
+    render: args => <Heading {...args} />,
+  },
+  'Error state — setting `errorMessage` shows the message beneath the heading with the error icon, and links it to the heading through `aria-describedby`. Use it for a page-level problem that the user must fix, such as a missing required selection.',
+);
+
 export const AllLevels: Story = withDescription(
   {
     render: AllLevelsTemplate,

package/src/components/heading/Heading.test.tsx

@@ -26,4 +26,42 @@ describe('Heading', () => {
 
     expect(screen.getByText('foobar').tagName).toBe('H2');
   });
+
+  test('renders the error message when errorMessage is set', () => {
+    render(<Heading errorMessage="Enter a student name">Student</Heading>);
+
+    expect(screen.getByText('Enter a student name')).toBeInTheDocument();
+  });
+
+  test('links the heading to the error message with aria-describedby', () => {
+    render(<Heading errorMessage="Enter a student name">Student</Heading>);
+
+    const heading = screen.getByRole('heading', { name: 'Student' });
+    const message = screen.getByText('Enter a student name');
+    expect(heading).toHaveAttribute('aria-describedby', message.id);
+  });
+
+  test('preserves an existing aria-describedby alongside the error message id', () => {
+    render(
+      <Heading errorMessage="Enter a student name" aria-describedby="hint">
+        Student
+      </Heading>,
+    );
+
+    const message = screen.getByText('Enter a student name');
+    expect(screen.getByRole('heading')).toHaveAttribute('aria-describedby', `hint ${message.id}`);
+  });
+
+  test('does not render an error or aria-describedby when errorMessage is not set', () => {
+    render(<Heading>Student</Heading>);
+
+    expect(screen.getByRole('heading')).not.toHaveAttribute('aria-describedby');
+    expect(document.querySelector('.ds-heading__error-message')).not.toBeInTheDocument();
+  });
+
+  test('does not forward errorMessage to the DOM element', () => {
+    render(<Heading errorMessage="Enter a student name">Student</Heading>);
+
+    expect(screen.getByRole('heading')).not.toHaveAttribute('errormessage');
+  });
 });

package/src/components/heading/Heading.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { createElement, type HTMLAttributes, type HTMLProps } from 'react';
+import { createElement, useId, type HTMLAttributes, type HTMLProps } from 'react';
+import { Icon } from 'Components/icon/Icon';
 
 type HeadingSubContainerProps = HTMLAttributes<HTMLSpanElement>;
 
@@ -21,10 +22,12 @@ export type HeadingLevel = 1 | 2 | 3 | 4;
 
 type HeadingProps = {
   level?: HeadingLevel;
+  errorMessage?: string;
 } & HTMLProps<HTMLHeadingElement>;
 
 export const Heading = (props: HeadingProps) => {
-  const { level = 1, children } = props;
+  const { level = 1, children, errorMessage, ...rest } = props;
+  const generatedId = useId();
   const Component = {
     1: 'h1',
     2: 'h2',
@@ -32,7 +35,28 @@ export const Heading = (props: HeadingProps) => {
     4: 'h4',
   }[level];
 
-  return createElement(Component, { ...props, className: classNames('ds-heading', props.className) }, children);
+  const errorId = `${generatedId}-error`;
+  const describedBy = classNames(rest['aria-describedby'], errorMessage && errorId) || undefined;
+
+  const heading = createElement(
+    Component,
+    { ...rest, 'aria-describedby': describedBy, 'className': classNames('ds-heading', rest.className) },
+    children,
+  );
+
+  if (!errorMessage) {
+    return heading;
+  }
+
+  return (
+    <div className="ds-heading__wrapper">
+      {heading}
+      <span className="ds-heading__error-message" id={errorId}>
+        <Icon size={12} name="triangle-alert" />
+        {errorMessage}
+      </span>
+    </div>
+  );
 };
 
 Heading.InnerContainer = HeadingInnerContainer;

package/src/components/heading/heading.scss

@@ -16,6 +16,24 @@
   }
 }
 
+.ds-heading__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.ds-heading__error-message {
+  display: flex;
+  align-items: center;
+  gap: var(--form-field-spacing-horizontal);
+  padding: 0 var(--page-heading-spacing-gap) var(--page-heading-spacing-gap);
+  color: var(--form-field-text-error-color-error-text);
+
+  .ds-icon {
+    color: var(--form-field-text-error-color-error-icon);
+  }
+}
+
 h1 {
   &.ds-heading, &.ds-heading .ds-heading__inner-container, .ds-editable-text__button, .ds-editable-text__input {
     font-family: var(--type-headings-h1-family);

package/src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx

@@ -267,6 +267,22 @@ export const DisabledChecked: Story = withDescription(
   'Disabled state — pass `disabled: true` via `cellRendererParams` to prevent the user from toggling the value. Useful for read-only rows or conditional editing logic.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <CheckboxCellRenderer
+        {...({} as unknown as CustomCellRendererProps)}
+        value={false}
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        column={{} as CustomCellRendererProps['column']}
+        colDef={{ headerName: 'Enrolled', cellRendererParams: { hasError: true } }}
+      />
+    ),
+  },
+  'Error state — pass `hasError: true` via `cellRendererParams` to flag the checkbox. It forwards to `CheckboxInput`, which sets `aria-invalid="true"` and the error styling. Use it to show a required acknowledgement that has not been given.',
+);
+
 const CHECKBOX_IN_TABLE_DATA = [
   { name: 'Alice Johnson', enrolled: true },
   { name: 'Bob Smith', enrolled: false },

package/src/components/table/cellRenderers/CheckboxCellRenderer.test.tsx

@@ -33,6 +33,14 @@ describe('CheckboxCellRenderer', () => {
     expect(screen.getByRole('checkbox')).toBeChecked();
   });
 
+  test('sets aria-invalid when hasError is passed via cellRendererParams', () => {
+    const props = createMockProps({
+      colDef: { cellRendererParams: { hasError: true } },
+    });
+    render(<CheckboxCellRenderer {...props} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
   test('calls node.setDataValue with toggled value on change', async () => {
     const setDataValue = vi.fn();
     const props = createMockProps({

package/src/components/table/cellRenderers/InlineTextCellRenderer.stories.tsx

@@ -158,6 +158,14 @@ const meta = {
       description: 'AG Grid column instance. Passed as the first argument to `node.setDataValue`.',
       table: { type: { summary: 'Column | null' } },
     },
+    hasError: {
+      control: 'boolean',
+      description: 'Applies the error style to the `TextInput` and sets `aria-invalid`. Pass via `cellRendererParams` (or a `cellRendererParams` function) to flag a cell. Visual and a11y only — the error message itself is not rendered by the cell.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
 } satisfies Meta<typeof InlineTextCellRenderer>;
 
@@ -193,6 +201,20 @@ export const Default: Story = withDescription(
   'Pre-populated with an existing value. The `TextInput` is always visible — type to update the internal value, then press Enter to commit (in a real table, Enter calls `node.setDataValue`).',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <InlineTextCellRenderer
+        {...MOCK_CELL_PROPS}
+        value=""
+        hasError
+      />
+    ),
+  },
+  'Error state — `hasError` applies the error border to the `TextInput` and sets `aria-invalid="true"`. Pass it via `cellRendererParams` to flag a cell, for example when a required value is missing. The error message itself is not rendered in the cell; surface it through the grid\'s own validation or a tooltip if users need the wording.',
+);
+
 export const Empty: Story = withDescription(
   {
     parameters: {

package/src/components/table/cellRenderers/InlineTextCellRenderer.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { InlineTextCellRenderer } from './InlineTextCellRenderer.js';
+
+const createMockProps = (overrides: Partial<CustomCellRendererProps> & { hasError?: boolean } = {}) => ({
+  value: 'Alice',
+  node: { setDataValue: vi.fn() },
+  column: 'name',
+  ...overrides,
+} as unknown as CustomCellRendererProps & { value: string; hasError?: boolean });
+
+describe('InlineTextCellRenderer', () => {
+  test('renders a text input with the supplied value', () => {
+    render(<InlineTextCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).toHaveValue('Alice');
+  });
+
+  test('applies the error style and aria-invalid when hasError is true', () => {
+    render(<InlineTextCellRenderer {...createMockProps({ hasError: true })} />);
+    expect(screen.getByRole('textbox')).toHaveClass('ds-input--error');
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  test('does not apply the error style when hasError is not set', () => {
+    render(<InlineTextCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).not.toHaveClass('ds-input--error');
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid', 'true');
+  });
+});

package/src/components/table/cellRenderers/InlineTextCellRenderer.tsx

@@ -5,10 +5,11 @@ import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 
 type InlineTextCellRendererProps = CustomCellRendererProps & {
   value: string;
+  hasError?: boolean;
 };
 
 export const InlineTextCellRenderer = (props: InlineTextCellRendererProps) => {
-  const { value, valueFormatted, column, node } = props;
+  const { value, valueFormatted, column, node, hasError } = props;
   const [valueToRender, setValueToRender] = useState(String(valueFormatted ?? value ?? ''));
   const valueRef = useRef(valueToRender);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -41,6 +42,8 @@ export const InlineTextCellRenderer = (props: InlineTextCellRendererProps) => {
       <TextInput
         value={valueToRender}
         onChange={handleChange}
+        hasError={hasError}
+        aria-invalid={hasError}
       />
     </div>
   );

package/src/components/table/cellRenderers/NumberInputCellRenderer.stories.tsx

@@ -159,6 +159,14 @@ const meta = {
       description: '`colDef.field` is used as the key passed to `node.setDataValue`. Changes are silently ignored when `field` is absent.',
       table: { type: { summary: 'ColDef' } },
     },
+    hasError: {
+      control: 'boolean',
+      description: 'Applies the error style to the input container and sets `aria-invalid`. Pass via `cellRendererParams` (or a `cellRendererParams` function) to flag a cell. Visual and a11y only — the error message itself is not rendered by the cell.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
 } satisfies Meta<typeof NumberInputCellRenderer>;
 
@@ -244,6 +252,22 @@ export const NullValue: Story = withDescription(
   '`value={null}` is coerced to `0` before being passed to `NumberInput`. This keeps the input always controlled with a valid numeric display.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <NumberInputCellRenderer
+        {...({} as unknown as CustomCellRendererProps)}
+        value={0}
+        hasError
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        colDef={{ field: 'count' }}
+      />
+    ),
+  },
+  'Error state — `hasError` adds the error border to the input container and sets `aria-invalid="true"`. Pass it via `cellRendererParams` to flag a cell, for example when the value falls outside an allowed range. The error message itself is not rendered in the cell.',
+);
+
 export const Disabled: Story = withDescription(
   {
     parameters: { controls: { disable: true } },

package/src/components/table/cellRenderers/NumberInputCellRenderer.test.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 import { NumberInputCellRenderer } from './NumberInputCellRenderer.js';
 
-const createMockProps = (overrides: Partial<CustomCellRendererProps & { value: number | null; min?: number; max?: number; disabled?: boolean }> = {}): CustomCellRendererProps => ({
+const createMockProps = (overrides: Partial<CustomCellRendererProps & { value: number | null; min?: number; max?: number; disabled?: boolean; hasError?: boolean }> = {}): CustomCellRendererProps => ({
   value: 0,
   node: { setDataValue: vi.fn() },
   colDef: { field: 'count' },
@@ -28,6 +28,18 @@ describe('NumberInputCellRenderer', () => {
     expect(screen.getByRole('textbox')).toHaveValue('0');
   });
 
+  test('applies the error style and aria-invalid when hasError is true', () => {
+    render(<NumberInputCellRenderer {...createMockProps({ hasError: true })} />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByRole('textbox').closest('.ds-number-input__container')).toHaveClass('ds-number-input__container--error');
+  });
+
+  test('does not apply the error style when hasError is not set', () => {
+    render(<NumberInputCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByRole('textbox').closest('.ds-number-input__container')).not.toHaveClass('ds-number-input__container--error');
+  });
+
   test('disables the input when disabled prop is true', () => {
     render(<NumberInputCellRenderer {...createMockProps({ disabled: true })} />);
     expect(screen.getByRole('textbox')).toBeDisabled();

package/src/components/table/cellRenderers/NumberInputCellRenderer.tsx

@@ -6,12 +6,13 @@ type NumberInputCellRendererProps = {
   min?: number;
   max?: number;
   disabled?: boolean;
+  hasError?: boolean;
 } & CustomCellRendererProps;
 
 export const NumberInputCellRenderer = (
   props: NumberInputCellRendererProps,
 ) => {
-  const { value, min, max, disabled, node, colDef = {} } = props;
+  const { value, min, max, disabled, hasError, node, colDef = {} } = props;
 
   return (
     <div className="cell-input-wrapper">
@@ -19,6 +20,8 @@ export const NumberInputCellRenderer = (
         min={min}
         max={max}
         disabled={disabled}
+        hasError={hasError}
+        aria-invalid={hasError}
         value={value ?? 0}
         onChange={(e) => {
           if (!colDef.field) {

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.stories.tsx

@@ -326,6 +326,25 @@ export const Disabled: Story = withDescription(
   'Pass `disabled: true` via `cellRendererParams` to prevent the user from changing the selection for specific rows.',
 );
 
+export const WithError: Story = withDescription(
+  {
+    parameters: { controls: { disable: true } },
+    render: () => (
+      <SelectDropdownCellRenderer
+        {...MOCK_CELL_PROPS}
+        api={MOCK_API}
+        value=""
+        options={STATUS_OPTIONS}
+        placeholder="Select status"
+        hasError={true}
+        node={{ setDataValue: () => {} } as unknown as CustomCellRendererProps['node']}
+        column={{} as CustomCellRendererProps['column']}
+      />
+    ),
+  },
+  'Error state — pass `hasError: true` via `cellRendererParams` to flag the trigger. It applies the error style and sets `aria-invalid="true"` for screen readers automatically. The error message itself is not rendered in the cell.',
+);
+
 export const WithBackgroundColor: Story = withDescription(
   {
     parameters: { controls: { disable: true } },

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.test.tsx

@@ -38,6 +38,17 @@ describe('SelectDropdownCellRenderer', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
+  test('applies the error style and aria-invalid when hasError is true', () => {
+    render(<SelectDropdownCellRenderer {...createMockProps()} hasError={true} />);
+    expect(screen.getByRole('button')).toHaveClass('ds-button--error');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  test('does not apply the error style when hasError is not set', () => {
+    render(<SelectDropdownCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('button')).not.toHaveClass('ds-button--error');
+  });
+
   describe('backgroundColor', () => {
     test('does not apply the custom-bg or text-contrast modifiers when not provided', () => {
       const { container } = render(<SelectDropdownCellRenderer {...createMockProps()} />);

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.tsx

@@ -47,7 +47,7 @@ export const SelectDropdownCellRenderer = (
     hasError,
     id,
     'aria-describedBy': ariaDescribedBy,
-    'aria-invalid': ariaInvalid,
+    'aria-invalid': ariaInvalid = hasError,
     alwaysShowPlaceholder = false,
     backgroundColor,
     fillCell = false,