Add character count component #959

alex-ju · 2018-08-17T11:15:05Z

This PR is a proposal for integrating the character count component to govuk-frontend.

Preserved optional features

Threshold value

defined via data-threshold="75" (recommended) ~~or .init( { threshold: 75 } )~~
if unset defaults to 0 — the message is displayed from the beginning
if set to a certain value (e.g. 75) the message is displayed after 75% of the maximum limit is reached

Word count

defined via data-maxwords="200" (recommended) ~~or .init( { maxwords: 200 } )~~
if unset defaults to counting characters
if set counts words instead of characters

Hint and Error message

using the textarea component

Dropped optional features

highlight option (needs more user research and limits the resize of the textarea)
validation border option (the validation border is part of the Error message component and is applied to the Character count component if an error occurs after the page is submitted)

Known issues

JAWS repeats the label of the textarea each time an aria-live associated with the textarea is updated.

Design System backlog
Trello card

hannalaakso

Thanks a lot for this @alex-ju, it's looking great 👍 I left a few comments but I didn't get through all of it, will continue reviewing this next week.

hannalaakso · 2018-08-17T15:54:52Z

src/components/character-count/character-count.js

+  if (this.maxLength && this.countMessage) {
+    // Replace maxlength attribute with data-maxlength to avoid hard limit
+    $module.setAttribute('maxlength', '')
+    $module.setAttribute('data-maxlength', $module.maxLength)


Should these be done on the textarea instead? Thedata-maxlength on the outer wrapper is shown as undefined.

I'm skeptic about moving these to the textarea instead because in my opinion they are being used at the component level not at the textarea element level. Also we should keep it flexible and easier to extend in the future so that the field could be an input or a textarea.

My bad I assumed maxlength was set on $textarea. The maxlength value should be from the character count instance, not from the module as $module.maxLength is undefined. Think it should be:

$module.setAttribute('data-maxlength', this.maxLength)

hannalaakso · 2018-08-17T15:58:27Z

src/components/character-count/character-count.js

+  var length
+  if (options.maxwords) {
+    // var tokens = text.split(' ')
+    // length = tokens.length-1


Could these comments be deleted?

Yep, removed them at cleanup.

hannalaakso · 2018-08-17T16:28:51Z

src/components/character-count/character-count.js

+  if (remainingNumber < 0) {
+    countElement.classList.add('govuk-textarea--error')
+    if (options.validation) {
+      countElement.parentNode.parentNode.classList.add('govuk-form-group--error')


I tested this locally be setting validation: true and the form group error class gets set on the wrong div so that just needs changing. Would it be possible to do this more robustly by looking for the form-group class and adding the class to that?

Validation border via JavaScript is no longer supported as we'll only use it for server side validation. Removed the code and updated the PR description to reflect that.

src/components/character-count/character-count.js

hannalaakso · 2018-08-20T14:54:49Z

src/components/character-count/character-count.njk

+    text: "Can you provide more detail?",
+    hintText: "Don't include personal or financial information, eg your National Insurance number or credit card details."
+  }
+}) }}


I don't think we have this file for other components. Does it help to demonstrate how you would use the component?

Example files were removed in #890 – I imagine the work on this started before that change was made.

Wasn't aware. Will check and update.

NickColley · 2018-08-21T16:45:39Z

src/components/character-count/character-count.js

+
+CharacterCount.prototype.handleFocus = function () {
+  // Check if value changed on focus
+  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000)


I wonder if we can take advantage of this possible alternative:

alphagov/accessible-autocomplete#164 (comment)

Good suggestion. I'll try.

Hmm, does not support IE8. But we could be OK with this since it'll likely only be used for users of assistive technologies that we can assume will be using a newer version of IE?

Non-blocking: Did you try this out, we could raise an issue later to investigate?

Tried it and behaves as expected (starts on focus, stops on blur). Could do a second test to be sure.

I'll raise an issue after we merge this to investigate the approach defined in that issue.

NickColley · 2018-08-21T16:46:58Z

src/components/character-count/character-count.js

+
+CharacterCount.prototype.handleFocus = function () {
+  // Check if value changed on focus
+  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000)


Hmm, does not support IE8. But we could be OK with this since it'll likely only be used for users of assistive technologies that we can assume will be using a newer version of IE?

src/components/character-count/_character-count.scss

fofr · 2018-09-12T10:54:31Z

A side note on this feature, might not be relevant to this PR directly: I think the logic (eg the regex) that determines how many words are present should be surfaced somehow, as this will need to be reused in any server side validation so that both frontend and backend are consistent.

alex-ju · 2018-10-02T14:47:03Z

Updated the component code based on the working group feedback and rebased.
I think this is now good to be reviewed by the Design System team for integration.

NickColley · 2018-10-05T11:15:22Z

src/components/character-count/character-count.js

+  var countAttribute = (this.options.maxwords) ? this.defaults.wordCountAttribute : this.defaults.characterCountAttribute
+
+  // Set the element limit
+  if ($module.getAttribute) {


Can you explain this if statement? I'm not sure this would ever fail?

Haha.. good catch. It was $module.getAttribute(countAttribute) to make sure an attribute is set and if not the script will stop, but got lost on it's way.. will update!

NickColley · 2018-10-05T11:17:03Z

src/components/character-count/character-count.js

+  // If there's a maximum length defined and the count message was successfully applied
+  if (this.maxLength && this.countMessage) {
+    // Replace maxlength attribute with data-maxlength to avoid hard limit
+    $module.setAttribute('maxlength', '')


Do we have a maxlength to replace anymore?

if this is what I think it is, it's relevant to something I was concerned about - if users don't use the macro they could well add maxlength to the texarea html tag themselves. We could remove it in code as it looks like we are doing here, and/or talk about this aspect in the guidance ('do not add 'maxlength' because ...)

Yes, just spoke about this with @joelanman. This is removing the hard limit if any set (needs a bit of refactor and I'll use removeAttribute instead of setting an empty string). How do you feel about this approach @NickColley?

Feels reasonable if we think this would be an accident for users to do this, would be good to add a comment to explain this.

NickColley · 2018-10-05T11:18:54Z

src/components/character-count/character-count.js

+
+CharacterCount.prototype.handleFocus = function () {
+  // Check if value changed on focus
+  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000)


Non-blocking: Did you try this out, we could raise an issue later to investigate?

src/components/character-count/character-count.yaml

NickColley · 2018-10-05T11:19:35Z

src/components/character-count/index.njk

+{# {% set componentGuidanceLink = 'new link here' %} #}
+
+{% block componentArguments %}
+{{ govukTable({


We have moved component arguments into the .yaml file now, we can do this for you...

NickColley · 2018-10-05T11:27:06Z

Our components tend to have a consistent margin at the bottom, I wonder if we need one here too?

Regular text area:

Character count:

NickColley · 2018-10-05T11:28:38Z

src/components/character-count/template.njk

+{% set describedBy = "" %}
+
+<div class="govuk-character-count" data-module="character-count"
+{% if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}


Non-blocking, if we used the whitespace stripping syntax these would end up on the same line when the markup is rendered.

<div class="govuk-character-count" data-module="character-count" data-maxlength="blah" ></div>

vs

<div class="govuk-character-count" data-module="character-count" data-maxlength="blah"></div>

alex-ju · 2018-10-08T07:34:33Z

@NickColley thank you for reviewing this! update this PR with 4 commits addressing your comments.

src/components/character-count/character-count.js

hannalaakso

Fab work @alex-ju. Just need a CHANGELOG entry, the new README committed and another person from the team to approve this 👏

This commit: - removes the `govuk-character-count` markup and includes the textarea Nunjucks macro instead - add the label and hint with the texarea - removes now redundant "govuk-form-group" wrapper - this is now added with textarea macro - adds an outer wrapper div with `data-module=character-count`, this div also now has maxlength/maxwords set on it and renders classes Note that the hint work is not part of this card - for now, the hint is being passed through to the textarea to get the aria-describedby to show up.

This commit: - removes the `govuk-character-count` CSS as we now use the textarea styling for this (but leaves some classes to do with errors as these will be tackled in the hint work) - however, this does add CSS to adjust padding to stop the textarea from "jumping" when the border width changes (on adding error class)

Ajust JS so that $module is now `.js-character-count` inside the component and that maxlength/maxwords is grabbed from parent component.

Fix tests by using `js-character-count` for tests as this contains the functionality - although this is different from how we do it in other components, this should be looked at as part of the tests card. The hint and error message tests are still failing as they are "hijacked" by the character count - we'll look at this as part of the hint card.

and rely on JavaScript for the info message

alex-ju · 2018-10-09T15:40:15Z

Rebased against master again 🤞

NickColley · 2018-10-10T16:12:14Z

src/components/character-count/character-count.js

+  // Check for existing info count message
+  var countMessage = document.getElementById(elementId + '-info')
+  // If there is no existing info count message we add one right after the field
+  if (elementId && !countMessage) {


I think we no longer need to create this count message, since we have a progressively enhanced way of doing this.

I don't think this is blocking but thought it was worth mentioning since it could simplify a lot of logic.

You're right about this, we can now remove the createCountMessage function and the associated logic; what I'm questioning thought is what will happen if they forget to add the default message. With the macro we can ensure that, but without it may get lost. I'm up for simplifying the code if we think people will add the default message.

Yeah I suppose this would force people to do a more progressive enhancement approach, but even as is I think it's still good to go.

NickColley · 2018-10-10T16:13:26Z

src/components/character-count/character-count.js

+  var thresholdPercent = options.threshold ? options.threshold : 0
+  var thresholdValue = maxLength * thresholdPercent / 100
+  if (thresholdValue > currentLength) {
+    countMessage.classList.add('govuk-character-count__message--disabled')


Does this need to be polyfilled? (Maybe related to #674)

Added the classList polyfill

NickColley · 2018-10-10T16:14:17Z

src/components/character-count/character-count.js

+
+CharacterCount.prototype.handleFocus = function () {
+  // Check if value changed on focus
+  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000)


I'll raise an issue after we merge this to investigate the approach defined in that issue.

NickColley · 2018-10-10T16:16:40Z

src/components/character-count/template.njk

+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = "" %}


I'm not following how describedBy gets set to something other than '', where does that happen?

I added the id of the default message as a default value for describedBy - which can be amended with hint and error message ids in the textarea component.

NickColley · 2018-10-10T16:18:13Z

@alex-ju I've added some more review comments, I think the only one that is blocking is the polyfill one if we do need to polyfill classList

NickColley · 2018-10-11T08:36:26Z

This is excellent work, thanks so much Alex this will helps lots of teams across GOV. I love the care that has gone into the research and efforts to make this component work well in assistive technologies like Dragon. 👏

If we can release this today we might be able to publish it today 🚀 !

alex-ju changed the title ~~Add character count component~~ [DNM] Add character count component Aug 17, 2018

hannalaakso reviewed Aug 17, 2018

View reviewed changes

hannalaakso reviewed Aug 20, 2018

View reviewed changes

alex-ju mentioned this pull request Aug 21, 2018

Add character count on edit document page alphagov/content-publisher#166

Closed

NickColley reviewed Aug 21, 2018

View reviewed changes

govuk-design-system-ci deployed to govuk-frontend-review-pr-959 August 30, 2018 15:51 View deployment

alex-ju changed the title ~~[DNM] Add character count component~~ Add character count component Oct 2, 2018

NickColley reviewed Oct 5, 2018

View reviewed changes

hannalaakso reviewed Oct 8, 2018

View reviewed changes

src/components/character-count/character-count.js Outdated Show resolved Hide resolved

hannalaakso approved these changes Oct 8, 2018

View reviewed changes

alex-ju and others added 14 commits October 9, 2018 16:39

Add character count component

09809a4

Add character count javascript

8d92e1a

Import component

768c735

Adjust JS to use govuk-textarea with character count

c5b6cd4

Ajust JS so that $module is now `.js-character-count` inside the component and that maxlength/maxwords is grabbed from parent component.

Add regenerated README for character count

97cdc32

Remove highlight and validation border

471d918

Allow hint and error messages to be passed to textarea

ef4eb71

and rely on JavaScript for the info message

Update readme

9294d6f

Disable options via init

e6392fb

Remove example file

f4d6b5c

Allow threshold percentange via Nunjucks

b2702a7

alex-ju added 6 commits October 9, 2018 16:39

Fix double-firing updateMessage

2c3a5f0

Add default message

7b534bf

Move table of arguments in readme.njk and redefine it in a yaml file

415edd9

Set responsive margin-bottom

e5006dd

Fix check for limit attribute and remove hard limit

187257c

Handle whitespace

ef9051f

alex-ju added 2 commits October 9, 2018 16:43

Refector conditional statements

f7a3224

Update readme

fa50392

NickColley reviewed Oct 10, 2018

View reviewed changes

alex-ju added 3 commits October 10, 2018 19:28

Add classList polyfill

01b029b

Set default message as aria-describedBy

3f99356

Update changelog

980be67

NickColley approved these changes Oct 11, 2018

View reviewed changes

NickColley merged commit f9e473e into alphagov:master Oct 11, 2018

kr8n3r added this to the [NEXT] milestone Oct 11, 2018

alex-ju deleted the add-character-count-component branch October 11, 2018 08:47

kr8n3r mentioned this pull request Oct 11, 2018

Release v2.2.0 #1029

Merged

alex-ju mentioned this pull request Nov 5, 2018

Add tests for character-count script #1055

Merged

36degrees mentioned this pull request Apr 8, 2022

Remove maxlength attribute from textarea after character count JavaScript has been initialised #2590

Merged

Add character count component #959

Add character count component #959

Conversation

alex-ju commented Aug 17, 2018 • edited Loading

Preserved optional features

Threshold value

Word count

Hint and Error message

Dropped optional features

Known issues

hannalaakso left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fofr commented Sep 12, 2018 • edited Loading

alex-ju commented Oct 2, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley Oct 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley commented Oct 5, 2018 • edited Loading

Choose a reason for hiding this comment

alex-ju commented Oct 8, 2018

hannalaakso left a comment • edited Loading

Choose a reason for hiding this comment

alex-ju commented Oct 9, 2018 • edited Loading

Choose a reason for hiding this comment

alex-ju Oct 10, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley commented Oct 10, 2018

NickColley commented Oct 11, 2018

alex-ju commented Aug 17, 2018 •

edited

Loading

fofr commented Sep 12, 2018 •

edited

Loading

alex-ju commented Oct 2, 2018 •

edited

Loading

NickColley Oct 5, 2018 •

edited

Loading

NickColley commented Oct 5, 2018 •

edited

Loading

hannalaakso left a comment •

edited

Loading

alex-ju commented Oct 9, 2018 •

edited

Loading

alex-ju Oct 10, 2018 •

edited

Loading