Merge pull request #45 from PolymerElements/aria-describedby

add aria-describedby
PolymerElements · May 27, 2015 · 1e962da · 1e962da
2 parents 78c11b2 + 5b6214b
commit 1e962da
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 1 deletion.
diff --git a/demo/index.html b/demo/index.html
@@ -69,7 +69,7 @@ <h4>Character counter</h4>
     <div class="vertical-section">
       <paper-input label="label" char-counter></paper-input>
 
-      <paper-input label="at most 5 characters" char-counter maxlength="5"></paper-input>
+      <paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]" maxlength="10" error-message="letters only!"></paper-input>
 
       <paper-textarea label="textarea" char-counter></paper-textarea>
 

diff --git a/paper-input-behavior.html b/paper-input-behavior.html
@@ -217,10 +217,19 @@
        */
       size: {
         type: Number
+      },
+
+      _ariaDescribedBy: {
+        type: String,
+        value: ''
       }
 
     },
 
+    listeners: {
+      'addon-attached': '_onAddonAttached'
+    },
+
     /**
      * Returns a reference to the input element.
      */
@@ -232,6 +241,26 @@
       this._updateAriaLabelledBy();
     },
 
+    _appendStringWithSpace: function(str, more) {
+      if (str) {
+        str = str + ' ' + more;
+      } else {
+        str = more;
+      }
+      return str;
+    },
+
+    _onAddonAttached: function(event) {
+      var target = event.path ? event.path[0] : event.target;
+      if (target.id) {
+        this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, target.id);
+      } else {
+        var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000));
+        target.id = id;
+        this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedBy, id);
+      }
+    },
+
     /**
      * Validates the input element and sets an error style if needed.
      */

diff --git a/paper-input.html b/paper-input.html
@@ -72,6 +72,7 @@
 
       <input is="iron-input" id="input"
         aria-labelledby$="[[_ariaLabelledBy]]"
+        aria-describedby$="[[_ariaDescribedBy]]"
         disabled$="[[disabled]]"
         bind-value="{{value}}"
         invalid="{{invalid}}"

diff --git a/paper-textarea.html b/paper-textarea.html
@@ -76,12 +76,21 @@
       _ariaLabelledBy: {
         observer: '_ariaLabelledByChanged',
         type: String
+      },
+
+      _ariaDescribedBy: {
+        observer: '_ariaDescribedByChanged',
+        type: String
       }
 
     },
 
     _ariaLabelledByChanged: function(ariaLabelledBy) {
       this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
+    },
+
+    _ariaDescribedByChanged: function(ariaDescribedBy) {
+      this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
     }
 
   });

diff --git a/test/paper-input.html b/test/paper-input.html
@@ -54,6 +54,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="required-char-counter">
+    <template>
+      <paper-input auto-validate char-counter required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+
   <test-fixture id="char-counter">
     <template>
       <paper-input char-counter value="foobar"></paper-input>
@@ -131,6 +137,27 @@
         assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
       });
 
+      test('has aria-describedby for error message', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
+      });
+
+      test('has aria-describedby for character counter', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
+      });
+
+      test('has aria-describedby for character counter and error', function() {
+        var input = fixture('required-char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
+      });
+
     });
 
   </script>

diff --git a/test/paper-textarea.html b/test/paper-textarea.html
@@ -41,12 +41,24 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="char-counter">
+    <template>
+      <paper-textarea char-counter></paper-textarea>
+    </template>
+  </test-fixture>
+
   <test-fixture id="required">
     <template>
       <paper-textarea auto-validate required error-message="error"></paper-textarea>
     </template>
   </test-fixture>
 
+  <test-fixture id="required-char-counter">
+    <template>
+      <paper-textarea auto-validate char-counter required error-message="error"></paper-textarea>
+    </template>
+  </test-fixture>
+
   <script>
 
     suite('basic', function() {
@@ -75,6 +87,28 @@
         assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
       });
 
+      test('has aria-describedby for error message', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
+      });
+
+      test('has aria-describedby for character counter', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
+      });
+
+      test('has aria-describedby for character counter and error', function() {
+        var input = fixture('required-char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
+      });
+
+
     });