govukAttributes macro doesn't output values that use Nunjucks' safe filter

[querkmachine]

Raised and investigated via support.

Description of the issue

The govukAttributes macro, when provided a map of key-value pairs, will fail to output values that have previously passed through the Nunjucks safe filter.

This appears to be because the output of the safe filter is (if not null) actually an object, which the govukAttributes macro is interpreting to be one of our first-party attribute configuration objects.

Steps to reproduce the issue

Use this code in a project using GOV.UK Frontend's Nunjucks macros. The use of Back Link component here is illustrative, this issue is present in all components that use govukAttributes.

{{ govukBackLink({
  attributes: {
    'data-text': 'Testing',
    'data-html': '<i>Testing</i>',
    'data-number': 123.45,
    'data-boolean': true,
    'data-safe-text': 'Testing' | safe,
    'data-safe-html': '<i>Testing</i>' | safe,
    'data-safe-number': 123.45 | safe,
    'data-safe-boolean': true | safe
  }
}) }}

Each of the safe filtered values as they're exposed by the dump filter. The safe filter appears to convert anything passed to it into a string.

// data-safe-text
{ "val": "Testing", "length": 7 }

// data-safe-html
{ "val": "<i>Testing</i>", "length": 14 }

// data-safe-number
{ "val": "123.45", "length": 6 }

// data-safe-boolean
{ "val": "true", "length": 4 }

Actual vs expected behaviour

(HTML output has been reformatted for easier reading.)

Actual output

<a 
  href="#"
  class="govuk-back-link"
  data-text="Testing"
  data-html="&lt;i&gt;Testing&lt;/i&gt;"
  data-number="123.45"
  data-boolean="true"
  data-safe-text=""
  data-safe-html=""
  data-safe-number=""
  data-safe-boolean="">
  Back
</a>

Expected output

<a 
  href="#"
  class="govuk-back-link"
  data-text="Testing"
  data-html="&lt;i&gt;Testing&lt;/i&gt;"
  data-number="123.45"
  data-boolean="true"
  data-safe-text="Testing"
  data-safe-html="<i>Testing</i>" <!-- maybe undesirable, but would be logically consistent -->
  data-safe-number="123.45"
  data-safe-boolean="true">
  Back
</a>

Environment (where applicable)

• GOV.UK Frontend Version: 5.2.0, 5.3.0