feat(text-field): add SSR ariaLabelledBy property

PiperOrigin-RevId: 460556448
material-components · Jul 12, 2022 · e0386ac · e0386ac
1 parent 42bf876
commit e0386ac
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}