ErrorSummary

Error Summary Notifications summarise
all the errors on a form in a single notification.

  • Always show an error summary when there is a validation error.
  • Use this component to link the error to a specific form element so the user can jump to the specific error on the page.
  • If the error does not relate to form fields
  • If the error is not critical. Use the warning Notification component instead

Live example

Storybook failed to load. Please connect to the VPN to access.

Availabile platforms

Platform

Available

Figma

Web (@ovotech/element)

App (@ovotech/element-native)


How to use it

Dynamic Example

The error summary notification component should be on the page but hidden until it receives errors. Passing errors to the error summary notification when submitting a form will display the errors and focus the component (or scroll to it on React Native)

Accessibility

  • Always place the component at the top of the page.
    If your page includes breadcrumbs or a back link, place it below these, but above the h1.
  • Always have the component on the page, and pass any errors to it when forms are submitted.
    The component will be hidden until it receives errors.
  • Ensure that the keyboard focus moves to the error summary.
    This should happen automatically.
    React Native should scroll to the error summary.
  • Ensure that the errors that appear in the summary link to their respective fields (web only).
    This should happen automatically.

Content guidelines

  • Always use the same wording as the error messages which appear next to the input unless those messages contain links - do not include those as these messages get wrapped in a link.
  • Always use plain language.
    Errors should always be clear and concise.
  • Never use pleasantries like 'Please'.

Properties

Name

Values

Default

id

String

 

errors (required)

{id: string; message: ReactNode;}[]

 

ref

Ref<HTMLElement>

 

title

ReactNode

Oops, there's a problem...

noMargin
Remove the default margin that appears at bottom of the notification when it is displayed

Boolean

 

scrollViewRef (required)
Ref of the scroll view this component appears in. React Native only

RefObject<ScrollView>

 

scrollPos
Scroll position of this component. React Native only

{x: number; y: number}

 

...
Spread to outer most div - the 'focus wrapper'

JSX.IntrinsicElements["div"]

 


Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As someone using the component, I want to be able to easily understand the errors that are present and how they can be resolved.
  • As a screen reader user, I want to be able to quickly understand the errors that are present, and to be able to navigate to them.
  • As a keyboard-only user, I want to be able to quickly navigate to the field with an error.

Test steps

Use these steps to check that the Error Summary component has been implemented correctly:

  1. Turn on a screen reader
  2. Verify that once the error summary appears, that focus is redirected to it, with it announced by the screen reader
  3. Navigate through the list of errors and verify that they are announced as expected, matching the visible text
  4. Activate each link and verify that you are redirected correctly to the associated error

Known defects

We're aware of the following defects and have provided ways that these can be manually resolved, until this component is updated:

  • The title for the component should be marked up as a heading. Where possible, use a heading level 2 element (<h2>) for the error summary title
  • When hovered, the links have an insufficient colour contrast ratio, making them difficult to perceive. Where possible, add CSS to make the hovered link text colour darker, consistent with the way that the TextLink component works.

Related components


Related patterns


External links