testaro 18.1.0 → 18.2.0

package/aslint/app/rules/abstract-rule.ts

@@ -0,0 +1,83 @@
+import { IRule } from '../interfaces/rule.interface';
+import { CATEGORY_TYPE } from '../constants/categoryType';
+import { $severity } from '../constants/accessibility';
+import { DomUtility } from '../utils/dom';
+import { Validator } from '../validator';
+import { Config } from '../config';
+import { Context } from '../interfaces/context.interface';
+
+type Nodes = Document[] | HTMLElement[] | Element[] | StyleSheetList[] | CSSStyleSheet[];
+
+export interface IAbstractRuleConfig {
+  id: string;
+  type: CATEGORY_TYPE;
+  severity: $severity;
+  links: { content: string; url: string }[];
+  recommendations: any[];
+}
+
+export abstract class AbstractRule implements IRule {
+  protected context: Context;
+  protected options: any;
+  protected validator: typeof Validator;
+  protected selector: string | (() => Nodes);
+  protected abstract ruleConfig: IAbstractRuleConfig;
+
+  constructor() {
+    this.validator = Validator;
+    this.selector = 'html';
+    this.context = document.documentElement;
+  }
+
+  protected collectElements(): Nodes | null {
+    if (typeof this.selector === 'undefined') {
+      throw new Error(`[AbstractRule] The selector must be a string or function, but there is type of ${typeof this.selector}`);
+    }
+
+    if (typeof this.selector === 'function') {
+      return this.selector();
+    }
+
+    return DomUtility.querySelectorAllExclude(
+      this.selector,
+      this.context,
+      Config.excludeContainers,
+      []
+    );
+  }
+
+  public abstract validate(nodes: Document[] | HTMLElement[] | Element[] | StyleSheetList | StyleSheetList[] | CSSStyleSheet[] | null): void;
+
+  public get config(): IAbstractRuleConfig {
+    return this.ruleConfig;
+  }
+
+  public get id(): string {
+    return this.config.id;
+  }
+
+  // eslint-disable-next-line require-await
+  public async run(context: Context, validator?: typeof Validator, options?: any): Promise<void> {
+    this.context = context;
+    this.options = (typeof options === 'object') ? options : {};
+    this.validator = (typeof validator !== 'undefined') ? validator : Validator;
+
+    let nodes: Nodes | null = this.collectElements();
+    const totalElementsEvaluated: number = nodes === null ? 0 : nodes.length;
+
+    this.validator.setTotalElementsEvaluated(this.ruleConfig.id, totalElementsEvaluated);
+
+    const getFilter = (filter: Function): void => {
+      nodes = filter(this.ruleConfig.id, nodes);
+    };
+
+    Config.getFilters('before-rule-validate').forEach(getFilter);
+
+    this.validate(nodes);
+  }
+
+  public registerValidator(): void {
+    this.validator.register(this.ruleConfig, this.run.bind(this));
+  }
+
+}

package/aslint/app/rules/aslint/aria-hidden-false/aria-hidden-false.test.ts

@@ -0,0 +1,73 @@
+import { AriaHiddenFalse } from './aria-hidden-false';
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+
+describe('Rules', () => {
+
+  describe('AriaHiddenFalse', () => {
+
+    let fakeDom;
+    const selector = 'body [aria-hidden="false"]';
+
+    new AriaHiddenFalse().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 aria-hidden="false"', () => {
+      fakeDom.innerHTML = '<p aria-hidden="false"></p>';
+
+      const nodes: Element[] = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaHiddenFalse().validate(nodes);
+
+      expect(Validator.getReport('report_0').ruleId).toBe('aria-hidden-false');
+      expect(Validator.getReport('report_0').message).toBe('You have defined <code>aria-hidden&#x3D;&quot;false&quot;</code>. Caution, as the child content is always readable by screen readers regardless of setting <code>display: none</code> on any child element.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('p');
+    });
+
+    it('should return 1 report when there is an element with attribute aria-hidden="false" and style="display: none"', () => {
+      fakeDom.innerHTML = '<p aria-hidden="false" style="display: none"></p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaHiddenFalse().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('You have defined <code>aria-hidden&#x3D;&quot;false&quot;</code>. Caution, as the child content is always readable by screen readers regardless of setting <code>display: none</code> on any child element.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('p');
+    });
+
+    it('should return no report when there is an element with attribute aria-hidden="true"', () => {
+      fakeDom.innerHTML = '<p aria-hidden="true"></p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaHiddenFalse().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+    it('should return no report when there is no element with attribute aria-hidden="false"', () => {
+      fakeDom.innerHTML = '<p>test</p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaHiddenFalse().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+
+});

package/aslint/app/rules/aslint/aria-hidden-false/aria-hidden-false.ts

@@ -0,0 +1,34 @@
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TranslateService } from '../../../services/translate';
+import { $severity, $accessibilityAuditRules } from '../../../constants/accessibility';
+import { TextUtility } from '../../../utils/text';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class AriaHiddenFalse extends AbstractRule {
+  protected selector: string = 'body [aria-hidden="false"]';
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.aria_hidden_false),
+    links: [],
+    recommendations: [],
+    severity: $severity.low,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    const reportProblem = (element: Element): void => {
+      const reportMessage: string = TranslateService.instant('aria_hidden_false_report_message', [TextUtility.escape('aria-hidden="false"'), TextUtility.escape('display: none')]);
+
+      const problem: IIssueReport = {
+        message: reportMessage,
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(problem);
+    };
+
+    elements.forEach(reportProblem);
+  }
+}

package/aslint/app/rules/aslint/aria-hidden-false/aria-hidden.documentation.md

@@ -0,0 +1,32 @@
+# aria-hidden
+
+## Rule id
+
+`aria-hidden`
+
+## Definition
+
+`aria-hidden="false"` should be used with caution.
+
+## Purpose
+
+When `aria-hidden="false"` is defined then we need to be cautious, as the child content is always readable by screen readers regardless of setting `aria-hidden="false"` on any child element.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: low
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+Not available

package/aslint/app/rules/aslint/aria-role-dialog/aria-role-dialog.documentation.md

@@ -0,0 +1,49 @@
+# aria-role-dialog
+
+## Rule id
+
+`aria-role-dialog`
+
+## Definition
+
+Ensures that element with attribute `role="dialog"` is having defined an accessible name.
+
+## Purpose
+
+Using `role="dialog"` on the HTML element helps assistive technology identify the dialog's content as being grouped and separated from the rest of the page content. However, having only `role="dialog"` defined alone is not sufficient to make a dialog accessible. Additionally, the following needs to be done:
+
+1. The dialog must be properly labeled
+2. Keyboard focus must be managed correctly
+
+`aria-role-dialog` rule test cases below describe how #1 requirement can be met.
+
+**Note**: when possible you may consider using native [<dialog>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) box feature.
+
+## Test cases
+
+### Passed
+
+The rule passes when one of the following case is fulfilled:
+
+1. Attribute `aria-labelledby` is defined AND is not empty.
+2. Attribute `aria-label` is defined AND is not empty.
+2. Attribute `title` is defined AND is not empty.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: high
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+Not available

package/aslint/app/rules/aslint/aria-role-dialog/aria-role-dialog.test.ts

@@ -0,0 +1,91 @@
+import { AriaRoleDialog } from './aria-role-dialog';
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+
+describe('Rules', () => {
+
+  describe('AriaRoleDialog', () => {
+
+    let fakeDom;
+    const selector = '[role="dialog"], [role="alertdialog"]';
+
+    new AriaRoleDialog().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 no report when there is an element with role="dialog" and aria-label', () => {
+      fakeDom.innerHTML = '<div role="dialog" aria-label="name"></div>';
+
+      const nodes: Element[] = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaRoleDialog().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+    it('should return 1 report when there is an element with role="dialog" and aria-label=""', () => {
+      fakeDom.innerHTML = '<div role="dialog" aria-label=""></div>';
+
+      const nodes: Element[] = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaRoleDialog().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').ruleId).toBe('aria-role-dialog');
+      expect(Validator.getReport('report_0').message).toBe('Element with <code>role&#x3D;&quot;dialog&quot;</code> attribute has no accessible name because attribute <code>aria-label</code> has no content (it\'s empty).');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+    });
+
+    it('should return 1 report when there is an element with role="dialog" and title=""', () => {
+      fakeDom.innerHTML = '<div role="dialog" title=""></div>';
+
+      const nodes: Element[] = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaRoleDialog().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').ruleId).toBe('aria-role-dialog');
+      expect(Validator.getReport('report_0').message).toBe('Element with <code>role&#x3D;&quot;dialog&quot;</code> attribute has no accessible name because attribute <code>title</code> has no content (it\'s empty).');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+    });
+
+    it('should return 1 report when there is an element with role="dialog" without any accesible name', () => {
+      fakeDom.innerHTML = '<div role="dialog"></div>';
+
+      const nodes: Element[] = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaRoleDialog().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').ruleId).toBe('aria-role-dialog');
+      expect(Validator.getReport('report_0').message).toBe('Element with <code>role&#x3D;&quot;dialog&quot;</code> attribute has no accessible name.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+    });
+
+    it('should return 1 report when there is an element with role="alertdialog" without any accesible name', () => {
+      fakeDom.innerHTML = '<div role="alertdialog"></div>';
+
+      const nodes: Element[] = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new AriaRoleDialog().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').ruleId).toBe('aria-role-dialog');
+      expect(Validator.getReport('report_0').message).toBe('Element with <code>role&#x3D;&quot;alertdialog&quot;</code> attribute has no accessible name.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+    });
+
+  });
+
+});

package/aslint/app/rules/aslint/aria-role-dialog/aria-role-dialog.ts

@@ -0,0 +1,62 @@
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TranslateService } from '../../../services/translate';
+import { $severity, $accessibilityAuditRules } from '../../../constants/accessibility';
+import { TextUtility } from '../../../utils/text';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class AriaRoleDialog extends AbstractRule {
+  protected selector: string = '[role="dialog"], [role="alertdialog"]';
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.aria_role_dialog),
+    links: [],
+    recommendations: [],
+    severity: $severity.high,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    const reportProblem = (element: Element): void => {
+
+      const ariaLabelledby: string | null = element.getAttribute('aria-labelledby');
+      const ariaLabel: string | null = element.getAttribute('aria-label');
+      const titleAttr: string | null = element.getAttribute('title');
+      const roleAttr: string | null = element.getAttribute('role');
+
+      let reportMessage: string = '';
+
+      if (typeof ariaLabelledby === 'string') {
+        if (ariaLabelledby.trim().length > 0) {
+          return;
+        }
+
+        reportMessage = TranslateService.instant('aria_role_dialog_report_message_1', [TextUtility.escape(`role="${roleAttr}"`), TextUtility.escape('aria-labelledby')]);
+      } else if (typeof ariaLabel === 'string') {
+        if (ariaLabel.trim().length > 0) {
+          return;
+        }
+
+        reportMessage = TranslateService.instant('aria_role_dialog_report_message_1', [TextUtility.escape(`role="${roleAttr}"`), TextUtility.escape('aria-label')]);
+      } else if (typeof titleAttr === 'string') {
+        if (titleAttr.trim().length > 0) {
+          return;
+        }
+
+        reportMessage = TranslateService.instant('aria_role_dialog_report_message_1', [TextUtility.escape(`role="${roleAttr}"`), TextUtility.escape('title')]);
+      } else {
+        reportMessage = TranslateService.instant('aria_role_dialog_report_message_2', [TextUtility.escape(`role="${roleAttr}"`)]);
+      }
+
+      const problem: IIssueReport = {
+        message: reportMessage,
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(problem);
+    };
+
+    elements.forEach(reportProblem);
+  }
+}

package/aslint/app/rules/aslint/capital-letters-words/capital-letters-words.documentation.md

@@ -0,0 +1,44 @@
+# capital-letters-words
+
+## Rule id
+
+`capital-letters-words`
+
+## Definition
+
+This rule detects words written in all capital letters, including text in an attribute `title` as well as using `text-transform` CSS.
+
+## Purpose
+
+Unless you are dealing with an acronym, there should not be any content in all caps. Some screen readers will announce the capital letters separately (like an acronym) or otherwise misleadingly emphasise the capital letters.
+
+**Example**: CONTACT US and Contact Us will be read be screen reader differently. You can use [Pronunciation checker](https://voicenotebook.com/prononce.php) to verify how these two words are being readable.
+
+## Test cases
+
+### Passed
+
+The rule passes when all of the following cases are fulfilled:
+
+1. Text is not using all capital letters.
+2. There is no `text-transform` CSS rule used.
+3. Attribute `title` does not contains text written in all capital letters.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: high
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+Not available

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

@@ -0,0 +1,111 @@
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+import { CapitalLettersWords } from './capital-letters-words';
+
+describe('Rules', () => {
+
+  describe('CapitalLettersWords', () => {
+
+    it('should indicate that class exists', () => {
+      expect(CapitalLettersWords).toBeDefined();
+    });
+
+    const selector: string = `*${[
+      ':root',
+      'head',
+      'style',
+      'script',
+      'meta',
+      'link',
+      'br',
+      'hr',
+      'object',
+      'path',
+      'g',
+      'filter',
+      'img',
+      'input',
+      'iframe',
+      'code',
+      ':empty'
+    ].map((i: string): string => {
+      return `:not(${i})`;
+    }).join('')}`;
+
+    let fakeDom;
+
+    new CapitalLettersWords().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 no report when text does not contains words in capital letters', () => {
+      fakeDom.innerHTML = '<p>Text contains no capital letters</p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom) as HTMLParagraphElement[];
+
+      new CapitalLettersWords().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+    it('should return 1 report when text contains words in capital letters transformed through CSS text-transform', () => {
+      fakeDom.innerHTML = '<p style="text-transform: uppercase;">capital letters</p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom) as HTMLParagraphElement[];
+
+      new CapitalLettersWords().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Element have a text <q>CAPITAL LETTERS</q> that contains words in upper case. <strong>Note</strong>: the text is transformed using <code>(text-transform: uppercase)</code>. Unless you are dealing with an acronym, there should not be any content in all caps. Some screen readers will announce the capital letters separately (like an acronym) or otherwise misleadingly emphasise the capital letters.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('p');
+    });
+
+    it('should return 1 report when text contains words in capital letters', () => {
+      fakeDom.innerHTML = '<p>Text contains CAPITAL LETTERS</p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom) as HTMLParagraphElement[];
+
+      new CapitalLettersWords().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Element have a text that contains words in upper case. Unless you are dealing with an acronym, there should not be any content in all caps. Some screen readers will announce the capital letters separately (like an acronym) or otherwise misleadingly emphasise the capital letters.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('p');
+    });
+
+    it('should return 1 report when element have an attribute title with text that contains words in capital letters', () => {
+      fakeDom.innerHTML = '<p title="CAPITAL LETTERS">Example text</p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom) as HTMLParagraphElement[];
+
+      new CapitalLettersWords().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('This element has a <code>title</code> attribute that contains words in upper case. Unless you are dealing with an acronym, there should not be any content in all caps. Some screen readers will announce the capital letters separately (like an acronym) or otherwise misleadingly emphasise the capital letters.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('p');
+    });
+
+    it('should return 1 report when element have an attribute title and content with text that contains words in capital letters', () => {
+      fakeDom.innerHTML = '<p title="CAPITAL LETTERS">Example text WITH CAPITAL LETTERS</p>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom) as HTMLParagraphElement[];
+
+      new CapitalLettersWords().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Element have a text and has a <code>title</code> attribute that contains words in upper case. Unless you are dealing with an acronym, there should not be any content in all caps. Some screen readers will announce the capital letters separately (like an acronym) or otherwise misleadingly emphasise the capital letters.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('p');
+    });
+
+  });
+});