Update skip link for NHS.UK frontend v10.0.0

Author: colinrotherham

src/components/navigation/skip-link/SkipLink.tsx

@@ -1,92 +1,30 @@
-import React, { HTMLProps, MouseEvent, useEffect } from 'react';
+import React, { ComponentProps, useEffect, useRef, useState } from 'react';
+import { SkipLink } from 'nhsuk-frontend';
 import classNames from 'classnames';
 
-interface SkipLinkProps extends HTMLProps<HTMLAnchorElement> {
-  /** The reference to the element to set focus to when the link is clicked */
-  focusTargetRef?: React.RefObject<HTMLElement>;
-  /** Disables the default anchor click behaviour, avoiding navigation entries being added to the browser history */
-  disableDefaultBehaviour?: boolean;
-  /** Disables focusing the first h1 level heading when {@link focusTargetRef} is not set */
-  disableHeadingFocus?: boolean;
-}
-
 const SkipLinkComponent = ({
   children = 'Skip to main content',
   className,
-  disableDefaultBehaviour,
-  disableHeadingFocus,
-  focusTargetRef,
   href = '#maincontent',
-  tabIndex = 0,
-  onClick,
   ...rest
-}: SkipLinkProps) => {
-  let firstHeadingElement: HTMLElement | null = null;
-
-  const getFirstHeadingElement = (): HTMLElement | null => {
-    const allHeadings = document.getElementsByTagName('h1');
-    if (allHeadings.length > 0) {
-      return allHeadings[0];
-    }
-    return null;
-  };
-
-  const handleHeadingBlur = (event: Event) => {
-    event.preventDefault();
-    if (firstHeadingElement) {
-      unfocusElement(firstHeadingElement);
-    }
-  };
+}: ComponentProps<'a'>) => {
+  const moduleRef = useRef<HTMLAnchorElement>(null);
+  const [instance, setInstance] = useState<SkipLink>();
 
   useEffect(() => {
-    firstHeadingElement = getFirstHeadingElement();
-    if (firstHeadingElement) {
-      firstHeadingElement.addEventListener('blur', handleHeadingBlur);
+    if (!moduleRef.current || instance) {
+      return;
     }
-    return () => {
-      if (firstHeadingElement) {
-        firstHeadingElement.removeEventListener('blur', handleHeadingBlur);
-      }
-    };
-  }, []);
 
-  const focusElement = (element: HTMLElement): void => {
-    // Sometimes custom focus code can cause a loop of focus events
-    // (especially in IE11), so check for attributes before performing
-    // focus actions and DOM manipulation.
-    if (!element.hasAttribute('tabIndex')) {
-      element.setAttribute('tabIndex', '-1');
-    }
-    if (document.activeElement !== element) {
-      element.focus();
-    }
-  };
-
-  const unfocusElement = (element: HTMLElement): void => {
-    if (element.hasAttribute('tabIndex')) element.removeAttribute('tabIndex');
-  };
-
-  const focusTarget = (event: MouseEvent<HTMLAnchorElement>): void => {
-    if (disableDefaultBehaviour) event.preventDefault();
-    if (focusTargetRef && focusTargetRef.current) {
-      focusElement(focusTargetRef.current);
-    } else if (!disableHeadingFocus) {
-      // Follow the default NHSUK Frontend behaviour, but go about it in a safer way.
-      // https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/components/skip-link/skip-link.js
-      if (firstHeadingElement) focusElement(firstHeadingElement);
-    }
-    if (onClick) {
-      event.persist();
-      onClick(event);
-    }
-  };
+    setInstance(new SkipLink(moduleRef.current));
+  }, [moduleRef, instance]);
 
   return (
     <a
-      className={classNames('nhsuk-skip-link', className)}
-      onClick={focusTarget}
       href={href}
-      tabIndex={tabIndex}
+      className={classNames('nhsuk-skip-link', className)}
+      data-module="nhsuk-skip-link"
+      ref={moduleRef}
       {...rest}
     >
       {children}

src/components/navigation/skip-link/__tests__/SkipLink.test.tsx

@@ -1,90 +1,41 @@
-import React, { createRef } from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import SkipLink from '../';
 
 function SkipLinkTestApp(): JSX.Element {
-  const mainContentRef = createRef<HTMLElement>();
-
   return (
     <>
-      <SkipLink focusTargetRef={mainContentRef} />
-      <main className="nhsuk-main-wrapper" id="maincontent" role="main" ref={mainContentRef}>
-        <div className="nhsuk-grid-row"></div>
-      </main>
+      <SkipLink />
+      <div className="nhsuk-width-container">
+        <main className="nhsuk-main-wrapper" id="maincontent"></main>
+      </div>
     </>
   );
 }
 
 describe('SkipLink', () => {
   it('matches snapshot', () => {
-    const { container } = render(<SkipLink />);
+    const { container } = render(<SkipLinkTestApp />);
 
     expect(container).toMatchSnapshot('SkipLink');
   });
 
-  it('sets the href to #maincontent by default and focuses the first heading', () => {
-    const { container } = render(
-      <>
-        <SkipLink />
-        <h1 id="heading">Heading</h1>
-      </>,
-    );
-
-    const headingEl = container.querySelector('#heading') as HTMLElement;
-    const focusSpy = jest.spyOn(headingEl, 'focus');
+  it('sets the href to #maincontent by default', () => {
+    const { container } = render(<SkipLinkTestApp />);
 
     const skipLinkEl = container.querySelector('.nhsuk-skip-link')!;
 
     expect(skipLinkEl.getAttribute('href')).toBe('#maincontent');
-
-    fireEvent.click(skipLinkEl);
-
-    expect(focusSpy).toHaveBeenCalled();
   });
 
-  it('Does not focus the first heading if disableHeadingFocus is set', () => {
-    const { container } = render(
-      <>
-        <SkipLink disableHeadingFocus />
-        <h1 id="heading">Heading</h1>
-      </>,
-    );
-
-    const headingEl = container.querySelector('#heading') as HTMLElement;
-    const focusSpy = jest.spyOn(headingEl, 'focus');
+  it('focuses the main content when clicked', async () => {
+    const { container } = render(<SkipLinkTestApp />);
 
+    const mainEl = container.querySelector('main');
     const skipLinkEl = container.querySelector('.nhsuk-skip-link')!;
 
-    expect(skipLinkEl.getAttribute('href')).toBe('#maincontent');
-
-    fireEvent.click(skipLinkEl);
-
-    expect(focusSpy).not.toHaveBeenCalled();
-  });
-
-  it('calls onClick callback when clicked', () => {
-    const onClick = jest.fn();
-    const { container } = render(<SkipLink onClick={onClick} />);
-
-    const skipLinkEl = container.querySelector('.nhsuk-skip-link')!;
     fireEvent.click(skipLinkEl);
 
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('Focuses the main content when clicked', () => {
-    const { container } = render(<SkipLinkTestApp />);
-
-    const mainContent = container.querySelector('main#maincontent') as HTMLElement;
-
-    const focusSpy = jest.spyOn(mainContent, 'focus');
-
-    expect(focusSpy).not.toHaveBeenCalled();
-
-    const skipButton = container.querySelector('.nhsuk-skip-link')!;
-
-    fireEvent.click(skipButton);
-
-    expect(focusSpy).toHaveBeenCalled();
+    await waitFor(() => expect(document.activeElement).toBe(mainEl));
   });
 });

src/components/navigation/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap

@@ -4,10 +4,19 @@ exports[`SkipLink matches snapshot: SkipLink 1`] = `
 <div>
   <a
     class="nhsuk-skip-link"
+    data-module="nhsuk-skip-link"
+    data-nhsuk-skip-link-init=""
     href="#maincontent"
-    tabindex="0"
   >
     Skip to main content
   </a>
+  <div
+    class="nhsuk-width-container"
+  >
+    <main
+      class="nhsuk-main-wrapper"
+      id="maincontent"
+    />
+  </div>
 </div>
 `;

stories/Navigation/SkipLink.stories.tsx

@@ -33,36 +33,14 @@ const meta: Meta<typeof SkipLink> = {
         <CodeText>tab</CodeText>
         to show the SkipLink
       </HintText>
-      <SkipLink
-        disableDefaultBehaviour={args.disableDefaultBehaviour}
-        disableHeadingFocus={args.disableHeadingFocus}
-      />
+      <SkipLink />
       <h1>Page heading</h1>
-      <div id="#maincontent">This is the main content</div>
+      <div id="maincontent">This is the main content</div>
     </>
   ),
 };
 
 export default meta;
 type Story = StoryObj<typeof SkipLink>;
 
-export const Standard: Story = {
-  args: {
-    disableDefaultBehaviour: false,
-    disableHeadingFocus: false,
-  },
-};
-
-export const SkipLinkWithDefaultBehaviourDisabled: Story = {
-  args: {
-    disableDefaultBehaviour: true,
-    disableHeadingFocus: false,
-  },
-};
-
-export const SkipLinkWithHeadingFocusDisabled: Story = {
-  args: {
-    disableDefaultBehaviour: false,
-    disableHeadingFocus: true,
-  },
-};
+export const Standard: Story = {};