Open davidmpickett opened 8 months ago
I think this looks like great research and is a plan for an ideal character counter. However I do not think the improvement is worth the investment it will take. If we had good data showing our editors are confused by our character counter, then maybe we could make the case for it. But this would be an expensive task to merely get an editor facing interface to meet USWDS. Veteran facing impact would be nill.
Additional cross-team wrinkle. In order to make the character count status messages on VBA Centralized Content consistent with the new guidance here, we would have to update the widget settings on a paragraph type that is primarily used on Public Websites. It's a small config PR, but doesn't make sense for Facilities to merge without Public Websites approval.
cc @jilladams
On the other hand, this change to a character counter on Centralized Content might be okay for Facilities to do without additional CMS team review. I think we previously established that we are the primary users of Centralized Content.
In this case CAIA are the main editor base for the listed products, and I have absolutely no concerns about the change proposed in https://github.com/department-of-veterans-affairs/va.gov-cms/pull/16805, if we opt to go that route.
What
Some text input fields in the Drupal CMS have a maximum character limit. The Character Counter lets users know what this limit is. It can appear on both the simple
textfield
widgets and the largertextarea
widgets.Purpose
AS A Drupal CMS editor I NEED real-time feedback while typing in a text field SO THAT I can stay within the character limits
Usage
As of Jan 4, 2024:
string
&text
fields always have a character limit, but Site Builders can choose a widget that doesn't show a chracter counterstring_long
,text_long
, &text_with_summary
fields can only have a character limit if they use the "with counter" widget variant.Behavior
Current behavior
The character count updates to indicate how many characters are remaining.
When the user is between 5 and 0 characters remaining, an orange warning border is applied to the text field.
When the user goes over the character limit, a dark red border is applied to the text field.
Desired behavior
State 1 - User has not entered any characters
State 2 - User has entered more than zero characters and <= character limit
State 3 - User has entered more characters than the character limit
No border should be applied to the text field in any state (aside from existing focus border).
Examples
We would like this to function the same as the USWDS character counter
Drupal Modules
Character counters are controlled by the Textfield Counter module.
The module currently only allows for one status message to be displayed. I have drafted an upstream issue to request the module be updated to allow the status message to change based on the current state.
Accessibility
See USWDS notes
Guidance
General guidance for "with counter" widget settings
Counter position
to After so the counter displays below the text areaAdd javascript validation
<span class="remaining_count">@remaining_count</span> characters remaining
Count only mode (no validation)
Field Type guidance
Text (plain)
Textfield with counter
widget. Since this field always has a character limit, we should always make users aware of that.Text (plain, long)
Text
Text (plain)
orLong Text
insteadTextfield with counter
widget. Since this field always has a character limit, we should always make users aware of that.Long Text
Long Text with Summary
CMS Collab Cycle
This pattern came out of feedback from the VBA Regional Office CMS collab cycle.
Research (optional)
Depending on timing, we may be able to investigate this during #15976
Next steps
Send a message in the #cms-design channel letting the CMS team know that this request has been submitted and include a link to this ticket. A designer on the CMS team will review this request and will reach out to you if they have questions/comments/concerns. If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out in the #cms-design channel.