@qualweb/wcag-techniques
Version:
Implementation of the WCAG 2.1 techniques
155 lines (154 loc) • 6.44 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.QW_WCAG_T17 = void 0;
const applicability_1 = require("@qualweb/util/applicability");
const evaluation_1 = require("@qualweb/core/evaluation");
const Technique_object_1 = require("../lib/Technique.object");
class QW_WCAG_T17 extends Technique_object_1.Technique {
execute(element) {
const test = new evaluation_1.Test();
const id = element.getElementAttribute('id');
if (!id)
return;
const type = element.getElementAttribute('type');
const insideLabel = this.isInsideLabelElement(element);
const isRadioOrCheckBox = type && (type === 'radio' || type === 'checkbox');
if (insideLabel) {
const hasCorrectText = isRadioOrCheckBox ? this.hasTextAfter(element) : this.hasTextBefore(element);
if (hasCorrectText) {
test.verdict = evaluation_1.Verdict.PASSED;
test.resultCode = 'P1';
}
else {
test.verdict = evaluation_1.Verdict.FAILED;
test.resultCode = 'F1';
}
test.addElement(element);
this.addTestResult(test);
}
else {
const label = window.qwPage.getElement(`label[for="${id.trim()}"]`);
if (label) {
const text = label.getElementText();
const visible = window.DomUtils.isElementVisible(label);
if (visible && text && text.trim() !== '') {
const isOnTop = this.isElementOnTop(element, label);
if (isRadioOrCheckBox || isOnTop) {
test.verdict = evaluation_1.Verdict.PASSED;
test.resultCode = 'P1';
}
else {
test.verdict = evaluation_1.Verdict.FAILED;
test.resultCode = 'F1';
}
}
else {
test.verdict = evaluation_1.Verdict.FAILED;
test.resultCode = 'F2';
}
}
}
test.addElement(element);
this.addTestResult(test);
}
isInsideLabelElement(element) {
let labelFound = false;
let parent = element.getElementParent();
while (parent !== null) {
if (parent.getElementTagName() === 'label') {
labelFound = true;
break;
}
parent = parent.getElementParent();
}
return labelFound;
}
isElementOnTop(a, b) {
const selectorElementsA = a.getElementSelector().split('>');
const selectorElementsB = b.getElementSelector().split('>');
const selectorElementsNA = selectorElementsA.length;
const selectorElementsNB = selectorElementsB.length;
let compareElementA, compareElementB;
if (selectorElementsNA > selectorElementsNB) {
compareElementA = selectorElementsA[selectorElementsNB - 1];
compareElementB = selectorElementsB[selectorElementsNB - 1];
}
else {
compareElementA = selectorElementsA[selectorElementsNA - 1];
compareElementB = selectorElementsB[selectorElementsNA - 1];
}
const compareNumberA = +compareElementA.replace(/[a-z]\d|\D/g, '');
const compareNumberB = +compareElementB.replace(/[a-z]\d|\D/g, '');
return compareNumberB - compareNumberA;
}
hasTextAfter(element) {
let hasText = false;
let parent = element;
while (parent !== null) {
if (parent.getElementTagName() === 'label') {
break;
}
const siblings = parent.getAllNextSiblings();
for (const sibling of siblings !== null && siblings !== void 0 ? siblings : []) {
if (typeof sibling === 'string') {
const text = sibling;
if (text.trim() !== '') {
hasText = true;
}
}
else {
const qwElement = sibling;
if (qwElement.getElementText().trim() !== '') {
hasText = true;
}
}
}
parent = parent.getElementParent();
}
return hasText;
}
hasTextBefore(element) {
let hasText = false;
let parent = element;
while (parent !== null) {
if (parent.getElementTagName() === 'label') {
break;
}
const siblings = parent.getAllPreviousSiblings();
for (const sibling of siblings !== null && siblings !== void 0 ? siblings : []) {
if (typeof sibling === 'string') {
const text = sibling;
if (text.trim() !== '') {
hasText = true;
}
}
else {
const qwElement = sibling;
if (qwElement.getElementText().trim() !== '') {
hasText = true;
}
}
}
parent = parent.getElementParent();
}
return hasText;
}
}
exports.QW_WCAG_T17 = QW_WCAG_T17;
__decorate([
applicability_1.ElementExists,
applicability_1.ElementIsVisible,
(0, applicability_1.ElementHasAttribute)('id'),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Function]),
__metadata("design:returntype", void 0)
], QW_WCAG_T17.prototype, "execute", null);