govuk-frontend icon indicating copy to clipboard operation
govuk-frontend copied to clipboard

Add ability to customise character count fallback text

Open querkmachine opened this issue 2 years ago • 5 comments

Adds a new Nunjucks parameter (fallbackHintText) which allows the user to customise the fallback message used on the character count in situations where JavaScript is not available. This text is also exposed to assistive technologies, regardless of JavaScript availability.

It uses Nunjucks' replace filter to swap instances of the string %{count} with the value of maxwords, if defined, or maxlength.

Closes #2687.

Questions

  1. Does fallbackHintText make sense as the name for this parameter? It was named limitHint in the i18n tech spike, but I changed it here as this piece of text is commonly referred to as being the fallback and it helps avoid confusion with the live limit counter that the JS adds.
  2. Currently only one parameter is made available for customisation. Our English language default switches strings dynamically depending on whether we're counting characters or words, however this would only be possible with localisation if we provided two separate parameters—should we do so?
  3. Currently this doesn't support HTML. Does we want it to?

I'm keeping this in draft for the time being as this work doesn't really make sense without the equivalent JavaScript portion (a user is unlikely to customise one and not the other), and we probably want to merge them into main for the same release.

querkmachine avatar Aug 02 '22 14:08 querkmachine

My thoughts:

  1. I like fallbackHintText - compared to limitHint it better explains what the text is being used for, whereas in the original spike I had to do some digging to figure out what limitHint was.
  2. I’m not 100% sure I understand this point. At the point someone is using the component, they’ll have to provide a limit for either characters or words, and therefore the translation string to match that - is that right? So I’m unsure where they’d need to be able to switch dynamically.
  3. While this uses the hint component behind the scenes (which does accept HTML), I think this use case is a bit different to normal and it’s unlikely you’d need to pass HTML, like a link. I would lean towards not being able to pass HTML in. I think the way we’ve implemented this means we could easily add fallbackHintHtml if we needed to.

vanitabarrett avatar Aug 09 '22 12:08 vanitabarrett

@vanitabarrett Regarding number 2: This was me trying to think of a solution to a possible source of confusion: In English, setting the maxwords parameter will automatically change the text, but in other languages it won't.

I realise this isn't a big deal, just trying to cover off the bases!

querkmachine avatar Aug 09 '22 13:08 querkmachine

@querkmachine Hm, that's true. That might be ok, because it's the default? Tempted to try it out as-is for now and then consider adding something in if people found it confusing to use.

vanitabarrett avatar Aug 09 '22 14:08 vanitabarrett

@vanitabarrett Do you think we should wait until the JavaScript equivalent of this work is closer to completion before merging? It seems weird to release one without the other, even if they are functionally independent.

querkmachine avatar Aug 09 '22 14:08 querkmachine

@querkmachine I don't really have a strong opinion on it. On one side, we already have components where you can end up with mixed languages, whereas on the other side this feels different because it's letting you translate only some of the component 'furniture'. I'm happy for this to sit here until we're more confident in knowing when we're shipping the internationalisation work.

vanitabarrett avatar Aug 10 '22 10:08 vanitabarrett