chore(field): remove field ID property

PiperOrigin-RevId: 465328988
material-components · Aug 4, 2022 · f8d950f · f8d950f
1 parent f94a452
commit f8d950f
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 12 deletions.
diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
@@ -37,7 +37,6 @@ export class MdFilledTextField extends FilledTextField {
     return html`
       <md-filled-field
         class="md3-text-field__field"
-        id=${this.fieldId}
         ?disabled=${this.disabled}
         ?error=${this.error}
         ?hasEnd=${this.hasTrailingIcon}

diff --git a/textfield/lib/filled-text-field_test.ts b/textfield/lib/filled-text-field_test.ts
@@ -27,7 +27,6 @@ class TestTextField extends FilledTextField {
     return html`
       <md-filled-field
         class="md3-text-field__field"
-        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,6 @@ class TestTextField extends OutlinedTextField {
     return html`
        <md-outlined-field
          class="md3-text-field__field"
-         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,10 +65,6 @@ 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';
   /**
    * Whether or not the text field has a leading icon. Used for SSR.
    */
@@ -202,14 +198,17 @@ 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 ariaLabelValue = this.ariaLabel ? this.ariaLabel :
+        this.label                        ? this.label :
+                                            undefined;
     const ariaLabelledByValue =
-        this.ariaLabelledBy ? this.ariaLabelledBy : this.fieldId;
+        this.ariaLabelledBy ? this.ariaLabelledBy : undefined;
 
     return html`<input
       class="md3-text-field__input"
       aria-invalid=${this.error}
-      aria-label=${ifDefined(this.ariaLabel)}
-      aria-labelledby=${ariaLabelledByValue}
+      aria-label=${ifDefined(ariaLabelValue)}
+      aria-labelledby=${ifDefined(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,6 @@ class TestTextField extends TextField {
     return html`
       <md-filled-field
         class="md3-text-field__field"
-        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
@@ -37,7 +37,6 @@ export class MdOutlinedTextField extends OutlinedTextField {
     return html`
       <md-outlined-field
         class="md3-text-field__field"
-        id=${this.fieldId}
         ?disabled=${this.disabled}
         ?error=${this.error}
         ?hasEnd=${this.hasTrailingIcon}