openproject-primer_view_components 0.80.2 → 0.81.0

data/app/lib/primer/forms/character_counter.js

@@ -0,0 +1,114 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+    constructor(inputElement, characterLimitElement, characterLimitSrElement) {
+        this.inputElement = inputElement;
+        this.characterLimitElement = characterLimitElement;
+        this.characterLimitSrElement = characterLimitSrElement;
+        this.SCREEN_READER_DELAY = 500;
+        this.announceTimeout = null;
+        this.isInitialLoad = true;
+    }
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal) {
+        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;
+    }
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup() {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+    }
+    /**
+     * Pluralizes a word based on the count
+     */
+    pluralize(count, string) {
+        return count === 1 ? string : `${string}s`;
+    }
+    /**
+     * Update the character count display and validation state
+     */
+    updateCharacterCount() {
+        if (!this.characterLimitElement)
+            return;
+        const maxLengthAttr = this.characterLimitElement.getAttribute('data-max-length');
+        if (!maxLengthAttr)
+            return;
+        const maxLength = parseInt(maxLengthAttr, 10);
+        const currentLength = this.inputElement.value.length;
+        const charactersRemaining = maxLength - currentLength;
+        let message = '';
+        if (charactersRemaining >= 0) {
+            const characterText = this.pluralize(charactersRemaining, 'character');
+            message = `${charactersRemaining} ${characterText} remaining`;
+            const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text');
+            if (textSpan) {
+                textSpan.textContent = message;
+            }
+            this.clearError();
+        }
+        else {
+            const charactersOver = -charactersRemaining;
+            const characterText = this.pluralize(charactersOver, 'character');
+            message = `${charactersOver} ${characterText} over`;
+            const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text');
+            if (textSpan) {
+                textSpan.textContent = message;
+            }
+            this.setError();
+        }
+        // We don't want this announced on initial load
+        if (!this.isInitialLoad) {
+            this.announceToScreenReader(message);
+        }
+    }
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    announceToScreenReader(message) {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+        this.announceTimeout = window.setTimeout(() => {
+            if (this.characterLimitSrElement) {
+                this.characterLimitSrElement.textContent = message;
+            }
+        }, this.SCREEN_READER_DELAY);
+    }
+    /**
+     * Set error when character limit is exceeded
+     */
+    setError() {
+        this.inputElement.setAttribute('invalid', 'true');
+        this.inputElement.setAttribute('aria-invalid', 'true');
+        this.characterLimitElement.classList.add('fgColor-danger');
+        // Show danger icon
+        const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon');
+        if (icon) {
+            icon.removeAttribute('hidden');
+        }
+    }
+    /**
+     * Clear error when back under character limit
+     */
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.inputElement.removeAttribute('aria-invalid');
+        this.characterLimitElement.classList.remove('fgColor-danger');
+        // Hide danger icon
+        const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon');
+        if (icon) {
+            icon.setAttribute('hidden', '');
+        }
+    }
+}

data/app/lib/primer/forms/character_counter.ts

@@ -0,0 +1,129 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+  private SCREEN_READER_DELAY: number = 500
+  private announceTimeout: number | null = null
+  private isInitialLoad: boolean = true
+
+  constructor(
+    private inputElement: HTMLInputElement | HTMLTextAreaElement,
+    private characterLimitElement: HTMLElement,
+    private characterLimitSrElement: HTMLElement,
+  ) {}
+
+  /**
+   * Initialize character counting by setting up event listener and initial count
+   */
+  initialize(signal?: AbortSignal): void {
+    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
+  }
+
+  /**
+   * Clean up any pending timeouts
+   */
+  cleanup(): void {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout)
+    }
+  }
+
+  /**
+   * Pluralizes a word based on the count
+   */
+  private pluralize(count: number, string: string): string {
+    return count === 1 ? string : `${string}s`
+  }
+
+  /**
+   * Update the character count display and validation state
+   */
+  private updateCharacterCount(): void {
+    if (!this.characterLimitElement) return
+
+    const maxLengthAttr = this.characterLimitElement.getAttribute('data-max-length')
+    if (!maxLengthAttr) return
+
+    const maxLength = parseInt(maxLengthAttr, 10)
+    const currentLength = this.inputElement.value.length
+    const charactersRemaining = maxLength - currentLength
+    let message = ''
+
+    if (charactersRemaining >= 0) {
+      const characterText = this.pluralize(charactersRemaining, 'character')
+      message = `${charactersRemaining} ${characterText} remaining`
+      const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text')
+      if (textSpan) {
+        textSpan.textContent = message
+      }
+      this.clearError()
+    } else {
+      const charactersOver = -charactersRemaining
+      const characterText = this.pluralize(charactersOver, 'character')
+      message = `${charactersOver} ${characterText} over`
+      const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text')
+      if (textSpan) {
+        textSpan.textContent = message
+      }
+      this.setError()
+    }
+
+    // We don't want this announced on initial load
+    if (!this.isInitialLoad) {
+      this.announceToScreenReader(message)
+    }
+  }
+
+  /**
+   * Announce character count to screen readers with debouncing
+   */
+  private announceToScreenReader(message: string): void {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout)
+    }
+
+    this.announceTimeout = window.setTimeout(() => {
+      if (this.characterLimitSrElement) {
+        this.characterLimitSrElement.textContent = message
+      }
+    }, this.SCREEN_READER_DELAY)
+  }
+
+  /**
+   * Set error when character limit is exceeded
+   */
+  private setError(): void {
+    this.inputElement.setAttribute('invalid', 'true')
+    this.inputElement.setAttribute('aria-invalid', 'true')
+    this.characterLimitElement.classList.add('fgColor-danger')
+
+    // Show danger icon
+    const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon')
+    if (icon) {
+      icon.removeAttribute('hidden')
+    }
+  }
+
+  /**
+   * Clear error when back under character limit
+   */
+  private clearError(): void {
+    this.inputElement.removeAttribute('invalid')
+    this.inputElement.removeAttribute('aria-invalid')
+    this.characterLimitElement.classList.remove('fgColor-danger')
+
+    // Hide danger icon
+    const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon')
+    if (icon) {
+      icon.setAttribute('hidden', '')
+    }
+  }
+}

data/app/lib/primer/forms/check_box.rb

@@ -11,6 +11,13 @@ module Primer
         @input.add_label_classes("FormControl-label")
         @input.add_input_classes("FormControl-checkbox")
 
+        # Generate custom ID that preserves brackets from the name
+        unless @input.input_arguments[:id].present?
+          generate_custom_id
+          # Update the label's for attribute to match the new ID
+          @input.label_arguments[:for] = @input.input_arguments[:id]
+        end
+
         return unless @input.scheme == :array
 
         @input.input_arguments[:multiple] = true
@@ -32,6 +39,27 @@ module Primer
 
       private
 
+      def generate_custom_id
+        # Generate an ID from the name that preserves special characters like brackets
+        # For array scheme: name + "_" + value (e.g., "permissions[3]_foo")
+        # For boolean scheme: just the name (e.g., "long_o")
+        base_name = @input.name.to_s
+
+        # For array scheme, Rails appends [] to the name, so we remove it for ID generation
+        # but only the trailing [] that Rails adds, not brackets that are part of the original name
+        # Regex /\[\]$/ matches literal "[]" at the end of the string
+        base_name = base_name.sub(/\[\]$/, "")
+
+        # For array scheme, append the value to make IDs unique
+        # For boolean scheme, just use the base name
+        # Note: Rails automatically escapes HTML attributes, so special characters are safe
+        if @input.scheme == :array && @input.value.present?
+          @input.input_arguments[:id] = "#{base_name}_#{@input.value}"
+        else
+          @input.input_arguments[:id] = base_name
+        end
+      end
+
       def checked_value
         @input.value || "1"
       end

data/app/lib/primer/forms/dsl/input.rb

@@ -33,6 +33,9 @@ module Primer
         # @!macro [new] form_full_width_arguments
         #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
+        # @!macro [new] form_input_character_limit_arguments
+        #   @param character_limit [Number] Optional character limit for the input. If provided, a character counter will be displayed below the input.
+
         # @!macro [new] form_input_width_arguments
         #   @param input_width [Symbol] The width of the field. <%= one_of(Primer::Forms::Dsl::Input::INPUT_WIDTH_OPTIONS) %>
 
@@ -128,6 +131,7 @@ module Primer
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{@base_id}" if supports_validation?
+            id_map[:character_limit_caption] = "character_limit-#{@base_id}" if character_limit?
             id_map[:caption] = "caption-#{@base_id}" if caption? || caption_template?
           end
 
@@ -213,6 +217,25 @@ module Primer
           form.render_caption_template(caption_template_name)
         end
 
+        def character_limit?
+          false
+        end
+
+        def character_limit_id
+          ids[:character_limit_caption]
+        end
+
+        def character_limit_target_prefix
+          case type
+          when :text_field
+            "primer-text-field"
+          when :text_area
+            "primer-text-area"
+          else
+            ""
+          end
+        end
+
         def valid?
           supports_validation? && validation_messages.empty? && !@invalid
         end

data/app/lib/primer/forms/dsl/multi_input.rb

@@ -39,7 +39,9 @@ module Primer
           new_options[:data] ||= {}
           new_options[:data][:name] = name
           new_options[:data][:targets] = "primer-multi-input.fields"
-          new_options[:id] = nil if options[:hidden]
+          new_options[:id] = "#{@name}_#{name}"
+          new_options[:aria] ||= {}
+          new_options[:aria][:labelledby] = "label-#{base_id}"
           new_options[:disabled] = true if options[:hidden] # disable to avoid submitting to server
           new_options
         end

data/app/lib/primer/forms/dsl/text_area_input.rb

@@ -5,13 +5,20 @@ module Primer
     module Dsl
       # :nodoc:
       class TextAreaInput < Input
-        attr_reader :name, :label
+        attr_reader :name, :label, :character_limit
 
         def initialize(name:, label:, **system_arguments)
           @name = name
           @label = label
+          @character_limit = system_arguments.delete(:character_limit)
+
+          if @character_limit.present? && @character_limit.to_i <= 0
+            raise ArgumentError, "character_limit must be a positive integer, got #{@character_limit}"
+          end
 
           super(**system_arguments)
+
+          add_input_data(:target, "primer-text-area.inputElement")
         end
 
         def to_component
@@ -22,6 +29,10 @@ module Primer
           :text_area
         end
 
+        def character_limit?
+          @character_limit.present?
+        end
+
         # :nocov:
         def focusable?
           true

data/app/lib/primer/forms/dsl/text_field_input.rb

@@ -6,7 +6,7 @@ module Primer
         attr_reader(
           *%i[
             name label show_clear_button leading_visual leading_spinner trailing_visual clear_button_id
-            visually_hide_label inset monospace field_wrap_classes auto_check_src
+            clear_button_label visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit
           ]
         )
 
@@ -21,9 +21,15 @@ module Primer
           @trailing_visual = system_arguments.delete(:trailing_visual)
           @leading_spinner = !!system_arguments.delete(:leading_spinner)
           @clear_button_id = system_arguments.delete(:clear_button_id) || SecureRandom.uuid
+          @clear_button_label = system_arguments.delete(:clear_button_label)
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
           @auto_check_src = system_arguments.delete(:auto_check_src)
+          @character_limit = system_arguments.delete(:character_limit)
+
+          if @character_limit.present? && @character_limit.to_i <= 0
+            raise ArgumentError, "character_limit must be a positive integer, got #{@character_limit}"
+          end
 
           if @leading_visual
             @leading_visual[:classes] = class_names(
@@ -69,6 +75,10 @@ module Primer
           true
         end
 
+        def character_limit?
+          @character_limit.present?
+        end
+
         def validation_arguments
           if auto_check_src.present?
             super.merge(

data/app/lib/primer/forms/form_control.html.erb

@@ -1,7 +1,8 @@
 <% if @input.form_control? %>
   <%= content_tag(@tag, **@form_group_arguments) do %>
     <% if @input.label %>
-      <%= builder.label(@input.name, **@input.label_arguments) do %>
+      <% label_id = @input.label_arguments[:id] || "label-#{@input.base_id}" %>
+      <%= builder.label(@input.name, **@input.label_arguments.merge(id: label_id)) do %>
         <%= @input.label %>
         <% if @input.required? %>
           <span aria-hidden="true">*</span>

data/app/lib/primer/forms/primer_text_area.d.ts

@@ -0,0 +1,13 @@
+export declare class PrimerTextAreaElement extends HTMLElement {
+    #private;
+    inputElement: HTMLTextAreaElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        PrimerTextAreaElement: typeof PrimerTextAreaElement;
+    }
+}

data/app/lib/primer/forms/primer_text_area.js

@@ -0,0 +1,53 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _PrimerTextAreaElement_characterCounter;
+import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
+let PrimerTextAreaElement = class PrimerTextAreaElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextAreaElement_characterCounter.set(this, null);
+    }
+    connectedCallback() {
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextAreaElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f").initialize();
+        }
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f")?.cleanup();
+    }
+};
+_PrimerTextAreaElement_characterCounter = new WeakMap();
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
+PrimerTextAreaElement = __decorate([
+    controller
+], PrimerTextAreaElement);
+export { PrimerTextAreaElement };
+if (!window.customElements.get('primer-text-area')) {
+    Object.assign(window, { PrimerTextAreaElement });
+    window.customElements.define('primer-text-area', PrimerTextAreaElement);
+}

data/app/lib/primer/forms/primer_text_area.ts

@@ -0,0 +1,37 @@
+import {controller, target} from '@github/catalyst'
+import {CharacterCounter} from './character_counter'
+
+@controller
+export class PrimerTextAreaElement extends HTMLElement {
+  @target inputElement: HTMLTextAreaElement
+  @target characterLimitElement: HTMLElement
+  @target characterLimitSrElement: HTMLElement
+
+  #characterCounter: CharacterCounter | null = null
+
+  connectedCallback(): void {
+    if (this.characterLimitElement) {
+      this.#characterCounter = new CharacterCounter(
+        this.inputElement,
+        this.characterLimitElement,
+        this.characterLimitSrElement,
+      )
+      this.#characterCounter.initialize()
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.#characterCounter?.cleanup()
+  }
+}
+
+declare global {
+  interface Window {
+    PrimerTextAreaElement: typeof PrimerTextAreaElement
+  }
+}
+
+if (!window.customElements.get('primer-text-area')) {
+  Object.assign(window, {PrimerTextAreaElement})
+  window.customElements.define('primer-text-area', PrimerTextAreaElement)
+}

data/app/lib/primer/forms/primer_text_field.d.ts

@@ -15,6 +15,8 @@ export declare class PrimerTextFieldElement extends HTMLElement {
     validationErrorIcon: HTMLElement;
     leadingVisual: HTMLElement;
     leadingSpinner: HTMLElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     clearContents(): void;

data/app/lib/primer/forms/primer_text_field.js

@@ -1,4 +1,3 @@
-/* eslint-disable custom-elements/expose-class-on-global */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -16,13 +15,15 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _PrimerTextFieldElement_abortController;
+var _PrimerTextFieldElement_abortController, _PrimerTextFieldElement_characterCounter;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
 let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
+        _PrimerTextFieldElement_characterCounter.set(this, null);
     }
     connectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
@@ -40,9 +41,15 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
             const errorMessage = await event.detail.response.text();
             this.setError(errorMessage);
         }, { signal });
+        // Set up character limit tracking if present
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextFieldElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f").initialize(signal);
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f")?.cleanup();
     }
     clearContents() {
         this.inputElement.value = '';
@@ -92,6 +99,7 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
+_PrimerTextFieldElement_characterCounter = new WeakMap();
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "inputElement", void 0);
@@ -113,6 +121,12 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
     controller
 ], PrimerTextFieldElement);

data/app/lib/primer/forms/primer_text_field.ts

@@ -1,8 +1,7 @@
-/* eslint-disable custom-elements/expose-class-on-global */
-
 import '@github/auto-check-element'
 import type {AutoCheckErrorEvent, AutoCheckSuccessEvent} from '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
+import {CharacterCounter} from './character_counter'
 
 declare global {
   interface HTMLElementEventMap {
@@ -20,8 +19,11 @@ export class PrimerTextFieldElement extends HTMLElement {
   @target validationErrorIcon: HTMLElement
   @target leadingVisual: HTMLElement
   @target leadingSpinner: HTMLElement
+  @target characterLimitElement: HTMLElement
+  @target characterLimitSrElement: HTMLElement
 
   #abortController: AbortController | null
+  #characterCounter: CharacterCounter | null = null
 
   connectedCallback(): void {
     this.#abortController?.abort()
@@ -48,16 +50,27 @@ export class PrimerTextFieldElement extends HTMLElement {
       },
       {signal},
     )
+
+    // Set up character limit tracking if present
+    if (this.characterLimitElement) {
+      this.#characterCounter = new CharacterCounter(
+        this.inputElement,
+        this.characterLimitElement,
+        this.characterLimitSrElement,
+      )
+      this.#characterCounter.initialize(signal)
+    }
   }
 
   disconnectedCallback() {
     this.#abortController?.abort()
+    this.#characterCounter?.cleanup()
   }
 
   clearContents() {
     this.inputElement.value = ''
     this.inputElement.focus()
-    this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }))
+    this.inputElement.dispatchEvent(new Event('input', {bubbles: true, cancelable: false}))
   }
 
   clearError(): void {

data/app/lib/primer/forms/text_area.html.erb

@@ -1,5 +1,7 @@
-<%= render(FormControl.new(input: @input)) do %>
-  <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <%= builder.text_area(@input.name, **@input.input_arguments) %>
+<primer-text-area>
+  <%= render(FormControl.new(input: @input)) do %>
+    <%= content_tag(:div, **@field_wrap_arguments) do %>
+      <%= builder.text_area(@input.name, **@input.input_arguments) %>
+    <% end %>
   <% end %>
-<% end %>
+</primer-text-area>

data/app/lib/primer/forms/text_field.html.erb

@@ -13,7 +13,7 @@
       <%= builder.text_field(@input.name, **@input.input_arguments) %>
     <% end %>
     <% if @input.show_clear_button? %>
-      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
+      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="<%= @input.clear_button_label || 'Clear' %>" data-action="click:primer-text-field#clearContents">
         <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
       </button>
     <% end %>