Summary list: Allow customisation of full action link content

[querkmachine]

What

Currently, action links in the Summary list have a hardcoded content order of the action name (html or text), followed by an area of visually hidden text (visuallyHiddenText). The visually hidden text includes a hardcoded space separating it from the prior text, and is usually the same or similar to the key for the current row. For example:

change<span class="govuk-visually-hidden"> name</span>
delete<span class="govuk-visually-hidden"> address</span>

Why

This fixed ordering doesn't accommodate localisation into languages where this text appears in a different order. For example, in German we might have this:

<span class="govuk-visually-hidden">Namen </span>ändern
<span class="govuk-visually-hidden">Adresse </span>löschen

Having a hardcoded space is also undesirable in certain languages, such as Chinese:

更换<span class="govuk-visually-hidden">名字</span>
删除<span class="govuk-visually-hidden">名称</span>

Although it is currently possible for services to pass HTML into the action links and ignore the visuallyHiddenText parameter completely, we may want to investigate methods of either making visuallyHiddenText work with other languages, or removing the use of a dedicated/hardcoded parameter in favour of using the html parameter.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• Investigate ways that visuallyHiddenText could work with 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 an empty string.

For example:

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Namen"
      },
      value: {
        text: "Norman Nescio"
      },
      actions: [
        {
          visuallyHiddenText: '',
          html: '<span class="govuk-visually-hidden">Namen </span>ändern'
        }
      ]
    }
  ]
}) }}