Class ErrorSummary

Error summary component

Takes focus on initialisation for accessible announcement, unless disabled in configuration.

Hierarchy

  • GOVUKFrontendComponent
    • ErrorSummary

Constructors

Properties

$module: HTMLElement
config: ErrorSummaryConfig
defaults: ErrorSummaryConfig = ...

Error summary default config

ErrorSummaryConfig

moduleName: string = 'govuk-error-summary'

Name for the component used when initialising using data-module attributes.

schema: Readonly<{
    properties: {
        disableAutoFocus: {
            type: "boolean";
        };
    };
}> = ...

Error summary config schema

Methods

  • Private

    Focus the target element

    By default, the browser will scroll the target into view. Because our labels or legends appear above the input, this means the user will be presented with an input without any context, as the label or legend will be off the top of the screen.

    Manually handling the click event, scrolling the question into view and then focussing the element solves this.

    This also results in the label and/or legend being announced correctly in NVDA (as tested in 2018.3.2) - without this only the field type is announced (e.g. "Edit, has autocomplete").

    Parameters

    • $target: EventTarget

      Event target

    Returns boolean

    True if the target was able to be focussed

  • Private

    Get associated legend or label

    Returns the first element that exists from this list:

    • The <legend> associated with the closest <fieldset> ancestor, as long as the top of it is no more than half a viewport height away from the bottom of the input
    • The first <label> that is associated with the input using for="inputId"
    • The closest parent <label>

    Parameters

    • $input: Element

      The input

    Returns Element

    Associated legend or label, or null if no associated legend or label can be found