uikit-react-public 0.17.4 → 0.21.8

package/lib/components/Table/subcomponents/Cell/__tests__/Cell.test.tsx

@@ -112,4 +112,110 @@ describe('Cell', () => {
     buttonCell.click();
     expect(handleButtonClick).toHaveBeenCalled();
   });
+
+  // Accessibility tests
+
+  test('warns when variant="checkbox" is used without checkboxProps.ariaLabel', () => {
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell variant='checkbox' />
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(consoleWarn).toHaveBeenCalledWith(
+      expect.stringContaining('checkboxProps.ariaLabel is required')
+    );
+    consoleWarn.mockRestore();
+  });
+
+  test('does not warn when variant="checkbox" has checkboxProps.ariaLabel', () => {
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell
+                variant='checkbox'
+                checkboxProps={{ ariaLabel: 'Select John Smith' }}
+              />
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(consoleWarn).not.toHaveBeenCalled();
+    consoleWarn.mockRestore();
+  });
+
+  test('does not warn when variant="checkbox" has checkboxProps[aria-label]', () => {
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell
+                variant='checkbox'
+                checkboxProps={{ 'aria-label': 'Select John Smith' }}
+              />
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(consoleWarn).not.toHaveBeenCalled();
+    consoleWarn.mockRestore();
+  });
+
+  test('checkbox variant applies ariaLabel to the input via checkboxProps', () => {
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell
+                variant='checkbox'
+                checkboxProps={{ ariaLabel: 'Select John Smith' }}
+              />
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Select John Smith'
+    );
+    consoleWarn.mockRestore();
+  });
+
+  test('button variant applies aria-label via buttonProps', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <tr>
+              <Cell
+                variant='button'
+                buttonProps={{ 'aria-label': 'Edit John Smith' }}
+              >
+                Edit
+              </Cell>
+            </tr>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(
+      screen.getByRole('button', { name: 'Edit John Smith' })
+    ).toBeInTheDocument();
+  });
 });

package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`Cell > Snapshot: variants 1`] = `
           data-testid="ucl-uikit-table__cell-content"
         >
           <span
-            class="ucl-uikit-checkbox css-cg31xm"
+            class="ucl-uikit-checkbox css-tumlz"
           >
             <input
               class="css-nzy7im"
@@ -66,6 +66,7 @@ exports[`Cell > Snapshot: variants 1`] = `
             class="ucl-uikit-icon css-148hpxb"
             data-testid="ucl-uikit-icon"
             fill="none"
+            focusable="false"
             height="24"
             stroke="currentColor"
             stroke-linecap="round"
@@ -79,7 +80,7 @@ exports[`Cell > Snapshot: variants 1`] = `
               d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
             />
             <path
-              d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+              d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"
             />
           </svg>
         </div>
@@ -94,7 +95,7 @@ exports[`Cell > Snapshot: variants 1`] = `
         >
           <button
             aria-disabled="false"
-            class="ucl-uikit-button css-3pq14u"
+            class="ucl-uikit-button css-9aah8t"
             data-testid="ucl-uikit-button"
           >
             Button

package/lib/components/Table/subcomponents/HeadCell/HeadCell.stories.tsx

@@ -5,7 +5,7 @@ import Head from '../Head';
 import { SortOrder } from '../../Table.types';
 
 const meta = {
-  title: 'Components/Work in progress/Table/HeadCell',
+  title: 'Components/Table/HeadCell',
   component: HeadCell,
   parameters: {
     layout: 'centered',

package/lib/components/Table/subcomponents/HeadCell/HeadCell.tsx

@@ -3,8 +3,7 @@ import { useTheme } from '../../../../theme';
 import HeadCellContent from './HeadCellContent';
 import type { ColumnVariant, SortOrder } from '../../Table.types';
 
-export interface TableHeadCellProps
-  extends React.HTMLAttributes<HTMLTableCellElement> {
+export interface TableHeadCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
   variant?: ColumnVariant;
   accessor?: string;
   sort?: SortOrder;
@@ -20,6 +19,7 @@ export interface TableHeadCellProps
     event: React.ChangeEvent<HTMLInputElement>
   ) => void;
   testId?: string;
+  checkboxAriaLabel?: string;
 }
 
 const NAME = 'ucl-uikit-table__head-cell';
@@ -35,17 +35,17 @@ const HeadCell = ({
   testId = NAME,
   className,
   children,
+  checkboxAriaLabel = 'Select all rows',
   ...props
 }: TableHeadCellProps) => {
   const [theme] = useTheme();
 
   const isSortable = variant !== 'checkbox' && onSortChange && accessor;
 
-  const handleClick = (event: React.MouseEvent) => {
+  const handleSortChange = (event: React.UIEvent) => {
     if (onSortChange && !accessor)
       console.warn(`${NAME}: onSortChange requires an accessor to be defined.`);
     else if (isSortable) {
-      // Rotate sorting order on click
       if (sort === 'asc') {
         onSortChange(accessor, 'desc', event);
       } else if (sort === 'desc') {
@@ -56,6 +56,17 @@ const HeadCell = ({
     }
   };
 
+  const handleClick = (event: React.MouseEvent) => {
+    handleSortChange(event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleSortChange(event);
+    }
+  };
+
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (variant === 'checkbox' && onCheck) onCheck(event.target.checked, event);
   };
@@ -66,7 +77,7 @@ const HeadCell = ({
     font-family: ${theme.font.family.primary};
     font-weight: 400;
     text-align: left;
-    cursor: pointer;
+    cursor: ${isSortable ? 'pointer' : 'default'};
     user-select: none;
   `;
 
@@ -75,12 +86,22 @@ const HeadCell = ({
   return (
     <th
       onClick={handleClick}
+      onKeyDown={handleKeyDown}
       scope='col'
       className={style}
       data-testid={testId}
       data-accessor={accessor}
       data-sort={sort}
-      role={isSortable ? 'button' : undefined}
+      tabIndex={isSortable ? 0 : undefined}
+      aria-sort={
+        isSortable
+          ? sort === 'asc'
+            ? 'ascending'
+            : sort === 'desc'
+              ? 'descending'
+              : 'none'
+          : undefined
+      }
       {...props}
     >
       <HeadCellContent
@@ -89,6 +110,7 @@ const HeadCell = ({
         showSortIcon={showSortIcon}
         checked={checked}
         onCheckboxChange={handleCheckboxChange}
+        checkboxAriaLabel={checkboxAriaLabel}
       >
         {children}
       </HeadCellContent>

package/lib/components/Table/subcomponents/HeadCell/HeadCellContent.tsx

@@ -8,6 +8,7 @@ interface HeadCellContentProps extends React.HTMLAttributes<HTMLDivElement> {
   sort: SortOrder;
   showSortIcon: boolean;
   checked: boolean;
+  checkboxAriaLabel: string;
   onCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -19,6 +20,7 @@ const HeadCellContent = ({
   showSortIcon,
   checked,
   onCheckboxChange,
+  checkboxAriaLabel,
   children,
 }: HeadCellContentProps) => {
   const baseStyle = css`
@@ -52,6 +54,7 @@ const HeadCellContent = ({
         <Checkbox
           checked={checked}
           onChange={onCheckboxChange}
+          ariaLabel={checkboxAriaLabel}
         />
       )}
     </div>

package/lib/components/Table/subcomponents/HeadCell/__tests__/HeadCell.test.tsx

@@ -1,5 +1,5 @@
-import { describe, expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
 import HeadCell from '../HeadCell';
 import { ThemeContextProvider } from '../../../../../theme/useTheme';
 
@@ -134,4 +134,223 @@ describe('HeadCell', () => {
       accessor
     );
   });
+
+  // Accessibility tests
+
+  test('sortable header has aria-sort="none" when sort is null', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                accessor='name'
+                onSortChange={vi.fn()}
+              >
+                Name
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__head-cell')).toHaveAttribute(
+      'aria-sort',
+      'none'
+    );
+  });
+
+  test('sortable header has aria-sort="ascending" when sort is "asc"', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                accessor='name'
+                sort='asc'
+                onSortChange={vi.fn()}
+              >
+                Name
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__head-cell')).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    );
+  });
+
+  test('sortable header has aria-sort="descending" when sort is "desc"', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                accessor='name'
+                sort='desc'
+                onSortChange={vi.fn()}
+              >
+                Name
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__head-cell')).toHaveAttribute(
+      'aria-sort',
+      'descending'
+    );
+  });
+
+  test('non-sortable header does not have aria-sort', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell>Non-sortable</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(
+      screen.getByTestId('ucl-uikit-table__head-cell')
+    ).not.toHaveAttribute('aria-sort');
+  });
+
+  test('sortable header has tabIndex={0}', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                accessor='name'
+                onSortChange={vi.fn()}
+              >
+                Name
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__head-cell')).toHaveAttribute(
+      'tabindex',
+      '0'
+    );
+  });
+
+  test('non-sortable header does not have tabIndex', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell>Non-sortable</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(
+      screen.getByTestId('ucl-uikit-table__head-cell')
+    ).not.toHaveAttribute('tabindex');
+  });
+
+  test('pressing Enter on a sortable header calls onSortChange', () => {
+    const onSortChange = vi.fn();
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                accessor='name'
+                onSortChange={onSortChange}
+              >
+                Name
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    fireEvent.keyDown(screen.getByTestId('ucl-uikit-table__head-cell'), {
+      key: 'Enter',
+    });
+    expect(onSortChange).toHaveBeenCalledWith('name', 'asc', expect.anything());
+  });
+
+  test('pressing Space on a sortable header calls onSortChange', () => {
+    const onSortChange = vi.fn();
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                accessor='name'
+                onSortChange={onSortChange}
+              >
+                Name
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    fireEvent.keyDown(screen.getByTestId('ucl-uikit-table__head-cell'), {
+      key: ' ',
+    });
+    expect(onSortChange).toHaveBeenCalledWith('name', 'asc', expect.anything());
+  });
+
+  test('checkbox variant has default aria-label "Select all rows"', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell variant='checkbox'>Checkbox header</HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Select all rows'
+    );
+  });
+
+  test('checkbox variant aria-label can be customised via checkboxAriaLabel', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <thead>
+            <tr>
+              <HeadCell
+                variant='checkbox'
+                checkboxAriaLabel='Select all orders'
+              >
+                Checkbox header
+              </HeadCell>
+            </tr>
+          </thead>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Select all orders'
+    );
+  });
 });

package/lib/components/Table/subcomponents/HeadCell/__tests__/__snapshots__/HeadCell.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
   <thead>
     <tr>
       <th
-        class="css-1g8x9da ucl-uikit-table__head-cell"
+        class="css-19iwbn3 ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -14,9 +14,10 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
           data-testid="ucl-uikit-table__head-cell-content"
         >
           <span
-            class="ucl-uikit-checkbox css-cg31xm"
+            class="ucl-uikit-checkbox css-tumlz"
           >
             <input
+              aria-label="Select all rows"
               class="css-nzy7im"
               data-testid="ucl-uikit-checkbox"
               type="checkbox"
@@ -34,7 +35,7 @@ exports[`HeadCell > Snapshot: default 1`] = `
   <thead>
     <tr>
       <th
-        class="css-1g8x9da ucl-uikit-table__head-cell"
+        class="css-19iwbn3 ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -44,6 +45,7 @@ exports[`HeadCell > Snapshot: default 1`] = `
         >
           Default header cell
           <svg
+            aria-hidden="true"
             fill="none"
             height="16"
             viewBox="0 0 48 48"
@@ -93,7 +95,7 @@ exports[`HeadCell > no sorting icon 1`] = `
   <thead>
     <tr>
       <th
-        class="css-1g8x9da ucl-uikit-table__head-cell"
+        class="css-19iwbn3 ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >

package/lib/components/Table/subcomponents/Row.tsx

@@ -1,8 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 
-export interface TableRowProps
-  extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   selected?: boolean;
 }
 
@@ -39,6 +38,7 @@ const Row = ({
     <tr
       className={style}
       data-testid={NAME}
+      aria-selected={selected}
       {...props}
     >
       {children}

package/lib/components/Table/subcomponents/SortIcon.tsx

@@ -22,6 +22,7 @@ const SortingIcon = ({ sortOrder, size = 16 }: SortingIconProps) => {
     <svg
       width={size}
       height={size}
+      aria-hidden='true'
       viewBox='0 0 48 48'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'

package/lib/components/Table/subcomponents/__tests__/Row.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Row from '../Row';
+import { ThemeContextProvider } from '../../../../theme/useTheme';
+
+describe('Row', () => {
+  test('Can be found via default testId', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <Row>
+              <td>Cell</td>
+            </Row>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__row')).toBeInTheDocument();
+  });
+
+  // Accessibility tests
+
+  test('aria-selected is false by default', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <Row>
+              <td>Cell</td>
+            </Row>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__row')).toHaveAttribute(
+      'aria-selected',
+      'false'
+    );
+  });
+
+  test('aria-selected is true when selected prop is true', () => {
+    render(
+      <ThemeContextProvider>
+        <table>
+          <tbody>
+            <Row selected>
+              <td>Cell</td>
+            </Row>
+          </tbody>
+        </table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-table__row')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+  });
+});

package/lib/components/Tabs/Tab.tsx

@@ -31,7 +31,7 @@ const Tab = ({
     border: none;
     cursor: pointer;
     font-family: ${theme.font.family.primary};
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     border-bottom: 4px solid transparent;
     text-align: center;
     font-style: normal;
@@ -53,8 +53,8 @@ const Tab = ({
   `;
 
   const activeStyle = css`
-    border-bottom: 4px solid ${color || theme.color.interaction.blue70};
-    color: ${theme.color.text.primary};
+    border-bottom: 4px solid ${color || theme.colour.border.brand};
+    color: ${theme.colour.text.default};
     margin-bottom: -1px;
     font-weight: 700;
 

package/lib/components/Tabs/Tabs.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Tabs from './Tabs';
 
 const meta = {
-  title: 'Components/Work in progress/Tabs',
+  title: 'Components/Tabs',
   component: Tabs,
   parameters: {
     layout: 'padded',

package/lib/components/Tabs/Tabs.tsx

@@ -7,8 +7,10 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-tabs';
 
-export interface TabsBaseProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface TabsBaseProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange'
+> {
   activeTab: string;
   onChange?: (value: string) => void;
   fullWidth?: boolean;
@@ -42,7 +44,7 @@ const TabsBase = ({
 
   const baseStyle = css`
     display: flex;
-    border-bottom: 1px solid ${theme.color.neutral.grey20};
+    border-bottom: 1px solid ${theme.colour.border.subtle};
   `;
 
   const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);