Error message: Remove hardcoded content order

[querkmachine]

What

Error messages currently contain a fixed content order, which is hardcoded into the component's Nunjucks template. This is composed of a block of visually-hidden text (visuallyHiddenText, defaults to 'Error') followed by a colon (:), a hardcoded space, then the configured error message (html or text).

This prefixes the message with 'error' for screen readers, so that the context of the message announced up-front and is easier to understand.

For example, the component may currently output this text:

<span class="govuk-visually-hidden">Error:</span> Enter an event name 

Why

Having a hardcoded content order can make it more difficult to appropriately localise the string.

In particular, the currently hardcoded colon and space characters are incompatible with certain languages. Some logographic written languages—such as Chinese and Japanese—use a fixed-width colon character that fits better alongside logograms, and don't include a space after it.

<span class="govuk-visually-hidden">错误：</span>输入事件名称
<span class="govuk-visually-hidden">エラー：</span>イベント名を入力してください

Translators may also find that the 'Error' label being visible is more useful to their target users—as red does not indicate incorrectness or danger in all cultures (it symbolises happiness and prosperity in Chinese culture, for example).

Although it is currently possible for services to pass HTML into the error message and remove the initial 'Error:' section by setting visuallyHiddenText to false, we may want to investigate methods of either making visuallyHiddenText work with other languages, incorporating the colon and space into the editable area, or removing the use of a dedicated parameter and hardcoded text in favour of only using the html parameter.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• Investigate methods of making the error message support non-English languages.
• Make changes to the Nunjucks template and related tests, if we decide to make modifications.
• Document any changes to Nunjucks parameters.

[querkmachine]

Note: It is already possible to do this by manually specifying the visually-hidden text in the Nunjucks html paramenter and setting visuallyHiddenText to false.

For example:

{{ govukErrorMessage({
  visuallyHiddenText: false,
  html: '<span class="govuk-visually-hidden">错误：</span>输入事件名称'
}) }}