Updates aria-describedby and input handlers to fix double announcements

Author: lindseywild

app/lib/primer/forms/caption.html.erb

@@ -1,6 +1,7 @@
 <% if @input.character_limit? %>
-  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" aria-live="polite" aria-atomic="true"></span>
-  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" id="<%= @input.character_limit_id %>">
+  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" aria-live="polite" role="status"></span>
+  <span class="sr-only" id="<%= @input.character_limit_id %>">You can enter up to <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %></span>
+  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" aria-hidden="true">
     <span class="FormControl-caption-icon" hidden><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
     <span class="FormControl-caption-text"><%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining</span>
   </span>

app/lib/primer/forms/character_counter.ts

@@ -17,7 +17,12 @@ export class CharacterCounter {
    * Initialize character counting by setting up event listener and initial count
    */
   initialize(signal?: AbortSignal): void {
-    this.inputElement.addEventListener('input', () => this.updateCharacterCount(), signal ? {signal} : undefined)
+    this.inputElement.addEventListener('keyup', () => this.updateCharacterCount(), signal ? {signal} : undefined) // Keyup used over input for better screen reader support
+    this.inputElement.addEventListener(
+      'paste',
+      () => setTimeout(() => this.updateCharacterCount(), 50), // Gives the pasted content time to register
+      signal ? {signal} : undefined,
+    )
     this.updateCharacterCount()
     this.isInitialLoad = false
   }