Update ErrorSummary component to forward refs (#135)

This allows for things like programmatic keyboard focus in order to
fulfil accessibility requirements.

Co-authored-by: Phil Meier <[email protected]>
Co-authored-by: Thomas Judd-Cooper <[email protected]>

Author: 3 people

src/components/error-summary/ErrorSummary.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLProps } from 'react';
+import React, {forwardRef, HTMLProps, PropsWithoutRef, RefAttributes} from 'react';
 import classNames from 'classnames';
 
 const ErrorSummaryTitle: React.FC<HTMLProps<HTMLHeadingElement>> = ({ className, ...rest }) => (
@@ -19,20 +19,23 @@ const ErrorSummaryListItem: React.FC<HTMLProps<HTMLAnchorElement>> = (props) =>
   </li>
 );
 
-interface ErrorSummary extends React.FC<HTMLProps<HTMLDivElement>> {
+interface ErrorSummary extends React.ForwardRefExoticComponent<PropsWithoutRef<HTMLProps<HTMLDivElement>> & RefAttributes<HTMLDivElement>> {
   Title: React.FC<HTMLProps<HTMLHeadingElement>>;
   Body: React.FC<HTMLProps<HTMLDivElement>>;
   List: React.FC<HTMLProps<HTMLUListElement>>;
   Item: React.FC<HTMLProps<HTMLAnchorElement>>;
 }
 
-const ErrorSummary: ErrorSummary = ({ className, ...rest }) => (
-  <div className={classNames('nhsuk-error-summary', className)} {...rest} />
-);
-
-ErrorSummary.Title = ErrorSummaryTitle;
-ErrorSummary.Body = ErrorSummaryBody;
-ErrorSummary.List = ErrorSummaryList;
-ErrorSummary.Item = ErrorSummaryListItem;
+const ErrorSummaryDiv = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({className, ...rest}, ref) =>
+  <div className={classNames('nhsuk-error-summary', className)} ref={ref} {...rest} />
+)
+ErrorSummaryDiv.displayName = "ErrorSummary"
+
+const ErrorSummary: ErrorSummary = Object.assign(ErrorSummaryDiv, {
+  Title: ErrorSummaryTitle,
+  Body: ErrorSummaryBody,
+  List: ErrorSummaryList,
+  Item: ErrorSummaryListItem,
+})
 
 export default ErrorSummary;

src/components/error-summary/__tests__/ErrorSummary.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import ErrorSummary from '..';
 
 describe('ErrorSummary', () => {
@@ -9,6 +9,13 @@ describe('ErrorSummary', () => {
     element.unmount();
   });
 
+  it('forwards refs', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const element = mount(<ErrorSummary ref={ref}/>);
+    expect(ref.current).not.toBeNull();
+    element.unmount();
+  });
+
   describe('ErrorSummary.Title', () => {
     it('matches snapshot', () => {
       const element = shallow(<ErrorSummary.Title>Title</ErrorSummary.Title>);