Update character counter on Figma for VBA RO MVP

[xiongjaneg]

Description or Additional Context

CMS collab cycle feedback was documented in ticket #16073.

One of the recommendations was to standardize the character counters used in VBA. CMS Team owns standardization across Drupal products. This is to align VBA character counters with CMS standard (after discussion with Blake) and use it consistently across VBA.

Design

Figma file

Acceptance Criteria

• [x] Discussed CMS standard for character counter with Blake.
• [x] Updated VBA Regional Office Figma with standard character counter or note exception for not doing so.
• [x] @davidmpickett to confirm character counts match content specs
• [x] @davidmpickett to write up enhancement ticket
• [x] Review in UX sync or async if needed

[thejordanwood]

I discussed the character counter with @BlakeOrgan. We agree that it should follow the same functionality as the USWDS character counter.

@swirtSJW @omahane We'd like to get an idea on if it's possible to change the current character counter.

Changes to current character counter:

• Change text from "X characters remaining" to "X characters allowed"
• When character count is reached, the counter text should change to "X characters over limit" in bold, red text
• Text field should not be highlighted with a red or green box at any time.

This is the current character counter I'm referring to. There are several counter designs in the CMS, but I'm wondering if this one would be the easiest to change.

cc: @xiongjaneg

[davidmpickett]

Note from Sprint Planning - one of my tasks is to write up the character count enhancement ticket so we have that captured clearly for prioritization and conversation with CMS Design System Team

Notes for myself:

• Colors are controlled here
• The fact that there is only one message to display is set here
• Might be important too

[davidmpickett]

Dave's analysis of the feasibility of @BlakeOrgan and @thejordanwood's suggested changes to current character counter

Change text from "X characters remaining" to "X characters allowed"

Easy!

This is a Site Building task that can be managed per character counter widget. Totally within the purview of Facilities Team to implement.

Current field value <span class="remaining_count">@remaining_count</span> characters remaining

New field value would be <span class="maxlength_count">@maxlength</span> characters allowed

--

When character count is reached, the counter text should change to "X characters over limit" in bold, red text

Complicated.

The logic of changing the text from one message to another would likely need to be an upstream change to the Textfield Counter module. Need a more Drupally mind to understand the lift.

Changing the color of the message in that circumstance is easier to control as part of our instance of Drupal. However, this change would affect all teams so while Facilities could draft the PR, would definitely need review and approval from CMS Platform.

--

Text field should not be highlighted with a red or green box at any time.

Half and half?

The green box is the Focus Border that indicates the active part of the form. I'm not sure why it's green though. @laflannery do you know this?

Resolving the Focus color problem here is not specific to character counts and seems like a CMS Platform team responsibility.

The inner red box highlight that appears when the user is over the limit seems a little easier to change just for our Drupal instance. Could be a Facilities PR with CMS Platform review

[davidmpickett]

Incredibly drupally rabbit hole:

https://git.drupalcode.org/project/textfield_counter/-/blob/2.3.0/js/textfield_counter.js

• Could theoretically add a new variable overlimit and set it equal to currentLength - maxlength

https://git.drupalcode.org/project/textfield_counter/-/blob/2.3.0/config/schema/textfield_counter.schema.yml https://git.drupalcode.org/project/textfield_counter/-/blob/2.3.0/src/Plugin/Field/FieldWidget/TextFieldCounterWidgetTrait.php

• Could theoretically add a textcount_overlimit_message that would function similar to the existing textcount_status_message but would only show when remaining < 0. There's already js logic checking when that happens, so maybe not the craziest idea.

[davidmpickett]

Very rough outline of an upstream Drupal issue https://www.drupal.org/project/textfield_counter/issues/3412208

[davidmpickett]

Have started drafting a CMS experimental design request https://github.com/department-of-veterans-affairs/va.gov-cms/issues/16659

[davidmpickett]

Shared experimental design request ticket in Slack for feedback

[swirtSJW]

Very rough outline of an upstream Drupal issue https://www.drupal.org/project/textfield_counter/issues/3412208

This is a great upstream issue @davidmpickett thank you for taking the time to create it. There are likely a few issues that might keep this from becoming part of the module. (does not mean it could not just exist as a patch that people could apply if they choose)

• Drupal is truly a global product, other modules and sites have no compulsion / desire to meet US Web Design Standards.
• This would essentially be a change that would alter the behavior of ALL existing sites using this module and would require all sites to update their config across ALL their field instances and would make any of their existing documentation(screen caps) obsolete. It is what most module maintainers would consider a breaking change and would need a new major version of the module.

There is a fairly high level of effort to creating this in a way that would not instantly break and would update existing field instances. Since there is a low likelihood of this patch getting merged in, it means the VA could be maintaining this patch for a long time.

By my way of thinking, the gain is not worth the investment. Do we have any data that suggests our editors are currently confused by the text counter as it is now?

[omahane]

@swirtSJW Instead of a patch to the current module, could we not create a submodule that would add the ability to configure the messaging based on the conditions that Dave described? The submodule would not break other sites, as it could be disabled by default, but could add the functionality requested.

[swirtSJW]

That is a good idea @omahane. A submodule could work, iff the structure of text_field counter allowed for it. It might. I'd have to spend more time looking to make sure. Extending another module's JS is sometimes dicy. Would likely need a complete replacement of the JS rather than an extension. The php side would likely be easier and might be handled by third_party_settings.

I think the lift would still be significant and not worth the investment to solve a non-existent problem that results in no Veteran facing benefit. You know I like making new modules :smiley: ... but this is not one I would choose to create and maintain. If we went down that route, I do not think Facilities Team needs to pick this battle.

[davidmpickett]

Broke off the smaller piece for estimating in Drupal pre-refinement: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/16732

@thejordanwood I don't think that ticket warrants a mock up, but if you could specify the exact color for the red text, that would be great.

[thejordanwood]

@xiongjaneg @davidmpickett What are next steps for me to complete this ticket? It sounds like aligning the current character counter with the USWDS counter may be a big lift. I can leave it as is in my design for now, which is a character counter that says "X characters remaining."

Note: I considered changing it to "X character allowed" since that seems like an easier change, but realized the USWDS counter changes to "X characters left" once a user starts typing in the field. I believe that will also be a bit difficult to implement.

[xiongjaneg]

@thejordanwood It does sound like it's a big lift and out of scope at least for pilot MVP.

@davidmpickett Should we discuss in UX sync this week, just to get folks on the same page? Then I could stub a future ticket for post-MVP or later and possibly another team.

[davidmpickett]

@thejordanwood - I think you are off the hook for this ticket. You specified the desired behavior and we agreed no mockup was needed based on expected path forward. You can take yourself off the ticket.

I still need to do my full review of the character counters and make sure all the numbers are correct. I will close this out once that's complete.

I will also add this to UX sync agenda for tomorrow, but mostly for talking about the next steps that are captured in other tickets

[thejordanwood]

@davidmpickett Thanks! I'll stay on for now just in case I need to update character counts in Figma after you review them.

[davidmpickett]

I left comments in the Figma file about fields that have character limits that aren't currently showing a character counter. Most of these are just default 255 character limits. This is based on the new guidance that I wrote up as part of the Experimental Design ticket

Text (plain)

• SHOULD use the Textfield with counter widget. Since this field always has a character limit, we should always make users aware of that.

This is an item I think we should discuss in UX Sync if we all agree on. I don't know if it's worth @thejordanwood's time to update all these instances in Figma, vs I can just put together a PR that would implement this change in VBA instances in Drupal.

[jilladams]

From UX sync:

• proposal above is good to move forward
• Michelle has run it past Erika and she has signed off from CMS perspective