debug aria

vaadin · Mar 24, 2020 · c733c91 · c733c91
1 parent 1bc33a2
commit c733c91
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/demo/debug.html b/demo/debug.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+  <title>Debug</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../vaadin-text-field.html">
+  <!--<link rel="import" href="../vaadin-password-field.html">
+  <link rel="import" href="../vaadin-email-field.html">
+  <link rel="import" href="../vaadin-text-area.html">
+  <link rel="import" href="../vaadin-number-field.html">
+  <link rel="import" href="../vaadin-integer-field.html">
+  <link rel="import" href="../../iron-form/iron-form.html">
+  <link rel="import" href="../../vaadin-lumo-styles/icons.html">-->
+</head>
+
+<body>
+  <main>
+    <h1>Test</h1>
+    <h2>With ARIA</h2>
+    <vaadin-text-field label="Foo" disabled></vaadin-text-field>
+    <vaadin-text-field label="Foo" readonly></vaadin-text-field>
+    <vaadin-text-field label="Foo" required></vaadin-text-field>
+    <vaadin-text-field label="Foo" invalid></vaadin-text-field>
+    <h2>Without ARIA</h2>
+    <vaadin-text-field no-aria label="Foo" disabled></vaadin-text-field>
+    <vaadin-text-field no-aria label="Foo" readonly></vaadin-text-field>
+    <vaadin-text-field no-aria label="Foo" required></vaadin-text-field>
+    <vaadin-text-field no-aria label="Foo" invalid></vaadin-text-field>
+    <h2>Side by side (with and without ARIA)</h2>
+    <vaadin-text-field label="Foo" disabled></vaadin-text-field> <vaadin-text-field no-aria label="Foo" disabled></vaadin-text-field><br>
+    <vaadin-text-field label="Foo" readonly></vaadin-text-field> <vaadin-text-field no-aria label="Foo" readonly></vaadin-text-field><br>
+    <vaadin-text-field label="Foo" required></vaadin-text-field> <vaadin-text-field no-aria label="Foo" required></vaadin-text-field><br>
+    <vaadin-text-field label="Foo" invalid></vaadin-text-field> <vaadin-text-field no-aria label="Foo" invalid></vaadin-text-field><br>
+    <h2>Native input best practice</h2>
+    <label>Foo <input type="text" disabled></label>
+    <label>Foo <input type="text" readonly></label>
+    <label>Foo <input type="text" required></label>
+    <label>Foo <input type="text" aria-invalid="true"></label>
+  </main>
+</body>
+</html>
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -499,10 +499,10 @@
       const input = this.inputElement;
       const attributeNames = HOST_PROPS[type];
 
-      if (type === 'accessible') {
+      if (type === PROP_TYPE.ACCESSIBLE && !this.hasAttribute('no-aria')) {
         attributeNames.forEach((attr, index) => {
           this._setOrToggleAttribute(attr, attributesValues[index], input);
-          this._setOrToggleAttribute(`aria-${attr}`, attributesValues[index], input);
+          this._setOrToggleAttribute(`aria-${attr}`, attributesValues[index] ? 'true' : false, input);
         });
       } else {
         attributeNames.forEach((attr, index) => {

diff --git a/test/accessibility.html b/test/accessibility.html
@@ -226,7 +226,7 @@
 
             it('should be marked required', function() {
               tf.required = true;
-              expect(input.hasAttribute('aria-required')).to.be.true;
+              expect(input.getAttribute('aria-required')).to.equal('true');
             });
 
             it('should not be marked readonly', function() {
@@ -235,7 +235,7 @@
 
             it('should be marked readonly', function() {
               tf.readonly = true;
-              expect(input.hasAttribute('aria-readonly')).to.be.true;
+              expect(input.getAttribute('aria-readonly')).to.equal('true');
             });
 
             describe('clear icon button', function() {
@@ -316,7 +316,7 @@
             });
 
             it('should be marked invalid', function() {
-              expect(input.hasAttribute('aria-invalid')).to.be.true;
+              expect(input.getAttribute('aria-invalid')).to.equal('true');
             });
 
             it('should not be marked invalid', function() {