Increase amount of text in character count threshold example

[querkmachine]

Increases the amount of text in the Character Count's 'threshold' example, to better reflect the intended usage being fields with very high character limits that a user is unlikely to encounter naturally.

Suggested by @davidc-gds on alphagov/govuk-frontend#3689.

Thoughts

I'm personally a little dubious as to the efficacy of this change, for a couple of reasons:

• It makes the HTML/Nunjucks examples harder to parse, as now a significant portion of them are taken up by the placeholder text.
• In my mind, a limit of 800 characters (as in David's suggestion) or 840 characters (as in this PR) is still much lower than the intended use for the threshold feature.
  • In my mind, the threshold feature is best used where the only limit to value length is technical, such as MySQL's text type having a limit of ≈64,000 characters. This is a limitation a user is unlikely to actually reach in normal use, but one that does technically exist, so only flagging it if the user is approaching it is sensible. This doesn't feel as appropriate for limits of only one or two thousand characters.

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	86fad87
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/64c3cf296edef700082a6b04
😎 Deploy Preview	https://deploy-preview-2975--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[claireashworth]

I'm not sure I understand. What problem are we trying to solve by increasing the amount of text in the example? And does it have to be random text? Could it literally say something about users have an almost unlimited text field to add information to emphasise the point of this section?

[calvin-lau-sig7]

From what I understand the purpose of the 'threshold' feature is to let service teams put in a character count in situations where there's a relatively high character limit in place, but the user is very unlikely to reach it (as it should be relatively short response).

This was raised by a user in testing as an accessibility issue for this reason — that:

I would likely not have been aware of the character limit until I had typed this number of characters which may have led to me needing to re-evaluate what I wanted to enter.

But... that is the intended use case, and that the vast majority of users shouldn't ned to be aware of it.

David's suggestion is to show a more "realistic" example, with a high threshold.

As for placeholder text... I'm not sure how we illustrate an overly-long or rambling example in a clear way. Hmm!

[claireashworth]

oh ok. so some thoughts - we could change the title of this section, so instead of an instruction it's more of a description of what this option in character count provides. This would be consistent with the other subheads. We could also do a sense check of the content to see if we can explain it more clearly.
In the example box, the text is currently 83 characters. We could potentially re-write the example text as instructions. This might duplicate the content, but I think that could work better as it remains in the context of the component. So literally something like - 'This text box does not have a character limit. It will start showing you the character count after you've typed 50 characters. Add more text to this text box to see the character count.'

I think doing something along these lines will answer the accessibility audit concerns by clarifying what this example is showing. The only reason I'm not keen on the gov.uk text is I didn't instinctively understand why it was there.

[calvin-lau-sig7]

Oh, I like that idea. It's a good way to avoid putting in what'd likely be meaningless placeholder text, by using it for a literal purpose (rather than the typical 'hypothetical service' text we usually use ).

[querkmachine]

N.B. I used random GOV.UK content for the placeholder as that is what seems to be used in the error message example further down the page. https://design-system.service.gov.uk/components/character-count/#error-messages

[dav-idc]

I know it's a cumbersome ask because it would require more content, but is there any way we can get the threshold to be more like a 75%+ threshold, to be more realistic? I can't think of a use-case where we would want to activate the threshold condition at something as low as 26%.

[dav-idc]

I added a suggested update tot he content which should bring it to around 849 characters. Then we can go for an 85% threshold on a 100 character limit.

[calvin-lau-sig7]

To go with ~850 character textareaValue value suggested above

Suggested change

	maxlength: 840,
	threshold: 80,
	maxlength: 1000,
	threshold: 85,

[dav-idc]

I'd recommend for screen reader users that we put the most important info at the top, and then add a note that all the text after a certain point is filler text.

Something like this maybe?

Suggested change

	Type more letters into this field after this message to see the threshold feature.
	GOV.UK includes services, information and guidance that only government can provide. It’s designed so that users do not need to understand the complex structures of government in order to complete their task. Its content and design is user-centred so that interacting with government is accessible to everybody.
	GOV.UK is the official source of government information. It is impartial so that people trust the content they find.
	Content and services are continually improved to meet user needs. You can visit the GOV.UK roadmap for the most up to date plan for future improvements.
	This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when there are more than 850 characters entered into this textarea. Type some more text into this textarea to see the character count appear.
	Beyond this sentence, all text in this text area is filler-text, for demonstration purposes.
	GOV.UK includes services, information and guidance that only government can provide. It is designed so that users do not need to understand the complex structures of government in order to complete their task. Its content and design is user-centred so that interacting with government is accessible to everybody.
	GOV.UK is the official source of government information. It is impartial so that people trust the content they find.

[calvin-lau-sig7]

Oh, in that case we could perhaps just repeat the paragraph, will suggest shortly.

[dav-idc]

Yep that works too! Just something to let screen reader users know that "everything beyond this point is trash" 😛
And then we can add trash!

[calvin-lau-sig7]

844 characters, to go with new suggested threshold settings in example:

Suggested change

	Type more letters into this field after this message to see the threshold feature.
	GOV.UK includes services, information and guidance that only government can provide. It’s designed so that users do not need to understand the complex structures of government in order to complete their task. Its content and design is user-centred so that interacting with government is accessible to everybody.
	GOV.UK is the official source of government information. It is impartial so that people trust the content they find.
	Content and services are continually improved to meet user needs. You can visit the GOV.UK roadmap for the most up to date plan for future improvements.
	This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when there are more than 850 characters entered into this textarea. Type some more text into this textarea to see the character count appear. This paragraph is repeated below.
	This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when there are more than 850 characters entered into this textarea. Type some more text into this textarea to see the character count appear. This paragraph is repeated below.
	This example of a textarea has a character limit of 1000 characters. The character count is hidden, but will appear when there are more than 850 characters entered into this textarea. Type some more text into this textarea to see the character count appear.

[calvin-lau-sig7]

oh ok. so some thoughts - we could change the title of this section, so instead of an instruction it's more of a description of what this option in character count provides. This would be consistent with the other subheads. We could also do a sense check of the content to see if we can explain it more clearly. In the example box, the text is currently 83 characters. We could potentially re-write the example text as instructions. This might duplicate the content, but I think that could work better as it remains in the context of the component. So literally something like - 'This text box does not have a character limit. It will start showing you the character count after you've typed 50 characters. Add more text to this text box to see the character count.'

I think doing something along these lines will answer the accessibility audit concerns by clarifying what this example is showing. The only reason I'm not keen on the gov.uk text is I didn't instinctively understand why it was there.

Hello! I've made 2 suggestions meant to be committed together.
I've also separately committed a guidance edit to add the heading.

I feel fine with the 'job description' text in the Error message bit.

[dav-idc]

Technically, it's not about the user entering characters, it's down to a threshold being passed. For example, if the text area is pre-filled, that'll activate the threshold condition as well.

Suggested change

	You can choose to display a character count message only after the user has entered a certain number of characters. This is useful when a character limit is needed, but users are unlikely to reach the limit.
	You can choose to display a character count message only after the length of the text has surpassed a certain 'threshold' number of characters. This is useful when a character limit is needed due to the technical limitations of the service, but users are unlikely to reach the limit.

[querkmachine]

This might be a teensy bit misleading now as it implies that the threshold is set based on the number of characters, when it's actually a percentage of the total limit.

[dav-idc]

How about just removing the word 'number' entirely then?

You can choose to display a character count message only after the length of the text has surpassed a certain 'threshold' of characters. This is useful when a character limit is needed due to the technical limitations of the service, but users are unlikely to reach the limit.

[calvin-lau-sig7]

Ahh, this sentence is meant to be a bit of preamble, explaining the experience from the user perspective, before introducing the threshold in the following paragraph.

Do we want to keep working on shaping this sentence, and edit the next paragraph?

Either way we'd need to edit both paragraphs to action on @davidc-gds's original comment as a separate commit:

You can choose to display a character count message if the length of text within the textarea more than a certain 'threshold' of characters. This is useful when a character limit is needed due to the technical limitations of the service, but users are unlikely to reach the limit.

To do this, set the threshold in the component markup as a percentage. For example, data-threshold="75" will show the count message only when users have entered 75% of the limit.

[querkmachine]

@calvin-lau-sig7 @davidc-gds I think I've captured and pushed the most recent content suggestions now. Please give 'em a look through just in case I've missed anything!

[dav-idc]

Looks good from my side now! Once the others take a look, should be good to go. 🙌

[calvin-lau-sig7]

Thanks @querkmachine, I think we're close! I've added some minor amends, I'm happy to commit with an okay. Otherwise I'll be happy to approve from here.

[dav-idc]

Awesome! Great job, everyone! 🚀 🥳