feat: add i18n API for clear button accessible label

Fixes #348
vaadin · Apr 2, 2019 · aa0a3e1 · aa0a3e1
1 parent 8722e4b
commit aa0a3e1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/src/vaadin-text-area.html b/src/vaadin-text-area.html
@@ -60,7 +60,7 @@
           <textarea part="value"></textarea>
         </slot>
 
-        <div part="clear-button" id="clearButton" role="button" aria-label="Clear"></div>
+        <div part="clear-button" id="clearButton" role="button" aria-label$="[[i18n.clear]]"></div>
         <slot name="suffix"></slot>
 
       </div>

diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -192,6 +192,26 @@
           value: ''
         },
 
+        /**
+         * Object with translated strings used for localization. Has
+         * the following structure and default values:
+         *
+         * ```
+         * {
+         *   // Translation of the clear icon button accessible label
+         *   clear: 'Clear'
+         * }
+         * ```
+         */
+        i18n: {
+          type: Object,
+          value: () => {
+            return {
+              clear: 'Clear'
+            };
+          }
+        },
+
         /**
          * String used for the label element.
          */

diff --git a/src/vaadin-text-field.html b/src/vaadin-text-field.html
@@ -26,7 +26,7 @@
           <input part="value">
         </slot>
 
-        <div part="clear-button" id="clearButton" role="button" aria-label="Clear"></div>
+        <div part="clear-button" id="clearButton" role="button" aria-label$="[[i18n.clear]]"></div>
         <slot name="suffix"></slot>
 
       </div>

diff --git a/test/accessibility.html b/test/accessibility.html
@@ -208,6 +208,24 @@
               expect(input.hasAttribute('aria-readonly')).to.be.true;
             });
 
+            describe('clear icon button', function() {
+
+              it('should have default accessible label', function() {
+                expect(tf.$.clearButton.getAttribute('aria-label')).to.equal('Clear');
+              });
+
+              it('should translate accesible label with new i18n object', function() {
+                tf.i18n = {clear: 'tyhjennä'};
+                expect(tf.$.clearButton.getAttribute('aria-label')).to.equal('tyhjennä');
+              });
+
+              it('should translate accesible label with set API', function() {
+                tf.set('i18n.clear', 'tyhjennä');
+                expect(tf.$.clearButton.getAttribute('aria-label')).to.equal('tyhjennä');
+              });
+
+            });
+
           });
 
           describe(`error ${condition}`, function() {