testaro 18.1.1 → 18.2.0

package/aslint/app/rules/aslint/label-duplicated-content-title/label-duplicated-content-title.test.ts

@@ -0,0 +1,48 @@
+import { LabelDuplicatedContentTitle } from './label-duplicated-content-title';
+import { Validator } from '../../../validator';
+import { DomUtility } from '../../../utils/dom';
+
+describe('Rules', () => {
+
+  describe('LabelDuplicatedContentTitle', () => {
+
+    let fakeDom;
+
+    new LabelDuplicatedContentTitle().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 correct data for a element without href attribute', () => {
+      fakeDom.innerHTML = '<label title="main">main</label>';
+      const nodes = DomUtility.querySelectorAllExclude('[title=main]', fakeDom) as HTMLElement[];
+
+      new LabelDuplicatedContentTitle().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('This element has the same content as its <code>title</code> attribute. Consider removing <code>title</code> as some screen readers read both.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('label');
+      expect(Validator.getReport('report_0').ruleId).toBe('label-duplicated-content-title');
+    });
+
+    it('should return no reports in case of a element with href attribute', () => {
+      fakeDom.innerHTML = '<label title="main">main1</label>';
+      const nodes = DomUtility.querySelectorAllExclude('[title=main]', fakeDom) as HTMLElement[];
+
+      new LabelDuplicatedContentTitle().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+});

package/aslint/app/rules/aslint/label-duplicated-content-title/label-duplicated-content-title.ts

@@ -0,0 +1,37 @@
+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 LabelDuplicatedContentTitle extends AbstractRule {
+  protected selector: string = 'label[title]';
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.label_duplicated_content_title),
+    links: [],
+    recommendations: [],
+    severity: $severity.high,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: HTMLElement[]): void {
+    const checkLabel = (element: HTMLElement): void => {
+      const labelContent: string = DomUtility.getText(element, true);
+      const labelTitle: string = element.title;
+
+      if (labelContent === labelTitle) {
+        const report: IIssueReport = {
+          message: TranslateService.instant('label_duplicated_content_title_report_message'),
+          node: element,
+          ruleId: this.ruleConfig.id
+        };
+
+        this.validator.report(report);
+      }
+    };
+
+    elements.forEach(checkLabel);
+  }
+}

package/aslint/app/rules/aslint/links-language-destination/links-language-destination.test.ts

@@ -0,0 +1,50 @@
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+import { LinksLanguageDestination } from './links-language-destination';
+
+describe('Rules', () => {
+
+  describe('LinksLanguageDestination', () => {
+
+    it('should indicate that class exists', () => {
+      expect(LinksLanguageDestination).toBeDefined();
+    });
+
+    let fakeDom;
+
+    new LinksLanguageDestination().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 reports when there is an anchor element with url pointed within page base uri', () => {
+      fakeDom.innerHTML = '<a href="http://localhost/example">example</a>';
+
+      new LinksLanguageDestination().validate(Array.from(document.links));
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+    it('should return 1 report when there is an anchor element with url pointed outside of base uri', () => {
+      fakeDom.innerHTML = '<a href="http://example.com/example">example</a>';
+
+      new LinksLanguageDestination().validate(Array.from(document.links));
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Following url <code>http:&#x2F;&#x2F;example.com&#x2F;example</code> points to an external resource. If the content behind the link is in a different language then consider add some text or graphic to the link indicating that the target document is in another language.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('a');
+      expect(Validator.getReport('report_0').ruleId).toBe('links-language-destination');
+    });
+
+  });
+});

package/aslint/app/rules/aslint/links-language-destination/links-language-destination.ts

@@ -0,0 +1,70 @@
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TextUtility } from '../../../utils/text';
+import { TranslateService } from '../../../services/translate';
+import { $severity } from '../../../constants/accessibility';
+import { $accessibilityAuditRules } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class LinksLanguageDestination extends AbstractRule {
+  protected selector: () => (HTMLAnchorElement | HTMLAreaElement)[] = (): (HTMLAnchorElement | HTMLAreaElement)[] => {
+    return Array.from(document.links);
+  };
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.links_language_destination),
+    links: [
+      {
+        content: 'Indicating the language of a link destination',
+        url: 'https://www.w3.org/International/questions/qa-link-lang'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.info,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(links: (HTMLAnchorElement | HTMLAreaElement)[]): void {
+    let baseURI: string;
+
+    if (typeof document.baseURI === 'string') {
+      baseURI = document.baseURI;
+    } else {
+      baseURI = document.URL || document.location.href;
+    }
+
+    const onlyIncludeExternalLinks = (link: HTMLAnchorElement | HTMLAreaElement): boolean => {
+      if (link.hostname.length > 0 && link.href.length > 0) {
+        let baseHostname: string;
+
+        try {
+          const url: URL = new URL(link.href, baseURI);
+
+          baseHostname = url.hostname;
+        } catch (_) {
+          baseHostname = document.location.hostname;
+        }
+
+        return baseHostname !== window.location.hostname;
+      }
+
+      return false;
+    };
+
+    const externalLinks: (HTMLAnchorElement | HTMLAreaElement)[] = links.filter(onlyIncludeExternalLinks);
+
+    const reportIssue = (anchorElement: (HTMLAnchorElement | HTMLAreaElement)): void => {
+      const reportMessage: string = TranslateService.instant('links_language_destination_report_message', [TextUtility.escape(anchorElement.href)]);
+
+      const report: IIssueReport = {
+        message: reportMessage,
+        node: anchorElement,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(report);
+    };
+
+    externalLinks.forEach(reportIssue);
+  }
+}

package/aslint/app/rules/aslint/main-element-only-one/main-element-only-one.test.ts

@@ -0,0 +1,55 @@
+import { MainElementOnlyOne } from './main-element-only-one';
+import { Validator } from '../../../validator';
+import { DomUtility } from '../../../utils/dom';
+
+describe('Rules', () => {
+
+  describe('MainElementOnlyOne', () => {
+
+    it('should indicate that class exists', () => {
+      expect(MainElementOnlyOne).toBeDefined();
+    });
+
+    let fakeDom;
+
+    new MainElementOnlyOne().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 more than 1 main element', () => {
+      fakeDom.innerHTML = '<main>Text1</main><main>Text2</main>';
+      const nodes = DomUtility.querySelectorAllExclude('main', fakeDom) as HTMLElement[];
+
+      new MainElementOnlyOne().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(2);
+      expect(Validator.getReport('report_0').message).toBe('You have defined multiple (2) <code>&lt;main&gt;</code> elements. Assistive technology users expect one main content block and may miss subsequent <code>&lt;main&gt;</code> blocks.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('main');
+      expect(Validator.getReport('report_0').ruleId).toBe('main-element-only-one');
+      expect(Validator.getReport('report_1').message).toBe('You have defined multiple (2) <code>&lt;main&gt;</code> elements. Assistive technology users expect one main content block and may miss subsequent <code>&lt;main&gt;</code> blocks.');
+      expect(Validator.getReport('report_1').node.nodeName.toLowerCase()).toBe('main');
+      expect(Validator.getReport('report_1').ruleId).toBe('main-element-only-one');
+    });
+
+    it('should return no reports when there is 1 main element', () => {
+      fakeDom.innerHTML = '<main>Text1</main>';
+      const nodes = DomUtility.querySelectorAllExclude('main', fakeDom) as HTMLElement[];
+
+      new MainElementOnlyOne().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+});

package/aslint/app/rules/aslint/main-element-only-one/main-element-only-one.ts

@@ -0,0 +1,83 @@
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TextUtility } from '../../../utils/text';
+import { TranslateService } from '../../../services/translate';
+import { $auditRuleNodeSkipReason, $severity } from '../../../constants/accessibility';
+import { $accessibilityAuditRules } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+import { DomUtility } from '../../../utils/dom';
+import { Config } from '../../../config';
+import { $runnerSettings } from '../../../constants/aslint';
+import { Css } from '../../../utils/css';
+
+export class MainElementOnlyOne extends AbstractRule {
+  private appConfig: Config = Config.getInstance();
+
+  protected selector: string = 'main';
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.main_element_only_one),
+    links: [
+      {
+        content: 'HTML/Elements/main',
+        url: 'https://www.w3.org/wiki/HTML/Elements/main#Point'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.high,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  private elementShouldBeSkipped(element: HTMLElement): boolean {
+    const styles: CSSStyleDeclaration | null = Css.getComputedStyle(element);
+    const ariaHidden: Attr | null = DomUtility.getElementAttribute(element, 'aria-hidden');
+    let elementShouldBeSkipped: boolean = true;
+
+    if (ariaHidden && ariaHidden.value === 'true') {
+      return elementShouldBeSkipped;
+    }
+
+    if (this.appConfig.get($runnerSettings.includeHidden)) {
+      elementShouldBeSkipped = false;
+
+      return elementShouldBeSkipped;
+    }
+
+    if (DomUtility.hasElementSemiOpacity(element, styles)) {
+      return elementShouldBeSkipped;
+    }
+
+    return false;
+  }
+
+  public validate(elements: HTMLElement[]): void {
+    if (elements.length < 2) {
+      return;
+    }
+
+    const checkForIssue = (element: HTMLElement): void => {
+      if (this.elementShouldBeSkipped(element)) {
+        this.validator.report({
+          message: '',
+          node: element,
+          ruleId: this.ruleConfig.id,
+          skipReason: $auditRuleNodeSkipReason.excludedFromScanning
+        });
+
+        return;
+      }
+
+      const reportMessage: string = TranslateService.instant('main_element_only_one_report_message', [elements.length, TextUtility.escape('main')]);
+
+      const report: IIssueReport = {
+        message: reportMessage,
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(report);
+    };
+
+    elements.forEach(checkForIssue);
+  }
+}

package/aslint/app/rules/aslint/main-landmark-must-be-top-level/main-landmark-must-be-top-level.test.ts

@@ -0,0 +1,12 @@
+import { MainLandmarkMustBeTopLevel } from './main-landmark-must-be-top-level';
+
+describe('Rules', () => {
+
+  describe('MainLandmarkMustBeTopLevel', () => {
+
+    it('should indicate that class exists', () => {
+      expect(MainLandmarkMustBeTopLevel).toBeDefined();
+    });
+
+  });
+});

package/aslint/app/rules/aslint/main-landmark-must-be-top-level/main-landmark-must-be-top-level.ts

@@ -0,0 +1,73 @@
+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 { $severity } from '../../../constants/accessibility';
+import { $accessibilityAuditRules } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class MainLandmarkMustBeTopLevel extends AbstractRule {
+  protected selector: string = '[role="main"]';
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.main_landmark_must_be_top_level),
+    links: [
+      {
+        content: 'Accessible Rich Internet Applications (WAI-ARIA) 1.0 Specification: main role',
+        url: 'http://www.w3.org/TR/wai-aria/roles#main'
+      },
+      {
+        content: 'ARIA11: Using ARIA landmarks to identify regions of a page',
+        url: 'http://www.w3.org/TR/WCAG20-TECHS/ARIA11'
+      },
+      {
+        content: 'HTML5: The MAIN element',
+        url: 'http://www.w3.org/TR/html5/sections.html#the-main-element'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.high,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    let parent: HTMLElement | null;
+    let parentNodeWithRole: Element | null = null;
+    let role: string | null;
+    const PARENT_ROLE_EXCEPTION: string[] = [
+      'application',
+      'document'
+    ];
+
+    if (elements.length === 0 || elements[0].parentElement === null) {
+      return;
+    }
+
+    parent = elements[0].parentElement;
+
+    while (parent && parent.getAttribute) {
+      role = parent.getAttribute('role');
+
+      if (typeof role === 'string' && PARENT_ROLE_EXCEPTION.indexOf(role) === -1) {
+        parentNodeWithRole = parent;
+        break;
+      }
+
+      parent = parent.parentElement;
+    }
+
+    if (parentNodeWithRole === null) {
+      return;
+    }
+
+    const reportMessage: string = TranslateService.instant('main_landmark_must_be_top_level_report_message', [DomUtility.getEscapedOuterHTML(parentNodeWithRole)]);
+
+    const report: IIssueReport = {
+      message: reportMessage,
+      node: parentNodeWithRole,
+      ruleId: this.ruleConfig.id
+    };
+
+    this.validator.report(report);
+  }
+}

package/aslint/app/rules/aslint/minimum-font-size/minimum-font-size.test.ts

@@ -0,0 +1,12 @@
+import { MinimumFontSize } from './minimum-font-size';
+
+describe('Rules', () => {
+
+  describe('MinimumFontSize', () => {
+
+    it('should indicate that class exists', () => {
+      expect(MinimumFontSize).toBeDefined();
+    });
+
+  });
+});

package/aslint/app/rules/aslint/minimum-font-size/minimum-font-size.ts

@@ -0,0 +1,87 @@
+import { DomUtility } from '../../../utils/dom';
+import { Css } from '../../../utils/css';
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TextUtility } from '../../../utils/text';
+import { TranslateService } from '../../../services/translate';
+import { $severity } from '../../../constants/accessibility';
+import { $accessibilityAuditRules } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class MinimumFontSize extends AbstractRule {
+  protected selector: string = `*${[
+    ':root',
+    'head',
+    'title',
+    'style',
+    'script',
+    'noscript',
+    'meta',
+    'link',
+    'br',
+    'hr',
+    'object',
+    'path',
+    'g',
+    'desc',
+    'filter',
+    'img',
+    'input',
+    'iframe',
+    'code',
+    'defs',
+    ':empty'
+  ].map((i: string): string => {
+    return `:not(${i})`;
+  }).join('')}`;
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.minimum_font_size),
+    links: [],
+    recommendations: [],
+    severity: $severity.info,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: HTMLElement[]): void {
+    const checkFontSize = (element: HTMLElement): void => {
+      if (DomUtility.hasDirectTextDescendant(element) === false) {
+        return;
+      }
+
+      const fontSizeStyle: string | null = Css.getStyle(element, 'font-size');
+
+      if (fontSizeStyle === null) {
+        return;
+      }
+
+      const fontSize: number = parseInt(fontSizeStyle, 10);
+
+      if (fontSize < 10) {
+        let report: IIssueReport;
+
+        if (DomUtility.isElementVisible(element) === false) {
+          const reportMessage: string = TranslateService.instant('minimum_font_size_report_message_1', [fontSize]);
+
+          report = {
+            message: reportMessage,
+            node: element,
+            ruleId: this.ruleConfig.id
+          };
+        } else {
+          const reportMessage: string = TranslateService.instant('minimum_font_size_report_message_2', [fontSize]);
+
+          report = {
+            message: reportMessage,
+            node: element,
+            ruleId: this.ruleConfig.id
+          };
+        }
+
+        this.validator.report(report);
+      }
+    };
+
+    elements.forEach(checkFontSize);
+  }
+}

package/aslint/app/rules/aslint/missing-href-on-a/missing-href-on-a.test.ts

@@ -0,0 +1,48 @@
+import { MissingHrefOnA } from './missing-href-on-a';
+import { Validator } from '../../../validator';
+import { DomUtility } from '../../../utils/dom';
+
+describe('Rules', () => {
+
+  describe('MissingHrefOnA', () => {
+
+    let fakeDom;
+
+    new MissingHrefOnA().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 correct data for a element without href attribute', () => {
+      fakeDom.innerHTML = '<a>example.com</a>';
+      const nodes = DomUtility.querySelectorAllExclude('a:not([href])', fakeDom) as HTMLAnchorElement[];
+
+      new MissingHrefOnA().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Missing attribute <code>href</code> on link. The user cannot navigate to this element using the keyboard. A better option here is to use a <code>&lt;a&gt;</code> element instead.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('a');
+      expect(Validator.getReport('report_0').ruleId).toBe('missing-href-on-a');
+    });
+
+    it('should return no reports in case of a element with href attribute', () => {
+      fakeDom.innerHTML = '<a href="http://example.com">example.com</a>';
+      const nodes = DomUtility.querySelectorAllExclude('a:not([href])', fakeDom) as HTMLAnchorElement[];
+
+      new MissingHrefOnA().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+});

package/aslint/app/rules/aslint/missing-href-on-a/missing-href-on-a.ts

@@ -0,0 +1,40 @@
+import { CATEGORY_TYPE } from '../../../constants/categoryType';
+import { IIssueReport } from '../../../interfaces/rule-issue.interface';
+import { TextUtility } from '../../../utils/text';
+import { TranslateService } from '../../../services/translate';
+import { $severity } from '../../../constants/accessibility';
+import { $accessibilityAuditRules } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class MissingHrefOnA extends AbstractRule {
+  protected selector: string = 'a:not([href])';
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.missing_href_on_a),
+    links: [
+      {
+        content: 'F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links',
+        url: 'https://www.w3.org/TR/WCAG20-TECHS/F42.html'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.critical,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(anchorElements: HTMLAnchorElement[]): void {
+    const reportNodeWithoutHref = (anchorElement: HTMLAnchorElement): void => {
+      const reportMessage: string = TranslateService.instant('missing_href_on_a_report_message', [TextUtility.escape('<a>')]);
+
+      const report: IIssueReport = {
+        message: reportMessage,
+        node: anchorElement,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(report);
+    };
+
+    anchorElements.forEach(reportNodeWithoutHref);
+  }
+}

package/aslint/app/rules/aslint/misused-aria-on-focusable-element/misused-aria-on-focusable-element.test.ts

@@ -0,0 +1,12 @@
+import { MisusedAriaOnFocusableElement } from './misused-aria-on-focusable-element';
+
+describe('Rules', () => {
+
+  describe('MisusedAriaOnFocusableElement', () => {
+
+    it('should indicate that class exists', () => {
+      expect(MisusedAriaOnFocusableElement).toBeDefined();
+    });
+
+  });
+});