Add attributes parameter to allow for easier use of useful attributes

[injms]

For certain components - for example input, heading, or inset text - it could be useful to be able to add attributes without needing to update the component.

There are supported attributes already - for example, in the input component the following:

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Username"
  },
  id: "username-id"
  name: "username",
  autofocus: true,
  tabindex: 0,
} %>

will generate the following HTML:

<div class="govuk-form-group">
  <label for="username-id" class="gem-c-label govuk-label">Username</label>
  <input 
    autofocus="autofocus" 
    autocomplete="off"
    class="gem-c-input govuk-input" 
    id="username-id" 
    name="username" 
    tabindex="0"
    type="text" 
  >
</div>

But (at the time of writing) the spellcheck attribute to the input component isn't currently supported.

To get spellcheck supported would mean:

1. updating the component
2. releasing a new version of the gem
3. In each frontend app:
   1. either waiting for dependabot or manually bumping the version
   2. merging in the version bump

and step 3 would need to be repeated for each frontend application.

This is quite laborious.

Instead, an attributes parameter could be used to pass in attributes - similar to how the Rail's content_tag accepts a hash in its options.

This would mean that any new non-default attribute could be used easily:

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Username"
  },
  id: "username-id"
  name: "username",
  attributes: {
    autofocus: true,
    tabindex: 0,
    spellcheck: false,
  },
} %>

should generate

<div class="govuk-form-group">
  <label for="username-id" class="gem-c-label govuk-label">Username</label>
  <input 
    autofocus="autofocus" 
    autocomplete="off"
    class="gem-c-input govuk-input" 
    id="username-id" 
    name="username" 
    spellcheck="false"
    tabindex="0"
    type="text" 
  >
</div>

This is similar to how some components have a data_attributes parameter for adding data- attributes - for example, the button component, details component, and the accordion component.

To avoid unwanted behaviour, a block-list or an allow-list should be used to block unwanted attributes or only allow wanted attributes. Using a list would allow an error to be thrown for known problematic attributes with a link to the documentation explaining why they're not allowed.

Other thoughts

• What happens when an attribute is passed in twice - once outside the attributes hash and once inside?
• Should attributes be allowed or blocked?
• What attributes should be inside the options hash, and what should be outside? In the example above, id is outside and spellcheck is inside.

[andysellick]

Really interesting stuff @injms - definitely worth considering. We could also consider a similar aria_attributes parameter to solve a similar problem.