@arbor-education/design-system.components 4.5.0 → 4.7.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "4.5.0",
+  "version": "4.7.0-alpha.0",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "type": "module",
@@ -13,9 +13,9 @@
   "dependencies": {
     "@react-hook/resize-observer": "^2.0.2",
     "@uiw/react-color": "2.8.0",
-    "ag-grid-community": "^34.3.1",
-    "ag-grid-enterprise": "^34.3.1",
-    "ag-grid-react": "^34.3.1",
+    "ag-grid-community": "^35.3.1",
+    "ag-grid-enterprise": "^35.3.1",
+    "ag-grid-react": "^35.3.1",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",

package/src/components/avatar/Avatar.tsx

@@ -34,14 +34,14 @@ export const Avatar = (props: AvatarProps) => {
 
     if (initials) {
       return (
-        <span className="ds-avatar__initials" aria-label={alt}>
+        <span className="ds-avatar__initials" aria-label={alt} role="img">
           {initials}
         </span>
       );
     }
 
     return (
-      <span className="ds-avatar__placeholder" aria-label={alt || 'User avatar'}>
+      <span className="ds-avatar__placeholder" aria-label={alt || 'User avatar'} role="img">
         <svg
           viewBox="0 0 24 24"
           fill="currentColor"

package/src/components/badge/Badge.stories.tsx

@@ -433,42 +433,6 @@ const AllVariantsTemplate = () => (
   </div>
 );
 
-const A11yWithLabelTemplate = () => (
-  <div
-    style={{
-      padding: 'var(--spacing-xlarge)',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 'var(--spacing-xlarge)',
-    }}
-  >
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-destructive-600)' }}>
-        Without a11yLabel — screen reader announces "5" (no context)
-      </p>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-        <Icon name="mail" size={16} screenReaderText="Notifications" />
-        <Badge>5</Badge>
-      </div>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-        Screen reader: "mail Notifications, 5"
-      </p>
-    </div>
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-success-600)' }}>
-        With a11yLabel — screen reader announces the full meaningful label
-      </p>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-        <Icon name="mail" size={16} />
-        <Badge a11yLabel="5 unread messages">5</Badge>
-      </div>
-      <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-        Screen reader: "5 unread messages"
-      </p>
-    </div>
-  </div>
-);
-
 // ---------------------------------------------------------------------------
 // Stories
 // ---------------------------------------------------------------------------
@@ -832,70 +796,3 @@ export default AllVariantsTemplate;
   },
   'Full 3 × 8 grid: all three sizes crossed with all eight colour states (default charcoal + 7 palette colours). Use this story as a complete visual reference for the Badge component. Each cell uses the same count (`"9"`) to make size and colour comparisons accurate.',
 );
-
-export const A11yWithLabel: Story = withDescription(
-  {
-    render: A11yWithLabelTemplate,
-    parameters: {
-      docs: {
-        source: {
-          language: 'tsx',
-          code: `
-import { Badge, Icon } from '@arbor-education/design-system.components';
-
-function A11yWithLabelTemplate() {
-  return (
-    <div
-      style={{
-        padding: 'var(--spacing-xlarge)',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 'var(--spacing-xlarge)',
-      }}
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-destructive-600)' }}>
-          Without a11yLabel — screen reader announces "5" (no context)
-        </p>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-          <Icon name="mail" size={16} screenReaderText="Notifications" />
-          <Badge>5</Badge>
-        </div>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-          Screen reader: "mail Notifications, 5"
-        </p>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-semantic-success-600)' }}>
-          With a11yLabel — screen reader announces the full meaningful label
-        </p>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-large)' }}>
-          <Icon name="mail" size={16} />
-          <Badge a11yLabel="5 unread messages">5</Badge>
-        </div>
-        <p className="ds-text" style={{ margin: 0, color: 'var(--color-grey-600)', fontStyle: 'italic' }}>
-          Screen reader: "5 unread messages"
-        </p>
-      </div>
-    </div>
-  );
-}
-export default A11yWithLabelTemplate;
-`.trim(),
-        },
-      },
-    },
-  },
-  [
-    'Accessibility contrast: top row shows a badge **without** `a11yLabel` — a screen reader',
-    'moving through the icon and badge would announce the icon text and then the bare number `"5"`,',
-    'providing no context about what those 5 items are.',
-    '',
-    'The bottom row adds `a11yLabel="5 unread messages"`. The component sets `aria-label` on the',
-    'wrapper `<span>` and wraps `children` in an `aria-hidden="true"` span. The screen reader now',
-    'announces `"5 unread messages"` as a single coherent label — no duplicate number, full context.',
-    '',
-    'Use `a11yLabel` whenever the badge sits next to an icon-only element or in a context where',
-    'the number alone would be ambiguous to a screen reader user.',
-  ].join(' '),
-);

package/src/components/dot/Dot.tsx

@@ -12,6 +12,7 @@ export const Dot = ({ colour, label }: DotProps): React.JSX.Element => {
     <span
       aria-hidden={label ? undefined : 'true'}
       aria-label={label}
+      role="img"
       className={classNames('ds-dot', `ds-dot--${colour}`)}
     />
   );

package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx

@@ -8,7 +8,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { fn } from 'storybook/test';
 import { CheckboxInput } from './CheckboxInput.js';
 import { CheckboxGroup } from './CheckboxGroup.js';
@@ -1036,3 +1036,180 @@ export default LockedReportOptionsExample;
     '`disabled` prop inside `options` if you need partial disabling.',
   ].join(' '),
 );
+
+// ---------------------------------------------------------------------------
+// Rich labels
+// Each row shows the plain-text label (what the adaptor shipped before) beside
+// the rich label, so the before/after difference is visible in one story.
+// ---------------------------------------------------------------------------
+
+const EMAIL_ICON_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="3" width="12" height="8" rx="1" fill="none" stroke="#1b4f8a" stroke-width="1.5"/><path d="M1.5 3.5 7 8l5.5-4.5" fill="none" stroke="#1b4f8a" stroke-width="1.5"/></svg>',
+)}`;
+
+const RICH_LABEL_EXAMPLES: { type: string; plain: string; rich: ReactNode }[] = [
+  {
+    type: 'Bold text',
+    plain: 'Smith, Jane',
+    rich: (
+      <>
+        <b>Smith</b>
+        , Jane
+      </>
+    ),
+  },
+  {
+    type: 'Image',
+    plain: 'Email Send to email',
+    rich: (
+      <>
+        <img src={EMAIL_ICON_SRC} alt="Email" style={{ verticalAlign: 'middle', marginRight: 'var(--spacing-xsmall)' }} />
+        Send to email
+      </>
+    ),
+  },
+  {
+    type: 'Coloured text (warning)',
+    plain: 'No email address',
+    rich: <span style={{ color: 'var(--color-semantic-destructive-700)' }}>No email address</span>,
+  },
+  {
+    type: 'Mixed formatting',
+    plain: 'Maths: 0 students below target',
+    rich: (
+      <>
+        Maths:
+        {' '}
+        <u><span style={{ color: 'var(--color-semantic-destructive-700)', fontWeight: 'bold' }}>0</span></u>
+        {' '}
+        students below target
+      </>
+    ),
+  },
+];
+
+const RichLabelComparisonTemplate = () => {
+  const [checked, setChecked] = useState<Record<string, boolean>>({});
+
+  return (
+    <div style={{ maxWidth: '36rem', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }}>
+      {RICH_LABEL_EXAMPLES.map(example => (
+        <div key={example.type} style={{ display: 'grid', gridTemplateColumns: '10rem 1fr 1fr', gap: 'var(--spacing-medium)', alignItems: 'center' }}>
+          <span style={{ color: 'var(--color-grey-600)', fontSize: 'var(--font-size-2-13)' }}>{example.type}</span>
+          <CheckboxInput
+            id={`plain-${example.type}`}
+            checked={!!checked[`plain-${example.type}`]}
+            onChange={e => setChecked(prev => ({ ...prev, [`plain-${example.type}`]: e.target.checked }))}
+            label={example.plain}
+          />
+          <CheckboxInput
+            id={`rich-${example.type}`}
+            checked={!!checked[`rich-${example.type}`]}
+            onChange={e => setChecked(prev => ({ ...prev, [`rich-${example.type}`]: e.target.checked }))}
+            label={example.rich}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const RichLabelComparison: Story = withDescription(
+  {
+    render: () => <RichLabelComparisonTemplate />,
+    parameters: {
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { CheckboxInput } from '@arbor-education/design-system.components';
+
+// label accepts any ReactNode. Keep formatting to the approved set
+// (bold, coloured text, icon) and keep the text itself meaningful on its own,
+// because it becomes the checkbox's accessible name.
+<CheckboxInput
+  id="student-smith"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+  label={<><b>Smith</b>, Jane</>}
+/>
+          `.trim(),
+        },
+      },
+    },
+  },
+  [
+    'Each row compares a plain-text label (left) with the rich label (right). The rich label keeps the',
+    'formatting that legacy SIS labels carry: bold names, icons, coloured warnings and highlighted counts.',
+    'The whole label remains the checkbox accessible name, so the text must make sense without the styling.',
+  ].join(' '),
+);
+
+const RICH_GUARDIAN_OPTIONS = [
+  {
+    id: 'rich-guardian-1',
+    label: (
+      <>
+        <b>Smith</b>
+        , Jane (mother)
+      </>
+    ),
+    checked: true,
+    onChange: fn(),
+  },
+  {
+    id: 'rich-guardian-2',
+    label: (
+      <>
+        <img src={EMAIL_ICON_SRC} alt="Email" style={{ verticalAlign: 'middle', marginRight: 'var(--spacing-xsmall)' }} />
+        Smith, Tom (father)
+      </>
+    ),
+    checked: false,
+    onChange: fn(),
+  },
+  {
+    id: 'rich-guardian-3',
+    label: (
+      <>
+        <span style={{ color: 'var(--color-semantic-destructive-700)' }}>No email address</span>
+        {' '}
+        — Smith, Ann
+      </>
+    ),
+    checked: false,
+    onChange: fn(),
+  },
+];
+
+export const RichLabelInCheckboxGroup: Story = withDescription(
+  {
+    render: () => (
+      <div style={{ maxWidth: '28rem', padding: 'var(--spacing-xlarge)' }}>
+        <CheckboxGroup
+          legend="Absence alert recipients"
+          options={RICH_GUARDIAN_OPTIONS}
+        />
+      </div>
+    ),
+    parameters: {
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { CheckboxGroup } from '@arbor-education/design-system.components';
+
+<CheckboxGroup
+  legend="Absence alert recipients"
+  options={[
+    { id: 'guardian-1', label: <><b>Smith</b>, Jane (mother)</>, checked: true, onChange },
+    { id: 'guardian-2', label: <><img src={emailIcon} alt="Email" />Smith, Tom (father)</>, checked: false, onChange },
+  ]}
+/>
+          `.trim(),
+        },
+      },
+    },
+  },
+  'Rich labels in a CheckboxGroup. Each option keeps its own formatting; the group legend still labels the set.',
+);

package/src/components/formField/inputs/checkbox/CheckboxInput.test.tsx

@@ -32,4 +32,62 @@ describe('CheckboxInput component', () => {
     expect(checkboxElement).toBeDisabled();
     expect(checkboxElement.matches(':disabled')).toBe(true);
   });
+
+  test('CheckboxInput renders a rich label with its formatting', () => {
+    render(
+      <CheckboxInput
+        onChange={() => {}}
+        label={(
+          <>
+            <b>Smith</b>
+            , Jane
+          </>
+        )}
+      />,
+    );
+
+    expect(screen.getByText('Smith').tagName).toBe('B');
+  });
+
+  test('CheckboxInput keeps the rich label as its accessible name', () => {
+    render(
+      <CheckboxInput
+        onChange={() => {}}
+        label={(
+          <>
+            <span style={{ color: 'red' }}>No email address</span>
+          </>
+        )}
+      />,
+    );
+
+    expect(
+      screen.getByRole('checkbox', { name: 'No email address' }),
+    ).toBeInTheDocument();
+  });
+
+  test('CheckboxInput renders a numeric zero label inside the label text', () => {
+    const { container } = render(<CheckboxInput label={0} onChange={() => {}} />);
+
+    expect(container.querySelector('.ds-checkbox-label__text')?.textContent).toBe('0');
+  });
+
+  test('CheckboxInput keeps the accessible name of a rich image label', () => {
+    render(
+      <CheckboxInput
+        onChange={() => {}}
+        label={(
+          <>
+            <img src="/email.svg" alt="Email" />
+            {' '}
+            Send to email
+          </>
+        )}
+      />,
+    );
+
+    expect(
+      screen.getByRole('checkbox', { name: 'Email Send to email' }),
+    ).toBeInTheDocument();
+  });
 });

package/src/components/formField/inputs/checkbox/CheckboxInput.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { useRef, useEffect, type InputHTMLAttributes } from 'react';
+import { useRef, useEffect, type InputHTMLAttributes, type ReactNode } from 'react';
 import { Icon } from 'Components/icon/Icon';
 
 export type CheckboxInputProps = {
   indeterminate?: boolean;
-  label?: string;
+  label?: ReactNode;
   hasError?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
 
@@ -76,7 +76,7 @@ export const CheckboxInput = (props: CheckboxInputProps) => {
           />
         )}
       </span>
-      {label && (
+      {label !== undefined && label !== null && label !== false && label !== '' && (
         <span className="ds-checkbox-label__text">{label}</span>
       )}
     </label>

package/src/components/pill/Pill.tsx

@@ -56,6 +56,7 @@ export const Pill = (props: PillProps) => {
             checked={checked}
             onChange={() => {}}
             onClick={handleCheckboxClick}
+            aria-label={text}
           />
         </span>
       )}

package/src/components/searchBar/SearchBar.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { SearchBar } from './SearchBar.js';
 import userEvent from '@testing-library/user-event';
@@ -39,14 +39,14 @@ describe('SearchBar component', () => {
       const button = screen.getByTestId('search-bar-inactive');
       fireEvent.mouseEnter(button);
       fireEvent.mouseLeave(button);
-      expect(screen.getByText('Search')).toBeInTheDocument();
+      expect(within(button).getByText('Search', { selector: '.ds-search-bar--inactive__placeholder' })).toBeInTheDocument();
     });
 
     test('keeps placeholder on hover when no hoverText provided', () => {
       render(<SearchBar setSearchValue={setSearchMock} placeholderText="Search" />);
       const button = screen.getByTestId('search-bar-inactive');
       fireEvent.mouseEnter(button);
-      expect(screen.getByText('Search')).toBeInTheDocument();
+      expect(within(button).getByText('Search', { selector: '.ds-search-bar--inactive__placeholder' })).toBeInTheDocument();
     });
   });
 

package/src/components/searchBar/SearchBar.tsx

@@ -80,6 +80,7 @@ export const SearchBar = (props: SearchBarProps) => {
       >
         <Icon
           name="search"
+          screenReaderText="Search"
           size={16}
           color="var(--search-global-default-color-icon)"
           className="ds-search-bar__icon"

package/src/components/table/Table.stories.tsx

@@ -516,7 +516,6 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   { field: 'status', valueFormatter: Table.DefaultValueFormatter },
   {
     field: 'marks',
-    cellDataType: 'number',
     type: 'dsNumberColumn',
     cellEditorParams: {
       min: 0,
@@ -528,13 +527,11 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'active',
     filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass },
-    cellDataType: 'boolean',
     editable: false,
   },
   {
     field: 'time',
     filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass },
-    cellDataType: 'string',
     editable: false,
   },
 ];
@@ -578,12 +575,10 @@ const verticalHeaderTextColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'marks',
     headerName: 'Overall Score (%)',
-    cellDataType: 'number',
   },
   {
     field: 'active',
     headerName: 'Active?',
-    cellDataType: 'boolean',
     editable: false,
   },
   {

package/src/components/table/Table.test.tsx

@@ -1524,7 +1524,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,
@@ -1571,7 +1570,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,
@@ -1619,7 +1617,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,
@@ -1667,7 +1664,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 50,
@@ -1717,7 +1713,6 @@ describe('Table', () => {
           field: 'age',
           headerName: 'Age',
           editable: true,
-          cellDataType: 'number',
           cellEditor: 'dsNumberCellEditor',
           cellEditorParams: {
             min: 0,

package/src/utils/popupParent/PopupParentContext.stories.tsx

@@ -247,6 +247,7 @@ const WithCustomContainerTemplate = () => {
           minHeight: '2rem',
         }}
         aria-label="Custom popup container"
+        aria-hidden={true}
       />
 
       <PopupParentContext.Provider value={popupContainerRef}>