From e0386acda96de375486b93d87fac09b2b7ea9b34 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 12 Jul 2022 14:43:46 -0700
Subject: [PATCH] feat(text-field): add SSR ariaLabelledBy property

PiperOrigin-RevId: 460556448
---
 textfield/filled-text-field.ts            |  2 +-
 textfield/lib/filled-text-field_test.ts   |  2 +-
 textfield/lib/outlined-text-field_test.ts |  2 +-
 textfield/lib/text-field.ts               | 12 ++++++++++--
 textfield/lib/text-field_test.ts          |  2 +-
 textfield/outlined-text-field.ts          |  2 +-
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
index a1e5ce3a45..2ecd825946 100644
--- a/textfield/filled-text-field.ts
+++ b/textfield/filled-text-field.ts
@@ -36,7 +36,7 @@ export class MdFilledTextField extends FilledTextField {
     return html`
       <md-filled-field
         class="md3-text-field__field"
-        id=${this.fieldID}
+        id=${this.fieldId}
         .disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
diff --git a/textfield/lib/filled-text-field_test.ts b/textfield/lib/filled-text-field_test.ts
index 16599ba674..76faac86e9 100644
--- a/textfield/lib/filled-text-field_test.ts
+++ b/textfield/lib/filled-text-field_test.ts
@@ -27,7 +27,7 @@ class TestTextField extends FilledTextField {
     return html`
       <md-filled-field
         class="md3-text-field__field"
-        id=${this.fieldID}
+        id=${this.fieldId}
         .disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
diff --git a/textfield/lib/outlined-text-field_test.ts b/textfield/lib/outlined-text-field_test.ts
index 4e051e9963..dcd1eaffc2 100644
--- a/textfield/lib/outlined-text-field_test.ts
+++ b/textfield/lib/outlined-text-field_test.ts
@@ -27,7 +27,7 @@ class TestTextField extends OutlinedTextField {
     return html`
        <md-outlined-field
          class="md3-text-field__field"
-         id=${this.fieldID}
+         id=${this.fieldId}
          .disabled=${this.disabled}
          .error=${this.error}
          .label=${this.label}
diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
index a9811425dd..e766406931 100644
--- a/textfield/lib/text-field.ts
+++ b/textfield/lib/text-field.ts
@@ -65,12 +65,19 @@ export class TextField extends LitElement {
    * An optional suffix to display after the input value.
    */
   @property({type: String}) suffixText = '';
+  /**
+   * The ID on the field element, used for SSR.
+   */
+  @property({type: String}) fieldId = 'field';
 
   // ARIA
   // TODO(b/210730484): replace with @soyParam annotation
   @property({type: String, attribute: 'data-aria-label', noAccessor: true})
   @ariaProperty
   override ariaLabel!: string;
+  @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})
+  @ariaProperty
+  ariaLabelledBy!: string;
 
   // FormElement
   get form() {
@@ -96,7 +103,6 @@ export class TextField extends LitElement {
    * validation errors only display in response to user interactions.
    */
   @state() protected dirty = false;
-  @state() protected fieldID = 'field';
   @query('.md3-text-field__input')
   protected readonly input?: HTMLInputElement|null;
 
@@ -154,6 +160,8 @@ export class TextField extends LitElement {
     // TODO(b/237281840): replace ternary operators with double pipes
     // TODO(b/237283903): remove when custom isTruthy directive is supported
     const placeholderValue = this.placeholder ? this.placeholder : undefined;
+    const ariaLabelledByValue =
+        this.ariaLabelledBy ? this.ariaLabelledBy : this.fieldId;
 
     const prefix = this.renderPrefix();
     const suffix = this.renderSuffix();
@@ -162,7 +170,7 @@ export class TextField extends LitElement {
         class="md3-text-field__input"
         aria-invalid=${this.error}
         aria-label=${ifDefined(this.ariaLabel)}
-        aria-labelledby=${this.fieldID}
+        aria-labelledby=${ariaLabelledByValue}
         ?disabled=${this.disabled}
         placeholder=${ifDefined(placeholderValue)}
         ?readonly=${this.readonly}
diff --git a/textfield/lib/text-field_test.ts b/textfield/lib/text-field_test.ts
index 10d02cb2cd..cecb5b3544 100644
--- a/textfield/lib/text-field_test.ts
+++ b/textfield/lib/text-field_test.ts
@@ -31,7 +31,7 @@ class TestTextField extends TextField {
     return html`
       <md-filled-field
         class="md3-text-field__field"
-        id=${this.fieldID}
+        id=${this.fieldId}
         .disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}
diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts
index f66c2ac7c2..51a99a3589 100644
--- a/textfield/outlined-text-field.ts
+++ b/textfield/outlined-text-field.ts
@@ -36,7 +36,7 @@ export class MdOutlinedTextField extends OutlinedTextField {
     return html`
       <md-outlined-field
         class="md3-text-field__field"
-        id=${this.fieldID}
+        id=${this.fieldId}
         .disabled=${this.disabled}
         .error=${this.error}
         .label=${this.label}