Description of the issue

Currently it is not possible to pass unescaped HTML as an attribute value when passing attributes as an object. This is because the govukAttributes macro indiscriminately escapes all values, even those that have previously been passed through the safe filter.

This is likely an edge case situation, but it may be considered an unexpected outcome, as it directly contradicts the expectations set by using the safe filter.

Spun off from #4937.

Steps to reproduce the issue

Pass HTML as a value into a component's attributes parameter.

{{ govukBackLink({
  attributes: {
    'data-safe-html': '<i>Test&ing</i>' | safe
  }
}) }}

Actual vs expected behaviour

Actual

HTML is indiscriminately escaped, despite using the safe filter indicating it shouldn't be escaped.

<a 
  href="#"
  class="govuk-back-link"
  data-safe-html="&lt;i&gt;Test&amp;ing&lt;/i&gt;">
  Back
</a>

Expected

HTML is not escaped due to use of safe filter.

<a 
  href="#"
  class="govuk-back-link"
  data-safe-html="<i>Test&ing</i>">
  Back
</a>

Additional information

This does not happen if the attributes are passed as a string instead. This can be used as a workaround in the meantime.

{{ govukBackLink({
  attributes: ' data-safe-html="<i>Test&ing</i>"'
}) }}

<a
  href="#"
  class="govuk-back-link"
  data-safe-html="<i>Test&ing</i>">
  Back
</a>

Environment

• GOV.UK Frontend Version: 5.2.0, 5.3.0