testaro 18.1.0 → 18.2.0

package/aslint/app/rules/aslint/capital-letters-words/capital-letters-words.ts

@@ -0,0 +1,120 @@
+import { DomUtility } from '../../../utils/dom';
+import { Css } from '../../../utils/css';
+import { TextUtility } from '../../../utils/text';
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TranslateService } from '../../../services/translate';
+import { $severity } from '../../../constants/accessibility';
+import { $accessibilityAuditRules } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class CapitalLettersWords extends AbstractRule {
+  protected selector: string = `*${[
+    ':root',
+    'head',
+    'style',
+    'script',
+    'noscript',
+    'meta',
+    'link',
+    'br',
+    'hr',
+    'object',
+    'svg',
+    'path',
+    'defs',
+    'rect',
+    'clippath',
+    'use',
+    'g',
+    'b',
+    'filter',
+    'img',
+    'picture',
+    'input',
+    'iframe',
+    'code',
+    'metadata',
+    ':empty'
+  ].map((i: string): string => {
+    return `:not(${i})`;
+  }).join('')}`;
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.capital_letters_words),
+    links: [
+      {
+        content: 'Dyslexia Font and Style Guide',
+        url: 'https://www.dyslexia-reading-well.com/dyslexia-font.html'
+      },
+      {
+        content: 'Typefaces for dyslexia',
+        url: 'https://bdatech.org/what-technology/typefaces-for-dyslexia/'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.high,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(nodes: HTMLElement[]): void {
+    const onlyWordsWithUpperCases = (word: string): boolean => {
+      return TextUtility.isUpperCase(word);
+    };
+
+    const processNode = (element: HTMLElement): void => {
+      const report: IIssueReport = {
+        message: '',
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      let reportMessage: string = '';
+
+      let words: string[];
+      let onlyWordsWithUpperCase: string[] = [];
+
+      const text: string = DomUtility.getTextFromDescendantContent(element).trim();
+
+      words = text.split(' ');
+
+      if (text.length > 0 && words.length > 0) {
+        if (Css.isCssTextTransformUsed(element)) {
+          reportMessage = TranslateService.instant('capital_letters_words_report_message1', [text.toUpperCase()]);
+        } else {
+
+          onlyWordsWithUpperCase = words.filter(onlyWordsWithUpperCases);
+
+          if (onlyWordsWithUpperCase.length > 1) {
+            reportMessage = TranslateService.instant('capital_letters_words_report_message2');
+          }
+        }
+      }
+
+      const titleAttribute: string | null = element.getAttribute('title');
+
+      if (typeof titleAttribute === 'string' && titleAttribute.trim().length > 0) {
+        words = titleAttribute.split(' ');
+        onlyWordsWithUpperCase = words.filter(onlyWordsWithUpperCases);
+
+        if (onlyWordsWithUpperCase.length > 1) {
+          if (reportMessage.length === 0) {
+            reportMessage = TranslateService.instant('capital_letters_words_report_message3', [titleAttribute]);
+          } else {
+            reportMessage = TranslateService.instant('capital_letters_words_report_message4', [titleAttribute]);
+          }
+        }
+      }
+
+      if (reportMessage.length === 0) {
+        return;
+      }
+
+      report.message = `${reportMessage} ${TranslateService.instant('capital_letters_words_report_explanation')}`;
+
+      this.validator.report(report);
+    };
+
+    nodes.forEach(processNode);
+  }
+}

package/aslint/app/rules/aslint/content-editable-missing-attributes/content-editable-missing-attributes.docmentation.md

@@ -0,0 +1,48 @@
+# content-editable-missing-attributes
+
+## Rule id
+
+`content-editable-missing-attributes`
+
+## Definition
+
+This rule verifies if element with attribute `contenteditable` have defined also following attributes:
+
+1. `aria-multiline`
+2. `aria-labelledby` or `aria-label`
+
+## Purpose
+
+When `aria-multiline="true"` is set then Assistive Technologies informs the user that the textbox supports multi-line input, with the expectation that <kbd>Enter</kbd> or <kbd>Return</kbd> will create a line break rather than submitting the form.
+
+`aria-label` here is recommended to specify a string to be used as the accessible label.
+
+Eventually `aria-labelledby` can be used to specify the `id` of another element in the DOM as an element's label.
+
+## Test cases
+
+### Passed
+
+The rule passes when all of the following cases are fulfilled:
+
+1. Attribute `contenteditable` is defined.
+2. `aria-label` or `aria-labelledby` is defined. The rule does not validate `aria-labelledby` ids if the referenced elements exists.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: high
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+Not available

package/aslint/app/rules/aslint/content-editable-missing-attributes/content-editable-missing-attributes.test.ts

@@ -0,0 +1,67 @@
+import { ContentEditableMissingAttributes } from './content-editable-missing-attributes';
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+
+describe('Rules', () => {
+
+  describe('#content-editable-missing-attributes', () => {
+
+    let fakeDom;
+
+    new ContentEditableMissingAttributes().registerValidator();
+
+    beforeEach(() => {
+      fakeDom = document.createElement('div');
+      fakeDom.id = 'fakedom';
+      document.body.appendChild(fakeDom);
+
+      Validator.reset();
+    });
+
+    afterEach(() => {
+      DomUtility.remove(document.getElementById('fakedom'));
+      fakeDom = undefined;
+    });
+
+    it('should return 3 reports when there is an element with attribute [contenteditable] only', () => {
+      fakeDom.innerHTML = '<p contenteditable="true"></p>';
+
+      const nodes = DomUtility.querySelectorAllExclude('[contenteditable]', fakeDom);
+
+      new ContentEditableMissingAttributes().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(3);
+
+      expect(Validator.getReport('report_0').message).toBe('Missing attribute <code>role=\'textbox\'</code> on <code>&lt;p contenteditable&#x3D;&quot;true&quot;&gt;&lt;&#x2F;p&gt;</code>');
+      expect(Validator.getReport('report_1').message).toBe('Missing attribute <code>aria-multiline=\'true\'</code> on <code>&lt;p contenteditable&#x3D;&quot;true&quot;&gt;&lt;&#x2F;p&gt;</code>');
+      expect(Validator.getReport('report_2').message).toBe('Missing attribute <code>aria-labelledby</code> or <code>aria-label</code> on <code>&lt;p contenteditable&#x3D;&quot;true&quot;&gt;&lt;&#x2F;p&gt;</code>');
+    });
+
+    it('should return 2 reports when there is an element with attribute [contenteditable] and defined attribute aria-label', () => {
+      fakeDom.innerHTML = '<p contenteditable="true" aria-label="test"></p><span id="test">test</span>';
+
+      const nodes = DomUtility.querySelectorAllExclude('[contenteditable]', fakeDom);
+
+      new ContentEditableMissingAttributes().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(2);
+
+      expect(Validator.getReport('report_0').message).toBe('Missing attribute <code>role=\'textbox\'</code> on <code>&lt;p contenteditable&#x3D;&quot;true&quot; aria-label&#x3D;&quot;test&quot;&gt;&lt;&#x2F;p&gt;</code>');
+      expect(Validator.getReport('report_1').message).toBe('Missing attribute <code>aria-multiline=\'true\'</code> on <code>&lt;p contenteditable&#x3D;&quot;true&quot; aria-label&#x3D;&quot;test&quot;&gt;&lt;&#x2F;p&gt;</code>');
+    });
+
+    it('should return 1 report for missing attribute role="textbox" when there is an element with attribute [contenteditable], defined attribute aria-label and aria-multiline', () => {
+      fakeDom.innerHTML = '<p contenteditable="true" aria-label="test" aria-multiline="true"></p><span id="test">test</span>';
+
+      const nodes = DomUtility.querySelectorAllExclude('[contenteditable]', fakeDom);
+
+      new ContentEditableMissingAttributes().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+
+      expect(Validator.getReport('report_0').message).toBe('Missing attribute <code>role=\'textbox\'</code> on <code>&lt;p contenteditable&#x3D;&quot;true&quot; aria-label&#x3D;&quot;test&quot; aria-multiline&#x3D;&quot;true&quot;&gt;&lt;&#x2F;p&gt;</code>');
+    });
+
+  });
+
+});

package/aslint/app/rules/aslint/content-editable-missing-attributes/content-editable-missing-attributes.ts

@@ -0,0 +1,63 @@
+import { DomUtility } from '../../../utils/dom';
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TextUtility } from '../../../utils/text';
+import { TranslateService } from '../../../services/translate';
+import { $accessibilityAuditRules, $severity } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class ContentEditableMissingAttributes extends AbstractRule {
+  protected selector: string = '[contenteditable]';
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.content_editable_missing_attributes),
+    links: [],
+    recommendations: [],
+    severity: $severity.low,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    const reportMissingAttributes = (element: Element): void => {
+      let problem: IIssueReport;
+      const roleValue: string | null = element.getAttribute('role');
+
+      if (roleValue !== 'textbox') {
+        const reportMessage: string = TranslateService.instant('content_editable_missing_attributes_report_message1', [DomUtility.getEscapedOuterHTML(element)]);
+
+        problem = {
+          message: reportMessage,
+          node: element,
+          ruleId: this.ruleConfig.id
+        };
+
+        this.validator.report(problem);
+      }
+
+      if (element.getAttribute('aria-multiline') === null) {
+        const reportMessage: string = TranslateService.instant('content_editable_missing_attributes_report_message2', [DomUtility.getEscapedOuterHTML(element)]);
+
+        problem = {
+          message: reportMessage,
+          node: element,
+          ruleId: this.ruleConfig.id
+        };
+
+        this.validator.report(problem);
+      }
+
+      if (element.getAttribute('aria-labelledby') === null && element.getAttribute('aria-label') === null) {
+        const reportMessage: string = TranslateService.instant('content_editable_missing_attributes_report_message3', [DomUtility.getEscapedOuterHTML(element)]);
+
+        problem = {
+          message: reportMessage,
+          node: element,
+          ruleId: this.ruleConfig.id
+        };
+
+        this.validator.report(problem);
+      }
+    };
+
+    elements.forEach(reportMissingAttributes);
+  }
+}

package/aslint/app/rules/aslint/contentinfo-landmark-only-one/contentinfo-landmark-only-one.documentation.md

@@ -0,0 +1,45 @@
+# contentinfo-landmark-only-one
+
+## Rule id
+
+`contentinfo-landmark-only-one`
+
+## Definition
+
+This rule verifies if there is no more than 1 element with an attribute `role="contentinfo"`.
+
+## Purpose
+
+Based on https://www.w3.org/TR/wai-aria/#contentinfo
+
+> Within any document or application, the author SHOULD mark no more than one element with the contentinfo role.
+
+
+## Test cases
+
+### Passed
+
+The rule passes when all of the following cases are fulfilled:
+
+1. There is no more than 1 element with an attribute `role="contentinfo"`
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: low
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* https://www.w3.org/TR/wai-aria/#contentinfo
+* http://www.w3.org/TR/WCAG20-TECHS/ARIA11
+

package/aslint/app/rules/aslint/contentinfo-landmark-only-one/contentinfo-landmark-only-one.test.ts

@@ -0,0 +1,63 @@
+import { ContentinfoLandmarkOnlyOne } from './contentinfo-landmark-only-one';
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+
+describe('Rules', () => {
+
+  describe('ContentinfoLandmarkOnlyOne', () => {
+
+    let fakeDom;
+
+    new ContentinfoLandmarkOnlyOne().registerValidator();
+
+    beforeEach(() => {
+      fakeDom = document.createElement('div');
+      fakeDom.id = 'fakedom';
+      document.body.appendChild(fakeDom);
+
+      Validator.reset();
+    });
+
+    afterEach(() => {
+      DomUtility.remove(document.getElementById('fakedom'));
+      fakeDom = undefined;
+    });
+
+    it('should return one report when there is an element with more than one attribute role="contentinfo"', () => {
+      fakeDom.innerHTML = '<div role="contentinfo"></div><div role="contentinfo"></div>';
+
+      const nodes = DomUtility.querySelectorAllExclude('[role=contentinfo]', fakeDom);
+
+      new ContentinfoLandmarkOnlyOne().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(2);
+      expect(Validator.getReport('report_0').message).toBe('Expected attribute <code>role&#x3D;&quot;contentinfo&quot;</code> to be defined only once. You have 2 .');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+      expect(Validator.getReport('report_0').ruleId).toBe('contentinfo-landmark-only-one');
+      expect(Validator.getReport('report_1').message).toBe('Expected attribute <code>role&#x3D;&quot;contentinfo&quot;</code> to be defined only once. You have 2 .');
+      expect(Validator.getReport('report_1').node.nodeName.toLowerCase()).toBe('div');
+      expect(Validator.getReport('report_1').ruleId).toBe('contentinfo-landmark-only-one');
+    });
+
+    it('should return no reports when there is 1 element with attribute role="contentinfo"', () => {
+      fakeDom.innerHTML = '<div role="contentinfo">';
+
+      const nodes = DomUtility.querySelectorAllExclude('[role=contentinfo]', fakeDom);
+
+      new ContentinfoLandmarkOnlyOne().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+    it('should return no reports when there is no elements with attribute role="contentinfo"', () => {
+      fakeDom.innerHTML = '<div>contentinfo</div>';
+      const nodes = DomUtility.querySelectorAllExclude('[role=contentinfo]', fakeDom);
+
+      new ContentinfoLandmarkOnlyOne().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+
+});

package/aslint/app/rules/aslint/contentinfo-landmark-only-one/contentinfo-landmark-only-one.ts

@@ -0,0 +1,44 @@
+import { TextUtility } from '../../../utils/text';
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { $accessibilityAuditRules, $severity } from '../../../constants/accessibility';
+import { TranslateService } from '../../../services/translate';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class ContentinfoLandmarkOnlyOne extends AbstractRule {
+  protected selector: string = '[role="contentinfo"]';
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.contentinfo_landmark_only_one),
+    links: [
+      {
+        content: 'ARIA11: Using ARIA landmarks to identify regions of a page',
+        url: 'http://www.w3.org/TR/WCAG20-TECHS/ARIA11'
+      },
+      {
+        content: 'Accessible Rich Internet Applications (WAI-ARIA) 1.0 Specification: contentinfo role',
+        url: 'https://www.w3.org/TR/wai-aria/#contentinfo'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.low,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(nodes: Element[]): void {
+    const total: number = nodes.length;
+
+    if (total > 1) {
+      nodes.forEach((element: Element): void => {
+        const reportMessage: string = TranslateService.instant('contentinfo_landmark_only_one_report_message', [TextUtility.escape('role="contentinfo"'), total, '.']);
+
+        const report: IIssueReport = {
+          message: reportMessage,
+          node: element,
+          ruleId: this.ruleConfig.id
+        };
+
+        this.validator.report(report);
+      });
+    }
+  }
+}

package/aslint/app/rules/aslint/elements-not-allowed-in-head/elements-not-allowed-in-head.documentation.md

@@ -0,0 +1,65 @@
+# elements-not-allowed-in-head
+
+## Rule id
+
+`elements-not-allowed-in-head`
+
+## Definition
+
+This rule verifies if there are elements that shouldn't be in the `<head>` section.
+
+## Purpose
+
+`<head>` section contains elements that provides information of how the document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, screen readers, etc.
+
+Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. If your code is valid the browser has to do less processing as it doesn't have to correct any code, therefore the page will render faster and more predictable.
+
+In order to make the code accurate processed and rendered it is recommended to have only valid HTML elements / tags in the `<head>` section.
+
+Following elements are allowed to be in the `<head>` section:
+
+    <title>
+    <base>
+    <link>
+    <style>
+    <meta>
+    <script>
+    <noscript>
+    <template>
+
+All other elements / tags are perceived as non-valid.
+
+## Test cases
+
+### Passed
+
+The rule passes when only following elements / tags are specified in the `<head>` section:
+
+    <title>
+    <base>
+    <link>
+    <style>
+    <meta>
+    <script>
+    <noscript>
+    <template>
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: low
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+* https://html.spec.whatwg.org/multipage/semantics.html#the-head-element

package/aslint/app/rules/aslint/elements-not-allowed-in-head/elements-not-allowed-in-head.test.ts

@@ -0,0 +1,53 @@
+import { ElementsNotAllowed } from './elements-not-allowed-in-head';
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+
+describe('Rules', () => {
+
+  describe('ElementsNotAllowed#', () => {
+
+    let fakeDom;
+    const VALID_ELEMENTS: string[] = [':not(base)', ':not(link)', ':not(meta)', ':not(script)', ':not(style)', ':not(title)', ':not(noscript)', ':not(template)'];
+    const selector = `head *${VALID_ELEMENTS.join('')}`;
+
+    new ElementsNotAllowed().registerValidator();
+
+    beforeEach(() => {
+      Validator.reset();
+    });
+
+    afterEach(() => {
+      DomUtility.remove(document.getElementById('headfakedom'));
+      fakeDom = undefined;
+    });
+
+    it('should return one report when there is an element not supposed to be in head block', () => {
+      fakeDom = document.createElement('div');
+      fakeDom.id = 'headfakedom';
+      document.head.appendChild(fakeDom);
+
+      const nodes = DomUtility.querySelectorAllExclude(selector);
+
+      new ElementsNotAllowed().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Expected <code>&lt;div id&#x3D;&quot;headfakedom&quot;&gt;&lt;&#x2F;div&gt;</code> not to be a child of <code>&lt;head&gt;</code>.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+      expect(Validator.getReport('report_0').ruleId).toBe('elements-not-allowed-in-head');
+    });
+
+    it('should return no reports when there is no invalid elements in head section', () => {
+      fakeDom = document.createElement('noscript');
+      fakeDom.id = 'headfakedom';
+      document.head.appendChild(fakeDom);
+
+      const nodes = DomUtility.querySelectorAllExclude(selector);
+
+      new ElementsNotAllowed().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+
+});

package/aslint/app/rules/aslint/elements-not-allowed-in-head/elements-not-allowed-in-head.ts

@@ -0,0 +1,47 @@
+import { DomUtility } from '../../../utils/dom';
+import { TextUtility } from '../../../utils/text';
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TranslateService } from '../../../services/translate';
+import { $accessibilityAuditRules, $severity } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class ElementsNotAllowed extends AbstractRule {
+  protected selector: string = `head *${[
+    ':not(base)',
+    ':not(link)',
+    ':not(meta)',
+    ':not(script)',
+    ':not(style)',
+    ':not(title)',
+    ':not(noscript)',
+    ':not(template)'
+  ].join('')}`;
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.elements_not_allowed_in_head),
+    links: [],
+    recommendations: [],
+    severity: $severity.low,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    const reportNode = (element: Element): void => {
+      const reportMessage: string = TranslateService.instant('elements_not_allowed_in_head_report_message', [
+        DomUtility.getEscapedOuterHTML(element),
+        TextUtility.escape('<head>')
+      ]);
+
+      const report: IIssueReport = {
+        message: reportMessage,
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(report);
+    };
+
+    elements.forEach(reportNode);
+  }
+}

package/aslint/app/rules/aslint/empty-title-attribute/empty-title-attribute.documentation.md

@@ -0,0 +1,55 @@
+# empty-title-attribute
+
+## Rule id
+
+`empty-title-attribute`
+
+## Definition
+
+This rule verifies if there are elements that have an attribute `title` with an empty value. This includes also whitespaces.
+
+## Purpose
+
+`title` attribute should not be empty. This will ensure that the value of `title` will be processed in a predictable way. As a side effect removing an empty value of `title` attribute will make the code smaller, which means less data to transfer and faster processing by e.g. the browser.
+
+Following elements are being skip while evaluating this rule:
+
+      <img/>,
+      <html>,
+      <head>,
+      <title>,
+      <body>,
+      <link/>,
+      <meta>,
+      <title>,
+      <style>,
+      <script>,
+      <noscript>,
+      <iframe>,
+      <br/>,
+      <hr/>
+
+## Test cases
+
+### Passed
+
+The rule passes when element have an attribute `title` with non-empty value. This includes also whitespaces.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: low
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#accessibility_concerns