uikit-react-public 0.26.0 → 0.26.3

package/lib/components/DrawerMenu/__tests__/DrawerMenu.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import DrawerMenu from '../DrawerMenu';
 import Button from '../../Button';
 import { ThemeContextProvider } from '../../../theme/useTheme';
@@ -44,6 +44,7 @@ describe('DrawerMenu', () => {
   });
 
   afterEach(() => {
+    vi.useRealTimers();
     vi.restoreAllMocks();
   });
 
@@ -123,4 +124,95 @@ describe('DrawerMenu', () => {
     expect(window.getComputedStyle(drawer as Element).top).toBe('0px');
     expect(window.getComputedStyle(drawer as Element).height).toBe('100dvh');
   });
+
+  test('keeps tablet and desktop focus inside the header and drawer menu', () => {
+    render(
+      <ThemeContextProvider>
+        <header>
+          <DrawerMenu defaultOpen>
+            <Button aria-label='First drawer action'>First</Button>
+            <Button aria-label='Last drawer action'>Last</Button>
+          </DrawerMenu>
+        </header>
+        <Button aria-label='Outside action'>Outside</Button>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Close menu' });
+    const firstDrawerAction = screen.getByRole('button', {
+      name: 'First drawer action',
+    });
+    const lastDrawerAction = screen.getByRole('button', {
+      name: 'Last drawer action',
+    });
+    const outsideAction = screen.getByRole('button', {
+      name: 'Outside action',
+    });
+
+    lastDrawerAction.focus();
+    fireEvent.keyDown(document, { key: 'Tab' });
+    expect(trigger).toHaveFocus();
+    expect(outsideAction).not.toHaveFocus();
+
+    trigger.focus();
+    fireEvent.keyDown(document, {
+      key: 'Tab',
+      shiftKey: true,
+    });
+    expect(lastDrawerAction).toHaveFocus();
+    expect(firstDrawerAction).not.toHaveFocus();
+  });
+
+  test('resets drawer and menu content scroll positions after closing transition', () => {
+    vi.useFakeTimers();
+
+    render(
+      <ThemeContextProvider>
+        <header>
+          <DrawerMenu>
+            {({ close }) => (
+              <div>
+                <div
+                  data-testid='scrollable-menu-content'
+                  style={{ height: 100, overflow: 'auto' }}
+                >
+                  <div style={{ height: 400 }}>Menu content</div>
+                </div>
+                <Button
+                  aria-label='Close from content'
+                  onClick={close}
+                >
+                  Close
+                </Button>
+              </div>
+            )}
+          </DrawerMenu>
+        </header>
+      </ThemeContextProvider>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open menu' }));
+
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    const drawer = content.parentElement as HTMLElement;
+    const scrollableMenuContent = screen.getByTestId('scrollable-menu-content');
+
+    drawer.scrollTop = 120;
+    content.scrollTop = 80;
+    scrollableMenuContent.scrollTop = 60;
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close from content' }));
+
+    expect(drawer.scrollTop).toBe(120);
+    expect(content.scrollTop).toBe(80);
+    expect(scrollableMenuContent.scrollTop).toBe(60);
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(drawer.scrollTop).toBe(0);
+    expect(content.scrollTop).toBe(0);
+    expect(scrollableMenuContent.scrollTop).toBe(0);
+  });
 });

package/lib/components/Dropdown/DropdownContent.tsx

@@ -1,4 +1,11 @@
-import { HTMLAttributes, memo, RefObject, useEffect, useState } from 'react';
+import {
+  HTMLAttributes,
+  memo,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
@@ -22,8 +29,11 @@ export interface DropdownContentProps extends Omit<
 }
 
 const TABLET_BOTTOM_GAP_PX = 32;
+const DRAWER_TRANSITION_MS = 300;
 const DEFAULT_DRAWER_BOUNDARY_SELECTOR =
   'header,[role="banner"],[data-drawer-menu-boundary]';
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
 const getCssLength = (value: number | string) =>
   typeof value === 'number' ? `${value}px` : value;
@@ -52,6 +62,58 @@ const DropdownContent = ({
     `(min-width: ${theme.breakpoints.tablet}px)`
   );
   const isDrawer = variant === 'drawer';
+  const wasOpenRef = useRef(isOpen);
+
+  useEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = isOpen;
+
+    if (isOpen || !wasOpen) return;
+
+    const container = contentRef.current;
+    if (!container) return;
+
+    const resetScroll = () => {
+      const scrollableElements = [
+        container,
+        ...Array.from(container.querySelectorAll<HTMLElement>('*')),
+      ];
+
+      scrollableElements.forEach((element) => {
+        element.scrollTop = 0;
+        element.scrollLeft = 0;
+      });
+    };
+
+    if (!isDrawer) {
+      resetScroll();
+      return;
+    }
+
+    let hasResetScroll = false;
+
+    const resetScrollOnce = () => {
+      if (hasResetScroll) return;
+      hasResetScroll = true;
+      resetScroll();
+    };
+
+    const handleTransitionEnd = (event: TransitionEvent) => {
+      if (event.target !== container || event.propertyName !== 'transform') {
+        return;
+      }
+
+      resetScrollOnce();
+    };
+
+    container.addEventListener('transitionend', handleTransitionEnd);
+    const timeoutId = window.setTimeout(resetScrollOnce, DRAWER_TRANSITION_MS);
+
+    return () => {
+      container.removeEventListener('transitionend', handleTransitionEnd);
+      window.clearTimeout(timeoutId);
+    };
+  }, [contentRef, isDrawer, isOpen]);
 
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -80,9 +142,7 @@ const DropdownContent = ({
 
     const getFocusableElements = () =>
       Array.from(
-        container.querySelectorAll<HTMLElement>(
-          'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-        )
+        container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
       ).filter((element) => !element.hasAttribute('disabled'));
 
     const focusableElements = getFocusableElements();
@@ -131,6 +191,78 @@ const DropdownContent = ({
     };
   }, [contentRef, isOpen, isTabletAndUp]);
 
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (!isDrawer || !isTabletAndUp || !isOpen) return;
+
+    const container = contentRef.current;
+    if (!container) return;
+
+    const triggerElement = triggerRef.current;
+    const boundaryElement =
+      drawerBoundaryRef?.current ??
+      triggerElement?.closest<HTMLElement>(drawerBoundarySelector);
+    const focusContainers: HTMLElement[] = boundaryElement
+      ? [boundaryElement]
+      : [triggerElement, container].filter((element): element is HTMLElement =>
+          Boolean(element)
+        );
+
+    const getFocusableElements = () =>
+      Array.from(
+        new Set(
+          focusContainers.flatMap((focusContainer) =>
+            Array.from(
+              focusContainer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+            )
+          )
+        )
+      ).filter((element) => !element.hasAttribute('disabled'));
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const elements = getFocusableElements();
+      if (elements.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (!active || !elements.includes(active)) {
+        event.preventDefault();
+        first.focus();
+        return;
+      }
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [
+    contentRef,
+    drawerBoundaryRef,
+    drawerBoundarySelector,
+    isDrawer,
+    isOpen,
+    isTabletAndUp,
+    triggerRef,
+  ]);
+
   useEffect(() => {
     if (typeof window === 'undefined') return;
     if (!isTabletAndUp || !isOpen || isDrawer) {
@@ -261,8 +393,8 @@ const DropdownContent = ({
     pointer-events: none;
     transform: translateX(100%);
     transition:
-      transform 180ms ease-in-out,
-      visibility 0ms linear 180ms;
+      transform ${DRAWER_TRANSITION_MS}ms ease-in,
+      visibility 0ms linear ${DRAWER_TRANSITION_MS}ms;
     will-change: transform;
 
     @media (min-width: ${theme.breakpoints.tablet}px) {
@@ -315,7 +447,7 @@ const DropdownContent = ({
     visibility: visible;
     pointer-events: auto;
     transform: translateX(0);
-    transition: transform 180ms ease;
+    transition: transform ${DRAWER_TRANSITION_MS}ms ease-out;
   `;
 
   const style = cx(

package/lib/components/Footer/Footer.tsx

@@ -206,36 +206,48 @@ const Footer = ({
           <a
             className={legalLinkStyle}
             href={disclaimer}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Disclaimer
           </a>
           <a
             className={legalLinkStyle}
             href={freedomOfInformation}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Freedom of Information
           </a>
           <a
             className={legalLinkStyle}
             href={accessibility}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Accessibility
           </a>
           <a
             className={legalLinkStyle}
             href={cookies}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Cookies
           </a>
           <a
             className={legalLinkStyle}
             href={privacy}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Privacy
           </a>
           <a
             className={legalLinkStyle}
             href={slaveryStatement}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Slavery statement
           </a>

package/lib/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -254,36 +254,48 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       <a
         class="css-16lix8i"
         href="https://dictionary.cambridge.org/dictionary/english/disclaimer"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Disclaimer
       </a>
       <a
         class="css-16lix8i"
         href="https://www.legislation.gov.uk/ukpga/2000/36/contents"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Freedom of Information
       </a>
       <a
         class="css-16lix8i"
         href="https://developer.mozilla.org/en-US/docs/Web/Accessibility"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Accessibility
       </a>
       <a
         class="css-16lix8i"
         href="https://en.wikipedia.org/wiki/HTTP_cookie"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Cookies
       </a>
       <a
         class="css-16lix8i"
         href="https://dictionary.cambridge.org/dictionary/english/privacy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Privacy
       </a>
       <a
         class="css-16lix8i"
         href="https://modern-slavery-statement-registry.service.gov.uk/"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Slavery statement
       </a>
@@ -595,36 +607,48 @@ exports[`Footer > snapshot: nav links 1`] = `
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Disclaimer
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/foi"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Freedom of Information
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/accessibility"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Accessibility
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Cookies
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Privacy
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Slavery statement
       </a>
@@ -887,36 +911,48 @@ exports[`Footer > snapshot: no nav links 1`] = `
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Disclaimer
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/foi"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Freedom of Information
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/accessibility"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Accessibility
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Cookies
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/legal-services/privacy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Privacy
       </a>
       <a
         class="css-16lix8i"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Slavery statement
       </a>

package/lib/components/FooterNew/LegalAndCopyright.tsx

@@ -100,36 +100,48 @@ const LegalAndCopyright = ({
         <a
           className={linkStyle}
           href={disclaimer}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Disclaimer
         </a>
         <a
           className={linkStyle}
           href={freedomOfInformation}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Freedom of Information
         </a>
         <a
           className={linkStyle}
           href={accessibility}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Accessibility
         </a>
         <a
           className={linkStyle}
           href={cookies}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Cookies
         </a>
         <a
           className={linkStyle}
           href={privacy}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Privacy
         </a>
         <a
           className={linkStyle}
           href={slaveryStatement}
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Slavery statement
         </a>
@@ -137,6 +149,8 @@ const LegalAndCopyright = ({
           <a
             className={linkStyle}
             href={login}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             Login
           </a>

package/lib/components/FooterNew/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -306,36 +306,48 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       <a
         class="css-19zp1gp"
         href="https://dictionary.cambridge.org/dictionary/english/disclaimer"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Disclaimer
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.legislation.gov.uk/ukpga/2000/36/contents"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Freedom of Information
       </a>
       <a
         class="css-19zp1gp"
         href="https://developer.mozilla.org/en-US/docs/Web/Accessibility"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Accessibility
       </a>
       <a
         class="css-19zp1gp"
         href="https://en.wikipedia.org/wiki/HTTP_cookie"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Cookies
       </a>
       <a
         class="css-19zp1gp"
         href="https://dictionary.cambridge.org/dictionary/english/privacy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Privacy
       </a>
       <a
         class="css-19zp1gp"
         href="https://modern-slavery-statement-registry.service.gov.uk/"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Slavery statement
       </a>
@@ -710,36 +722,48 @@ exports[`Footer > snapshot: nav links 1`] = `
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Disclaimer
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/foi"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Freedom of Information
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/accessibility"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Accessibility
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Cookies
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/legal-services/privacy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Privacy
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Slavery statement
       </a>
@@ -1061,36 +1085,48 @@ exports[`Footer > snapshot: no nav links 1`] = `
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Disclaimer
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/foi"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Freedom of Information
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/accessibility"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Accessibility
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Cookies
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/legal-services/privacy"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Privacy
       </a>
       <a
         class="css-19zp1gp"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Slavery statement
       </a>