Merge pull request #609 from PolymerElements/unique-ids

2.x: Generate unique IDs for the input in the shadow root

Author: notwaldorf

Diff for: paper-input-behavior.html

@@ -19,6 +19,7 @@
   Polymer.PaperInputHelper = {};
   Polymer.PaperInputHelper.NextLabelID = 1;
   Polymer.PaperInputHelper.NextAddonID = 1;
+  Polymer.PaperInputHelper.NextInputID = 1;
 
   /**
    * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
@@ -361,8 +362,12 @@
       _ariaLabelledBy: {
         type: String,
         value: ''
-      }
+      },
 
+      _inputId: {
+        type: String,
+        value: ''
+      }
     },
 
     listeners: {
@@ -381,6 +386,16 @@
      * Returns a reference to the input element.
      */
     get inputElement() {
+      // Chrome generates audit errors if an <input type="password"> has a
+      // duplicate ID, which is almost always true in Shady DOM. Generate
+      // a unique ID instead.
+      if (!this.$) {
+        this.$ = {}
+      }
+      if (!this.$.input) {
+        this._generateInputId();
+        this.$.input = this.$$('#' + this._inputId);
+      }
       return this.$.input;
     },
 
@@ -516,6 +531,12 @@
       this._ariaLabelledBy = labelledBy;
     },
 
+    _generateInputId: function() {
+      if (!this._inputId || this._inputId === '') {
+        this._inputId =  'input-' + Polymer.PaperInputHelper.NextInputID++;
+      }
+    },
+
     _onChange:function(event) {
       // In the Shadow DOM, the `change` event is not leaked into the
       // ancestor tree, so we must do this manually.

Diff for: paper-input.html

@@ -161,7 +161,7 @@
 
       <slot name="prefix" slot="prefix"></slot>
 
-      <label hidden$="[[!label]]" aria-hidden="true" for="input" slot="label">[[label]]</label>
+      <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>
 
       <span id="template-placeholder"></span>
 
@@ -183,7 +183,9 @@
     Expect some conditional code (especially in the tests).
    -->
   <template id="v0">
-    <input is="iron-input" id="input" slot="input"
+    <input is="iron-input" slot="input"
+        class="input-element"
+        id$="[[_inputId]]"
         aria-labelledby$="[[_ariaLabelledBy]]"
         aria-describedby$="[[_ariaDescribedBy]]"
         disabled$="[[disabled]]"
@@ -221,12 +223,14 @@
 
   <template id="v1">
     <!-- Need to bind maxlength so that the paper-input-char-counter works correctly -->
-    <iron-input bind-value="{{value}}" id="input" slot="input"
+    <iron-input bind-value="{{value}}" slot="input"
+        class="input-element"
+        id$="[[_inputId]]"
         maxlength$="[[maxlength]]"
         allowed-pattern="[[allowedPattern]]"
         invalid="{{invalid}}"
         validator="[[validator]]">
-      <input id="nativeInput"
+      <input
         aria-labelledby$="[[_ariaLabelledBy]]"
         aria-describedby$="[[_ariaDescribedBy]]"
         disabled$="[[disabled]]"
@@ -302,6 +306,11 @@
     },
 
     _onIronInputReady: function() {
+      // Even though this is only used in the next line, save this for
+      // backwards compatibility, since the native input had this ID until 2.0.5.
+      if (!this.$.nativeInput) {
+        this.$.nativeInput = this.$$('input');
+      }
       if (this.inputElement &&
           this._typesThatHaveText.indexOf(this.$.nativeInput.type) !== -1) {
         this.alwaysFloatLabel = true;

Diff for: paper-textarea.html

@@ -55,9 +55,10 @@
         disabled$="[[disabled]]"
         invalid="[[invalid]]">
 
-      <label hidden$="[[!label]]" aria-hidden="true" for="input" slot="label">[[label]]</label>
+      <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label>
 
-      <iron-autogrow-textarea id="input" class="paper-input-input" slot="input"
+      <iron-autogrow-textarea class="paper-input-input" slot="input"
+        id$="[[_inputId]]"
         aria-labelledby$="[[_ariaLabelledBy]]"
         aria-describedby$="[[_ariaDescribedBy]]"
         bind-value="{{value}}"
@@ -151,15 +152,15 @@
     },
 
     _ariaLabelledByChanged: function(ariaLabelledBy) {
-      this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
+      this._focusableElement.setAttribute('aria-labelledby', ariaLabelledBy);
     },
 
     _ariaDescribedByChanged: function(ariaDescribedBy) {
-      this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
+      this._focusableElement.setAttribute('aria-describedby', ariaDescribedBy);
     },
 
     get _focusableElement() {
-      return this.$.input.textarea;
+      return this.inputElement.textarea;
     },
   });
 </script>