fix: treat input with no role as textbox (#2929)

Have <input type="password" aria-label="password"> pass aria-allowed-attr.
dequelabs · May 18, 2021 · de18030 · de18030
1 parent 9b07c10
commit de18030
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/lib/commons/standards/implicit-html-roles.js b/lib/commons/standards/implicit-html-roles.js
@@ -110,19 +110,8 @@ const implicitHtmlRoles = {
     }
 
     switch (vNode.props.type) {
-      case 'button':
-      case 'image':
-      case 'reset':
-      case 'submit':
-        return 'button';
       case 'checkbox':
         return 'checkbox';
-      case 'email':
-      case 'tel':
-      case 'text':
-      case 'url':
-      case '': // text is the default value
-        return !suggestionsSourceElement ? 'textbox' : 'combobox';
       case 'number':
         return 'spinbutton';
       case 'radio':
@@ -131,6 +120,22 @@ const implicitHtmlRoles = {
         return 'slider';
       case 'search':
         return !suggestionsSourceElement ? 'searchbox' : 'combobox';
+
+      case 'button':
+      case 'image':
+      case 'reset':
+      case 'submit':
+        return 'button';
+
+      case 'text':
+      case 'tel':
+      case 'url':
+      case 'email':
+      case '':
+        return !suggestionsSourceElement ? 'textbox' : 'combobox';
+
+      default: 
+        return 'textbox';
     }
   },
   // Note: if an li (or some other elms) do not have a required

diff --git a/test/commons/aria/implicit-role.js b/test/commons/aria/implicit-role.js
@@ -243,6 +243,27 @@ describe('aria.implicitRole', function() {
     assert.equal(implicitRole(node), 'textbox');
   });
 
+  it('should return textbox for "input[type=password]"', function() {
+    fixture.innerHTML = '<input id="target" type="password"/>';
+    var node = fixture.querySelector('#target');
+    flatTreeSetup(fixture);
+    assert.equal(implicitRole(node), 'textbox');
+  });
+
+  it('should return textbox for "input[type=time]"', function() {
+    fixture.innerHTML = '<input id="target" type="time"/>';
+    var node = fixture.querySelector('#target');
+    flatTreeSetup(fixture);
+    assert.equal(implicitRole(node), 'textbox');
+  });
+
+  it('should return textbox for "input[type=date]"', function() {
+    fixture.innerHTML = '<input id="target" type="date"/>';
+    var node = fixture.querySelector('#target');
+    flatTreeSetup(fixture);
+    assert.equal(implicitRole(node), 'textbox');
+  });
+
   it('should return textbox for "input:not([type])"', function() {
     fixture.innerHTML = '<input id="target"/>';
     var node = fixture.querySelector('#target');
@@ -265,6 +286,14 @@ describe('aria.implicitRole', function() {
     assert.equal(implicitRole(node), 'textbox');
   });
 
+  it('should return textbox for "input[type=password][list]"', function() {
+    fixture.innerHTML = '<input id="target" type="password" list="list"/>' +
+      '<datalist id="list"></datalist>';
+    var node = fixture.querySelector('#target');
+    flatTreeSetup(fixture);
+    assert.equal(implicitRole(node), 'textbox');
+  });
+
   it('should return spinbutton for "input[type=number]"', function() {
     fixture.innerHTML = '<input id="target" type="number"/>';
     var node = fixture.querySelector('#target');