Pulled from main and resolved autocomplete and distinguishable links conflicts

Author: mattscepter

lib/checks/color/link-in-text-block-evaluate.js

@@ -46,6 +46,13 @@ function linkInTextBlockEvaluate(node, options) {
   this.relatedNodes([parentBlock]);
 
   if (evaluateOptions.a11yRule) {
+    if (
+      node.getAttribute('type') === 'button' ||
+      node.nodeName.toLowerCase() === 'button' ||
+      node.getAttribute('role') === 'button'
+    ) {
+      return true;
+    }
     return a11yEngineCommons.distinguishableLinkEvaluate(node, parentBlock);
   }
 

lib/checks/forms/autocomplete-a11y-evaluate.js

@@ -0,0 +1,69 @@
+import { isValidAutocomplete } from '../../commons/text';
+
+function checkIsElementValidAutocomplete(node, options, virtualNode) {
+  const autocomplete = virtualNode.attr('autocomplete')?.toLowerCase().trim();
+  // if element has autocomplete attribute as off then it is not a violation
+  if (autocomplete === 'off' || autocomplete === 'chrome-off') {
+    return true;
+  }
+
+  // if it is on then we check whether name / id have valid autocomplete value or not
+  // same for the case if autocomplete is not present or has a non-standard value
+  if (
+    !autocomplete ||
+    autocomplete === 'on' ||
+    !isValidAutocomplete(autocomplete, options)
+  ) {
+    const name = virtualNode.attr('name');
+    const id = virtualNode.attr('id');
+    if (
+      (name && isValidAutocomplete(name, options)) ||
+      (id && isValidAutocomplete(id, options))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  // if element autocomplete attribute is neither off nor on then we check if its a standard value
+  if (isValidAutocomplete(autocomplete, options)) {
+    return true;
+  }
+
+  return false;
+}
+
+function autocompleteA11yEvaluate(node, options, virtualNode) {
+  try {
+    const autocomplete = virtualNode.attr('autocomplete');
+
+    // check if the autocomplete applicable element is inside form or exist freely
+    const closestForm = virtualNode.actualNode.closest('form');
+
+    //if it exists inside the form and autocomplete for form is off
+    if (
+      closestForm &&
+      (closestForm.getAttribute('autocomplete')?.toLowerCase().trim() ===
+        'off' ||
+        closestForm.getAttribute('autocomplete')?.toLowerCase().trim() ===
+          'chrome-off')
+    ) {
+      // if autocomplete attribute is not present for element then its a pass in this scenario
+      // otherwise check all posibilities with the method
+      return autocomplete
+        ? checkIsElementValidAutocomplete(node, options, virtualNode)
+        : true;
+    } else {
+      // The else case is if form is present and it has autocomplete as on or not set and
+      // the other case this handles is that element exists independently
+
+      // this method would check for all posibilities
+      return checkIsElementValidAutocomplete(node, options, virtualNode);
+    }
+  } catch (err) {
+    //    ErrorHandler.addCheckError('autocomplete-attribute-valid-check', err);
+    return undefined;
+  }
+}
+
+export default autocompleteA11yEvaluate;

lib/commons/a11yCommons/index.js

@@ -0,0 +1,2 @@
+export { getColorContrast } from '../../checks/color/link-in-text-block-evaluate';
+export { getContrast } from '../../checks/color/link-in-text-block-evaluate';

lib/commons/index.js

@@ -16,6 +16,7 @@ import * as standards from './standards';
 import * as table from './table';
 import * as text from './text';
 import * as utils from '../core/utils';
+import * as a11yCommons from './a11yCommons';
 
 var commons = {
   aria,
@@ -35,10 +36,10 @@ export {
   color,
   dom,
   forms,
-  math,
   matches,
   standards,
   table,
   text,
-  utils
+  utils,
+  a11yCommons
 };

lib/rules/autocomplete-a11y-matches.js

@@ -0,0 +1,10 @@
+import autocompleteMatches from './autocomplete-matches';
+
+function autocompleteA11yMatches(node, virtualNode) {
+  const a11yEngineFlag = true;
+  // the flag is used to tell autocomplete matcher that it is being called
+  // by a11y-engine and thus bypass an if block
+  return autocompleteMatches(node, virtualNode, a11yEngineFlag);
+}
+
+export default autocompleteA11yMatches;

lib/rules/autocomplete-matches.js

@@ -2,9 +2,9 @@ import { sanitize } from '../commons/text';
 import standards from '../standards';
 import { isVisibleToScreenReaders, isVisibleOnScreen } from '../commons/dom';
 
-function autocompleteMatches(node, virtualNode) {
+function autocompleteMatches(node, virtualNode, flag = false) {
   const autocomplete = virtualNode.attr('autocomplete');
-  if (!autocomplete || sanitize(autocomplete) === '') {
+  if ((!autocomplete || sanitize(autocomplete) === '') && !flag) {
     return false;
   }
 
@@ -13,8 +13,17 @@ function autocompleteMatches(node, virtualNode) {
     return false;
   }
 
-  // The element is an `input` element a `type` of `hidden`, `button`, `submit` or `reset`
-  const excludedInputTypes = ['submit', 'reset', 'button', 'hidden'];
+  // The element is an `input` element a `type` of `hidden`, `reset`,`button`, `submit` , 'checkbox', 'file', 'image', or 'radio'
+  const excludedInputTypes = [
+    'submit',
+    'reset',
+    'button',
+    'hidden',
+    'checkbox',
+    'file',
+    'image',
+    'radio'
+  ];
   if (
     nodeName === 'input' &&
     excludedInputTypes.includes(virtualNode.props.type)

test/checks/forms/autocomplete-valid.js

@@ -11,6 +11,8 @@ describe('autocomplete-valid', function () {
     checkContext.reset();
   });
 
+  // original axe-core's check test
+
   it('returns true if autocomplete is valid', function () {
     var params = checkSetup('<input autocomplete="on" id="target" />');
     assert.isTrue(evaluate.apply(checkContext, params));
@@ -29,4 +31,180 @@ describe('autocomplete-valid', function () {
     );
     assert.isTrue(evaluate.apply(checkContext, params));
   });
+
+  // it("evaluate() passes a document if form element has autocomplete set off and child elements don't have autocomplete", function() {
+  //   console.log('Our functions are running fine');
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set off and child elements have autocomplete as off', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input autocomplete="off" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set off and child elements have standard autcomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input autocomplete="username" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set off, child elements have on autocomplete value and name or id has standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input autocomplete="on" name="name" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() fails a document if form element has autocomplete set off and child elements have on autocomplete value and name or id has non-standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input autocomplete="on" name="xname" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set off, child elements have non-standard autocomplete value and name or id has standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input autocomplete="xname" name="name" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() fails a document if form element has autocomplete set off, child elements have non-standard autocomplete value and name or id has non-standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="off" onsubmit="javascript(0)"> <input autocomplete="xname" name="xname" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set on and child elements have autocomplete set to off', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input autocomplete="off" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() passes a document if form element doesn't have autocomplete set and child elements have autocomplete set to off", function() {
+  //   var params = checkSetup(
+  //     '<html> <form  onsubmit="javascript(0)"> <input autocomplete="off" type="text" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set on and child elements have autocomplete set to standard irrespective of name and id', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input autocomplete="name" type="text" name="xname" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() passes a document if form element doesn't have autocomplete set and child elements have autocomplete set to standard irrespective of name and id", function() {
+  //   var params = checkSetup(
+  //     '<html> <form onsubmit="javascript(0)"> <input autocomplete="name" type="text" name="xname" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if form element has autocomplete set on and child elements have autocomplete set on and name/id have a standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input autocomplete="on" type="text" name="name" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() passes a document if form element doesn't have autocomplete set and child elements have autocomplete set on and name/id have a standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input autocomplete="on" type="text" name="name" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() fails a document if form element has autocomplete set on and child elements have autocomplete set on and name/id have a non-standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input autocomplete="on" type="text" name="xname" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() fails a document if form element doesn't have autcomplete set and child elements have autocomplete set on and name/id have a non-standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <form onsubmit="javascript(0)"> <input autocomplete="on" type="text" name="xname" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() passes a document if form element has autocomplete set on and child elements don't have autocomplete set and name/id have a standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input type="text" name="name" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() passes a document if form element doesn't have autocomplete set and child elements don't have autocomplete set and name/id have a standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <form onsubmit="javascript(0)"> <input type="text" name="name" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() fails a document if form element has autocomplete set on and child elements don't have autocomplete set and name/id have a non-standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <form autocomplete="on" onsubmit="javascript(0)"> <input type="text" name="xname" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() fails a document if form element doesn't have autocomplete set and child elements don't have autocomplete set and name/id have a non-standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <form onsubmit="javascript(0)"> <input type="text" name="xname" id="target"/> <button>Save</button> </form> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if element is independent and have autocomplete set to off', function() {
+  //   var params = checkSetup(
+  //     '<html> <input autocomplete="off" type="text" id="target"/> <button>Save</button> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if element is independent and have autocomplete set to standard irrespective of name and id', function() {
+  //   var params = checkSetup(
+  //     '<html> <input autocomplete="name" type="text" name="xname" id="target"/> <button>Save</button> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() passes a document if element is independent and have autocomplete set on and name/id have a standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <input autocomplete="on" type="text" name="name" id="target"/> <button>Save</button> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it('evaluate() fails a document if element is independent and have autocomplete set on and name/id have a non-standard autocomplete value', function() {
+  //   var params = checkSetup(
+  //     '<html> <input autocomplete="on" type="text" name="xname" id="target"/> <button>Save</button> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate()passes a document if element is independent and don't have autocomplete set and name/id have a standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <input type="text" name="name" id="target"/> <button>Save</button> </html>'
+  //   );
+  //   assert.isTrue(evaluate.apply(checkContext, params));
+  // });
+
+  // it("evaluate() fails a document if element is independent and don't have autocomplete set and name/id have a non-standard autocomplete value", function() {
+  //   var params = checkSetup(
+  //     '<html> <input type="text" name="xname" id="target"/> <button>Save</button> </html>'
+  //   );
+  //   assert.isFalse(evaluate.apply(checkContext, params));
+  // });
 });