Textarea with Counter

<!--
  Two things worth stealing here:

  1. aria-live="polite" on the counter, NOT on every keystroke. A live region
     that fires per character is a machine gun. It only speaks inside the last
     20 characters - the point where the number stops being trivia and starts
     being a warning.

  2. The counter is inside aria-describedby, so a screen reader user is told the
     limit exists when they ENTER the field, not when they hit it.
-->
<div class="count-field">
  <label class="count-field__label" for="count-field-bio">Short bio</label>
  <textarea
    class="count-field__input"
    id="count-field-bio"
    name="bio"
    rows="4"
    maxlength="180"
    placeholder="Tell us what you work on."
    aria-describedby="count-field-bio-count"
  ></textarea>
  <p class="count-field__count" id="count-field-bio-count" aria-live="polite">
    <span class="count-field__used">0</span> of 180 characters used
  </p>
</div>

<script>
  document.querySelectorAll('.count-field').forEach(function (root) {
    var input = root.querySelector('.count-field__input');
    var readout = root.querySelector('.count-field__count');
    var used = root.querySelector('.count-field__used');
    var max = Number(input.getAttribute('maxlength'));
    var WARN_AT = 20;

    function sync() {
      var length = input.value.length;
      used.textContent = String(length);

      var remaining = max - length;
      root.classList.toggle('count-field--warn', remaining <= WARN_AT);

      // Silent until the number matters, then polite. Never assertive: this is
      // information, not an interruption.
      readout.setAttribute('aria-live', remaining <= WARN_AT ? 'polite' : 'off');
    }

    input.addEventListener('input', sync);
    sync();
  });
</script>