Show number of characters when typing a commit message #5207
Conversation
| <rs_widget:FormLabel ui:field="lblCommit_" text="Commit message"/> | ||
| </g:cell> | ||
| <g:cell horizontalAlignment="ALIGN_RIGHT"> | ||
| <g:Label ui:field="lblCharCount_"/> |
There was a problem hiding this comment.
As you might expect, this would be considered inaccessible for both blind and limited-vision users.
For a "sighted user", they can reasonably be expected to notice the counter changing as they type, so will understand what the number represents.
For limited vision, a user may be zoomed way in on the input field and not notice the counter updating, thus wouldn't necessary deduce what it means even if they happen to pan over to it at some point. So, it needs to provide more context, e.g. "# characters in message" instead of just "#". This also partially helps the screen reader scenario (next).
For a screen reader, this field has a couple problems. First, like limited vision, even if the user moves the screen reader cursor to it, all they'll get is a number, without any context (i.e. they won't "see" it updating while they type), so more detailed wording is strongly recommended.
More advanced would be something that announces the message length via a visually-hidden live region, probably role="status", per https://www.w3.org/TR/wai-aria-1.1/#status. Because a screen reader will be reading what they type, you don't want this message being read over every keystroke, so would require some debouncing, such as not updating the message for some delay without keyboard input. The visible label shouldn't exhibit this delay, so can't use it as the live-region (hence need for visually-hidden live region). There's an example of this at https://github.com/rikschennink/short-and-sweet
I'd consider updating the label as a must-fix for accessibility. The announced-counter would be very nice to have, especially if we have other places that will use it, but not a show stopper.
There was a problem hiding this comment.
Very much appreciate the detailed breakdown! I've taken a shot at doing this with full-bore accessibility support: there are now two labels, one exposed only to screen readers (with a debounced update) and one hidden from screen readers.
| @@ -152,4 +152,13 @@ | |||
|
|
|||
| .ignoreWhitespace label { | |||
| margin-left: 4px; | |||
| } | |||
|
|
|||
| .charCountPanel { | |||
There was a problem hiding this comment.
For consistency, use .visuallyHidden from themeStyles.css. There are a few different techniques for this, might as well be using the same one everywhere.
|
Would it be possible to "grey" text past the limit? |
|
@coatless Not as part of this change; this change doesn't add a limit, really, just tells you the # of characters so you're aware if you've hit one. It would indeed be nicer to have a configurable limit with more feedback! |
This change adds a small character counter to the commit message entry box. It is visible only if you've entered a commit message, and intended to help keep commit messages shorter than some limit if desired.
Closes #5192.