testaro 18.1.0 → 18.2.0

package/aslint/app/rules/aslint/empty-title-attribute/empty-title-attribute.test.ts

@@ -0,0 +1,80 @@
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+import { EmptyTitleAttribute } from './empty-title-attribute';
+
+describe('Rules', () => {
+
+  describe('EmptyTitleAttribute', () => {
+
+    const selector: string = `[title]${[
+      ':not(img)',
+      ':not(html)',
+      ':not(head)',
+      ':not(title)',
+      ':not(body)',
+      ':not(link)',
+      ':not(meta)',
+      ':not(title)',
+      ':not(style)',
+      ':not(script)',
+      ':not(noscript)',
+      ':not(iframe)',
+      ':not(br)',
+      ':not(hr)'
+    ].join('')}`;
+
+    let fakeDom;
+
+    new EmptyTitleAttribute().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 defined an attribute title with an empty value', () => {
+      fakeDom.innerHTML = '<div title="">test</div>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new EmptyTitleAttribute().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('You have an attribute <code>title</code> with an empty content.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+      expect(Validator.getReport('report_0').ruleId).toBe('empty-title-attribute');
+    });
+
+    it('should return one report when there is an element with defined an attribute title with an empty value (only spaces)', () => {
+      fakeDom.innerHTML = '<div title="    ">test</div>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new EmptyTitleAttribute().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('You have an attribute <code>title</code> with an empty content.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('div');
+      expect(Validator.getReport('report_0').ruleId).toBe('empty-title-attribute');
+    });
+
+    it('should return no reports when there is an element with attribute title and non-empty value', () => {
+      fakeDom.innerHTML = '<div title="some title">test</div>';
+
+      const nodes = DomUtility.querySelectorAllExclude(selector, fakeDom);
+
+      new EmptyTitleAttribute().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+});

package/aslint/app/rules/aslint/empty-title-attribute/empty-title-attribute.ts

@@ -0,0 +1,58 @@
+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 EmptyTitleAttribute extends AbstractRule {
+  protected selector: string = `[title]${[
+    ':not(img)',
+    ':not(html)',
+    ':not(head)',
+    ':not(title)',
+    ':not(body)',
+    ':not(link)',
+    ':not(meta)',
+    ':not(title)',
+    ':not(style)',
+    ':not(script)',
+    ':not(noscript)',
+    ':not(iframe)',
+    ':not(br)',
+    ':not(hr)'
+  ].join('')}`;
+
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.empty_title_attribute),
+    links: [
+      {
+        content: 'H67: Using null alt text and no title attribute on img elements for images that AT should ignore',
+        url: 'https://www.w3.org/TR/WCAG20-TECHS/H67.html'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.low,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    const reportEmptyTitle = (element: Element): void => {
+      const titleAttribute: string | null = element.getAttribute('title');
+
+      if (titleAttribute === null || titleAttribute.trim().length > 0) {
+        return;
+      }
+
+      const report: IIssueReport = {
+        message: TranslateService.instant('empty_title_attribute_report_message'),
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(report);
+    };
+
+    elements.forEach(reportEmptyTitle);
+  }
+}

package/aslint/app/rules/aslint/flash-content/flash-content.documentation.md

@@ -0,0 +1,48 @@
+# flash-content
+
+## Rule id
+
+`flash-content`
+
+## Definition
+
+This rule verifies if there are Adobe Flash Player components.
+
+## Purpose
+
+> Since Adobe no longer supports Flash Player after December 31, 2020 and blocked Flash content from running in Flash Player beginning January 12, 2021, Adobe strongly recommends all users immediately uninstall Flash Player to help protect their systems.
+
+Source: https://www.adobe.com/products/flashplayer/end-of-life.html
+
+Due to above security reasons and poor an accessibility support Adobe Flash player should be removed.
+
+Following elements are being considered as Adobe Flash Player while evaluating this rule:
+
+CSS selector:
+
+    [classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"], embed[type="application/x-shockwave-flash"], object[type="application/x-shockwave-flash"]
+
+## Test cases
+
+### Passed
+
+The rule passes when there are no elements that refers to Adobe Flash Player.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: low
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* https://www.adobe.com/products/flashplayer/end-of-life.html

package/aslint/app/rules/aslint/flash-content/flash-content.test.ts

@@ -0,0 +1,52 @@
+import { FlashContent } from './flash-content';
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+
+describe('Rules', () => {
+
+  describe('#flash-content', () => {
+
+    let fakeDom;
+
+    new FlashContent().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 for one flash object', () => {
+      const objectEl = document.createElement('object');
+
+      objectEl.setAttribute('classid', 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000');
+      objectEl.setAttribute('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0');
+      fakeDom.appendChild(objectEl);
+
+      const nodes = DomUtility.querySelectorAllExclude('[classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"]', fakeDom);
+
+      new FlashContent().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+    });
+
+    it('should return no reports where there are no flash objects', () => {
+      fakeDom.innerHTML = '<a href="#">test</a>';
+
+      const nodes = DomUtility.querySelectorAllExclude('[classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"]', fakeDom);
+
+      new FlashContent().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+
+});

package/aslint/app/rules/aslint/flash-content/flash-content.ts

@@ -0,0 +1,32 @@
+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 FlashContent extends AbstractRule {
+  protected selector: string = '[classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"], embed[type="application/x-shockwave-flash"], object[type="application/x-shockwave-flash"]';
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.flash_content),
+    links: [],
+    recommendations: [],
+    severity: $severity.critical,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    const reportFlash = (element: Element): void => {
+      const problem: IIssueReport = {
+        message: TranslateService.instant('flash_content_report_message'),
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(problem);
+    };
+
+    elements.forEach(reportFlash);
+  }
+}

package/aslint/app/rules/aslint/font-style-italic/font-style-italic.documentation.md

@@ -0,0 +1,44 @@
+# font-style-italic
+
+## Rule id
+
+`font-style-italic`
+
+## Definition
+
+This rule verifies if there is defined `font-style` type `italic` for a text with length > 80 chars.
+
+## Purpose
+
+[WCAG Understanding Guideline 3.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html) includes an advisory technique for "avoiding chunks of italic text". Similarly [WebAIM advises](https://webaim.org/articles/evaluatingcognitive/#readability) as follows: "Do not use italics or bold on long sections of text", but at the same time "use various stylistic elements (italics, bold, color, brief animation, or differently-styled content) to highlight important content".
+
+This rule checks 2 cases:
+
+* Determine reasonable text length - must be < 80 chars.
+* Determine if element has defined `font-style` type `italic`.
+
+## Test cases
+
+### Passed
+
+The rule passes when specified element contains text with length > 80 chars and have no defined style `font-style` type `italic`.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: low
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html
+* https://webaim.org/articles/evaluatingcognitive/#readability

package/aslint/app/rules/aslint/font-style-italic/font-style-italic.test.ts

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

package/aslint/app/rules/aslint/font-style-italic/font-style-italic.ts

@@ -0,0 +1,83 @@
+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 { $accessibilityAuditRules, $severity } from '../../../constants/accessibility';
+import { AbstractRule, IAbstractRuleConfig } from '../../abstract-rule';
+
+export class FontStyleItalic 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.font_style_italic),
+    links: [
+      {
+        content: 'Avoiding chunks of italic text',
+        url: 'https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.info,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: HTMLElement[]): void {
+    const reportNode = (element: HTMLElement): void => {
+      let isItalic: boolean = false;
+      const textContent: string = DomUtility.getTextFromDescendantContent(element).trim();
+      const textContentLength: number = textContent.length;
+      const REASONABLE_LONG_TEXT: number = 80;
+
+      // Note: element.style may not exists, e.g. for an element in a different namespace
+      if (Css.getStyle(element, 'font-style') === 'italic' || typeof element.style === 'object' && element.style.fontStyle === 'italic') {
+        isItalic = true;
+      }
+
+      if (isItalic === false || textContentLength < REASONABLE_LONG_TEXT) {
+        return;
+      }
+
+      const report: IIssueReport = {
+        message: TranslateService.instant('font_style_italic_report_message', [textContentLength]),
+        node: element,
+        ruleId: this.ruleConfig.id
+      };
+
+      this.validator.report(report);
+    };
+
+    elements.forEach(reportNode);
+  }
+}

package/aslint/app/rules/aslint/h1-must-be/h1-must-be.documentation.md

@@ -0,0 +1,46 @@
+# h1-must-be
+
+## Rule id
+
+`h1-must-be`
+
+## Definition
+
+This rule verifies if there is defined heading `h1` on the page.
+
+## Purpose
+
+Most content on web pages should be organized into sections. When pages are organized into sections, a heading should be present.
+
+All pages should at least have a `<h1>` level heading giving the title of the page.
+
+This rule checks 1 case:
+
+* Determine if there is at least 1 element `<h1>`.
+
+**Note**: the rule does not check if the content of `<h1>` is empty.
+
+## Test cases
+
+### Passed
+
+The rule passes when there is at least 1 `<h1>` element.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: critical
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* https://www.w3.org/WAI/tutorials/page-structure/headings/

package/aslint/app/rules/aslint/h1-must-be/h1-must-be.test.ts

@@ -0,0 +1,46 @@
+import { H1MustBe } from './h1-must-be';
+import { Validator } from '../../../validator';
+import { DomUtility } from '../../../utils/dom';
+
+describe('Rules', () => {
+
+  describe('H1MustBe', () => {
+
+    let fakeDom;
+
+    new H1MustBe().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 no elements with h1', () => {
+      fakeDom.innerHTML = '<div><h2>h1</h2></div>';
+
+      new H1MustBe().run(fakeDom);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('Expected at least one heading <code>h1</code> element, but found none.');
+      expect(Validator.getReport('report_0').node).toBe(null);
+      expect(Validator.getReport('report_0').ruleId).toBe('h1-must-be');
+    });
+
+    it('should return no reports when there is element with h1', () => {
+      fakeDom.innerHTML = '<div><h1>h1</h1></div>';
+
+      new H1MustBe().run(fakeDom);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+});

package/aslint/app/rules/aslint/h1-must-be/h1-must-be.ts

@@ -0,0 +1,36 @@
+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 H1MustBe extends AbstractRule {
+  protected selector: string = 'h1';
+  protected ruleConfig: IAbstractRuleConfig = {
+    id: TextUtility.convertUnderscoresToDashes($accessibilityAuditRules.h1_must_be),
+    links: [
+      {
+        content: 'Web Accessibility Tutorials: Headings',
+        url: 'https://www.w3.org/WAI/tutorials/page-structure/headings/'
+      }
+    ],
+    recommendations: [],
+    severity: $severity.critical,
+    type: CATEGORY_TYPE.BEST_PRACTICE
+  };
+
+  public validate(elements: Element[]): void {
+    if (elements.length > 0) {
+      return;
+    }
+
+    const report: IIssueReport = {
+      message: TranslateService.instant('h1_must_report_message'),
+      node: null,
+      ruleId: this.ruleConfig.id
+    };
+
+    this.validator.report(report);
+  }
+}

package/aslint/app/rules/aslint/headings-sibling-unique/headings-sibling-unique.documentation.md

@@ -0,0 +1,57 @@
+# headings-sibling-unique
+
+## Rule id
+
+`headings-sibling-unique`
+
+## Definition
+
+This rule verifies if the accessible names of sibling heading elements of the same level are unique.
+
+## Purpose
+
+If section headings that share the same parent heading are not unique, users of assistive technologies will not be able to discern the differences among sibling sections of the web page.
+
+This rule checks 1 case:
+
+* Sibling headings accessible names must be unique.
+
+### Example
+
+#### Incorrect
+
+    <h2>Example</h2>
+    <h2>Example</h2>
+
+#### Correct
+
+    <h2>Example 1</h2>
+    <h2>Example 2</h2>
+
+
+## Test cases
+
+### Passed
+
+The rule passes when sibiling headings are having unique accessible name.
+
+## WCAG Success Criteria
+
+Not Applicable
+
+## Best Practice
+
+Yes
+
+## User Impact
+
+* **Severity**: critical
+* **Disabilities Affected**:
+  * Visual:
+    * blindness
+
+## Resources
+
+* http://www.w3.org/TR/WCAG20/#navigation-mechanisms-descriptive
+* http://www.w3.org/TR/WCAG20-TECHS/G130
+* https://www.w3.org/TR/WCAG20-TECHS/G141.html

package/aslint/app/rules/aslint/headings-sibling-unique/headings-sibling-unique.test.ts

@@ -0,0 +1,52 @@
+import { DomUtility } from '../../../utils/dom';
+import { Validator } from '../../../validator';
+import { HeadingsSiblingUnique } from './headings-sibling-unique';
+
+describe('Rules', () => {
+
+  describe('HeadingsSiblingUnique', () => {
+
+    it('should indicate that class exists', () => {
+      expect(HeadingsSiblingUnique).toBeDefined();
+    });
+
+    let fakeDom;
+
+    new HeadingsSiblingUnique().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 1 report when there are non-unique siblings headings', () => {
+      fakeDom.innerHTML = '<h1>Test</h1><h1>Test</h1>';
+      const nodes = DomUtility.querySelectorAllExclude('h1', fakeDom) as HTMLHeadingElement[];
+
+      new HeadingsSiblingUnique().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(1);
+      expect(Validator.getReport('report_0').message).toBe('The accessible names of sibling heading elements of the same level are not unique. If section headings that share the same parent heading are not unique, users of assistive technologies will not be able to discern the differences among sibling sections of the web page. Same level <code>h1</code> and same description: <q>Test</q>.');
+      expect(Validator.getReport('report_0').node.nodeName.toLowerCase()).toBe('h1');
+      expect(Validator.getReport('report_0').ruleId).toBe('headings-sibling-unique');
+    });
+
+    it('should return no reports when two headings description are different', () => {
+      fakeDom.innerHTML = '<h1>Test</h1><h1>Test 2</h1>';
+      const nodes = DomUtility.querySelectorAllExclude('h1', fakeDom) as HTMLHeadingElement[];
+
+      new HeadingsSiblingUnique().validate(nodes);
+
+      expect(Object.keys(Validator.getReports()).length).toBe(0);
+    });
+
+  });
+});