Add visually hidden prefix and suffix text to links and buttons

[peteryates]

It would be nice to be able to simply add visually hidden text to links and buttons without having to manually construct the HTML. It comes in really handy when working in dense admin interfaces where there might just be enough space for 'View', but we want to give screenreader users and idea of where the link will take them.

Work so far

• Split out #extract_button_link_args
• Rework and simplify the link and button helpers
• Add govuk_visually_hidden helper which makes creating visually hidden text easy
• Add keyword arguments visually_hidden_prefix and visually_hidden_suffix which injects the visually hidden text before or after the link or button text

Example use

With keyword arguments:

<%= govuk_link_to("Delete", "#", visually_hidden_suffix: "first item")  %>

With a block:

<%= govuk_link_to("#") do %>
  Delete <%= govuk_visually_hidden("first item") %>
<% end %>

Both will output:

<a href="#" class="govuk-link">Delete<span class="govuk-visually-hidden"> first item</span></a>

Prefixes work in the same way:

<%= govuk_link_to("Mr Jones", "#", visually_hidden_prefix: "Remove")  %>

<a href="#" class="govuk-link"><span class="govuk-visually-hidden">Remove </span>Mr Jones</a>

[frankieroberto]

@peteryates I don't quite follow the changes in this PR so far. Are you suggesting adding extra arguments to govuk_link_to for visually-hidden text, like this:

govuk_link_to("Delete", "#", visually_hidden_suffix: "first item")

or would you do this by passing a block to the helpers, possibly with another helper for visually-hidden text?

<%= govuk_link_to("#") do %>
  Delete <%= govuk_visually_hidden("first item") %>
<% end %>

I can see arguments for both - the second one feels like a cleaner implementation, but the first one feels easier to use maybe?

[peteryates]

@frankieroberto sorry yeah, didn't quite get round to actually making the changes yet, just some minor refactoring to pave the way :)

govuk_link_to("Delete", "#", visually_hidden_suffix: "first item")

☝🏽 This first example is exactly what I had in mind, but I think there's definitely scope for a govuk_visually_hidden helper too.

[frankieroberto]

I think the only downside with the first example is that because of the param ordering, the visually hidden bit is separated from the rest of the text, which might make it harder to read as a single phrase?

The second example with the separate helper is more flexible (you could use it with any other helper including the default Rails ones) but requires either the block syntax or nesting the helper within the first param. This was the approach we took with the tag helper in the task list helper though… 🤔

[frankieroberto]

Here's how it might look using a nested helper... 😬 Unfortunatately due to needing to concatenate a string with the visually-hidden tag, I think you'd also need to use safe_join?

govuk_link_to(safe_join(["Delete, govuk_visually_hidden(' first item')]), "#")

or you could concatenate anyway and mark the output as safe (so long as the string isn't user-submitted), but this feels even worse:

govuk_link_to("Delete#{govuk_visually_hidden(' first item')}".html_safe, "#")

...in either case, probably the block syntax is better?

[peteryates]

@frankieroberto yeah the reason i want to add these as keyword args is because remembering where to add the space gets a bit clunky. Currently it's wrong, I'll amend it so it's inside the visually hidden span next (it's currently outside). (fixed in 5722bb0)

govuk_link_to("Delete#{govuk_visually_hidden(' first item')}".html_safe, "#")

🫣

[peteryates]

I think this can be made a bit more elegant.