uikit-react-public 0.25.0 → 0.25.1

package/lib/components/MenuNew/Menu.tsx

@@ -11,6 +11,7 @@ export const NAME = 'ucl-uikit-menu';
 
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
+  border?: boolean;
 }
 
 export type {
@@ -21,17 +22,25 @@ export type {
   ActionMenuItemProps,
 };
 
-const Menu = ({ testId = NAME, className, children, ...props }: MenuProps) => {
+const Menu = ({
+  testId = NAME,
+  className,
+  children,
+  border = false,
+  ...props
+}: MenuProps) => {
   const [theme] = useTheme();
   const baseStyle = css`
     padding: ${theme.padding.p16} ${theme.padding.p24};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       padding: ${theme.padding.p48} ${theme.padding.p64};
-      border: 1px solid ${theme.colour.border.subtle};
     }
   `;
-  const style = cx(baseStyle, className);
+  const borderStyle = css`
+    border: 1px solid ${theme.colour.border.subtle};
+  `;
+  const style = cx(baseStyle, border && borderStyle, className);
 
   return (
     <nav

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 
@@ -12,9 +12,32 @@ const MenuBaseItem = ({
   iconPosition = 'left',
   className,
   children,
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
   ...props
 }: MenuBaseItemProps) => {
   const [theme] = useTheme();
+  const isInteractive = typeof onClick === 'function';
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+
+    if (event.defaultPrevented || !isInteractive) {
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      event.currentTarget.click();
+    }
+
+    if (event.key === ' ') {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+
   const baseStyle = css`
     width: 360px;
     box-sizing: border-box;
@@ -33,6 +56,10 @@ const MenuBaseItem = ({
   return (
     <div
       className={style}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role={role ?? (isInteractive ? 'button' : undefined)}
+      tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}
       {...props}
     >
       {iconPosition === 'left' && icon}

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -12,14 +12,14 @@ export interface PrimaryMenuItemProps extends Omit<
   'iconPosition'
 > {
   asChild?: boolean;
-  badge?: ReactNode;
+  trailingContent?: ReactNode;
 }
 
 const PrimaryMenuItem = ({
   className,
   children,
   asChild,
-  badge,
+  trailingContent,
   ...props
 }: PrimaryMenuItemProps) => {
   const [theme] = useTheme();
@@ -51,7 +51,7 @@ const PrimaryMenuItem = ({
         >
           {children}
         </MenuItemText>
-        {badge}
+        {trailingContent}
       </span>
     </MenuBaseItem>
   );

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -52,7 +52,13 @@ const SecondaryMenuItem = ({
         >
           {children}
         </MenuItemText>
-        {externalLink && <Icon.ExternalLink size={16} />}
+        {externalLink && (
+          <Icon.ExternalLink
+            size={16}
+            aria-hidden='true'
+            focusable='false'
+          />
+        )}
       </span>
     </MenuBaseItem>
   );

package/lib/components/MenuNew/__tests__/Menu.test.tsx

@@ -13,6 +13,22 @@ describe('Menu', () => {
     expect(screen.getByTestId('ucl-uikit-menu')).toBeInTheDocument();
   });
 
+  test('has no border by default', () => {
+    wrap(<Menu>Content</Menu>);
+
+    const menu = screen.getByTestId('ucl-uikit-menu');
+    const computedStyles = window.getComputedStyle(menu);
+    expect(computedStyles.borderTopStyle).toBe('');
+  });
+
+  test('allows border to be enabled with prop override', () => {
+    wrap(<Menu border>Content</Menu>);
+
+    const menu = screen.getByTestId('ucl-uikit-menu');
+    const computedStyles = window.getComputedStyle(menu);
+    expect(computedStyles.borderTopStyle).toBe('solid');
+  });
+
   test('supports click-handler items without asChild link component', () => {
     const onClick = vi.fn();
 
@@ -26,6 +42,27 @@ describe('Menu', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
+  test('click-handler items are keyboard accessible', () => {
+    const onClick = vi.fn();
+
+    wrap(
+      <Menu>
+        <Menu.PrimaryItem onClick={onClick}>Home</Menu.PrimaryItem>
+      </Menu>
+    );
+
+    const item = screen
+      .getByText('Home')
+      .closest('.ucl-uikit-menu__primary-item');
+
+    expect(item).toHaveAttribute('role', 'button');
+    expect(item).toHaveAttribute('tabindex', '0');
+
+    fireEvent.keyDown(item as Element, { key: 'Enter' });
+    fireEvent.keyDown(item as Element, { key: ' ' });
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+
   test('renders asChild link content for primary item', () => {
     wrap(
       <Menu>
@@ -84,4 +121,18 @@ describe('Menu', () => {
       container.querySelector('.ucl-uikit-menu__secondary-item svg')
     ).toBeTruthy();
   });
+
+  test('secondary externalLink icon is hidden from assistive tech', () => {
+    const { container } = wrap(
+      <Menu>
+        <Menu.SecondaryItem externalLink>
+          Accessibility statement
+        </Menu.SecondaryItem>
+      </Menu>
+    );
+
+    const icon = container.querySelector('.ucl-uikit-menu__secondary-item svg');
+    expect(icon).toHaveAttribute('aria-hidden', 'true');
+    expect(icon).toHaveAttribute('focusable', 'false');
+  });
 });

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",