Add character limit in label

[shawnthompson]

First off, thanks for great script!

A suggestion, could you add the max character limit to the label and only start announcing the remainder when the user starts typing?

<label for="my-textarea">My textarea (Maximum 160 characters)</label>
<textarea id="my-textarea" maxlength="160" data-counter-label="Still {remaining} characters left to type" aria-controls="short-and-sweet-counter-0"></textarea>
<span class="short-and-sweet-counter" aria-hidden="true">Still 160 characters left to type</span>
<span style="position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);white-space:nowrap;" id="short-and-sweet-counter-0" role="status" aria-live="polite"></span>

[rikschennink]

Thanks! But, why?

[shawnthompson]

Shoot I missed your comment. You would put it in the label so the user would know there's a limit right when they enter the field.

[rikschennink]

You can set the label when rendering the page? or you can change the append method to append it as a child of the label.