Skip to content

Commit

Permalink
fix the test cases and rules #1674
Browse files Browse the repository at this point in the history
  • Loading branch information
@shunguoy
shunguoy committed Nov 1, 2023
1 parent c29fff8 commit 4a3ed86
Show file tree
Hide file tree
Showing 4 changed files with 281 additions and 58 deletions.
21 changes: 4 additions & 17 deletions accessibility-checker-engine/src/v2/checker/accessibility/util/legacy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,12 +519,12 @@ export class RPTUtil {
// special case: <br> is styled 'inline' by default, but change the line
if (status.violation === null && walkNode.nodeName.toLowerCase() !== 'br') {
const cStyle = getComputedStyle(walkNode);
const cDisplay = cStyle.getPropertyValue("display"); console.log("target id=" + element.getAttribute("id") +", node id=" + walkNode.getAttribute("id")+", bounds=" + JSON.stringify(bounds));
const cDisplay = cStyle.getPropertyValue("display");
if (cDisplay === 'inline') {
last = false;
if (RPTUtil.isTarget(walkNode) && bounds.width < 24) {
// check if the horizontal spacing is sufficient
const bnds = mapper.getBounds(walkNode); console.log("target id=" + element.getAttribute("id") +", node id=" + walkNode.getAttribute("id")+", bounds=" + JSON.stringify(bounds)+", bnds=" + JSON.stringify(bnds));
const bnds = mapper.getBounds(walkNode);
if (Math.round(bounds.width/2) + bnds.left - (bounds.left + bounds.width) < 24)
status.violation = walkNode.nodeName.toLowerCase();
}
Expand Down Expand Up @@ -565,22 +565,9 @@ export class RPTUtil {
}

// one or more inline elements are in the same line with text
if (containText) {
if (containText)
status.text = true;

/**const bnds = mapper.getBounds(parent);
// the element is the last inline element in the line, check against parent bounds
if (last) {
if (Math.round(bounds.width/2) + bnds.left+bnds.width - (bounds.left + bounds.width) < 24)
status.violation = status.violation === null ? parent.nodeName.toLowerCase() : status.violation + ", " + parent.nodeName.toLowerCase();
}
// the element is the last inline element in the line, check against parent bounds
if (first && checked) {
if (Math.round(bounds.width/2) + bounds.left - bnds.left < 24)
status.violation = status.violation === null ? parent.nodeName.toLowerCase() : status.violation + ", " + parent.nodeName.toLowerCase();
}*/
}

return status;
} else {
//parent is inline element
Expand Down
1 change: 0 additions & 1 deletion accessibility-checker-engine/src/v2/dom/DOMMapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ export class DOMMapper extends CommonMapper {
getBounds(node: Node) : Bounds {
if (node.nodeType === 1 /*Node.ELEMENT_NODE*/) {
const bounds = (node as Element).getBoundingClientRect();

// adjusted for scroll if any
if (bounds) {
let scrollX = node && node.ownerDocument && node.ownerDocument.defaultView && node.ownerDocument.defaultView.scrollX || 0;
Expand Down
46 changes: 20 additions & 26 deletions accessibility-checker-engine/src/v4/rules/target_spacing_sufficient.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@
if (!VisUtil.isNodeVisible(ruleContext) || !RPTUtil.isTarget(ruleContext))
return null;

// ignore inline element: without text in the same line
const status = RPTUtil.getInlineStatus(ruleContext); console.log("node id=" + ruleContext.getAttribute("id") +", status=" + JSON.stringify(status));
// check inline element: without text in the same line
const status = RPTUtil.getInlineStatus(ruleContext);
if (status == null) return null;
if (status.inline) {
if (status.text) {
Expand All @@ -84,7 +84,7 @@
// case 1: inline element is too close horizontally
return RulePass("recommendation_inline", [nodeName, status.violation]);
}
} else { console.log("target id=" + ruleContext.getAttribute('id') +", defalt=" + RPTUtil.isTargetBrowserDefault(ruleContext));
} else {
// ignore browser default
if (RPTUtil.isTargetBrowserDefault(ruleContext))
return RulePass("pass_default");
Expand Down Expand Up @@ -117,7 +117,7 @@
let minX = 24;
let minY = 24;
let adjacentX = null;
let adjacentY = null; console.log("target id=" + ruleContext.getAttribute('id'));
let adjacentY = null;
let checked = []; //contains a list of elements that have been checked so their descendants don't need to be checked again
for (let i=0; i < elems.length; i++) {
const elem = elems[i] as HTMLElement;
Expand Down Expand Up @@ -145,15 +145,16 @@
z_index = "0";
}

console.log("target id=" + ruleContext.getAttribute('id') + ", elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
// case 2: the element overlaps the target entirely
// note when a link is inline with other target, if the link text wraps in another line in a given viewport,
// the bounds of the link may cover and the entire two lines, causing the other tagets to be overlapped, see two links in the test case: element_inline.html
if (bnds.top <= bounds.top && bnds.left <= bounds.left && bnds.top + bnds.height >= bounds.top + bounds.height
&& bnds.left + bnds.width >= bounds.left + bounds.width) { console.log("element covers target id=" + ruleContext.getAttribute('id') + ", elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
&& bnds.left + bnds.width >= bounds.left + bounds.width) {
// if the target on top
if (before ? parseInt(zindex) < parseInt(z_index): parseInt(zindex) <= parseInt(z_index)) { console.log("ignore due to element covers target id=" + ruleContext.getAttribute('id') + ", elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
if (before ? parseInt(zindex) < parseInt(z_index): parseInt(zindex) <= parseInt(z_index)) {
// the target is entirely covered: tabbable target handled by element_tabbable_unobscured and tabindex=-1 ignored
return null;
} else { console.log("further check size: element covers target id=" + ruleContext.getAttribute('id') + ", elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
} else {
if (bounds.height >= 24 && bounds.width >= 24)
return RulePass("pass_sized");
return RulePotential("potential_overlap", [nodeName, elem.nodeName.toLowerCase()]);
Expand All @@ -162,30 +163,26 @@

// case 3: if the target overlaps the element entirely
if (bounds.top <= bnds.top && bounds.left <= bnds.left && bounds.top + bounds.height >= bnds.top + bnds.height
&& bounds.left + bounds.width >= bnds.left + bnds.width) { console.log("element covered by target id=" + ruleContext.getAttribute('id') + ", elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
&& bounds.left + bounds.width >= bnds.left + bnds.width) {
// if the element on top
if (before ? parseInt(zindex) < parseInt(z_index): parseInt(zindex) <= parseInt(z_index)) {console.log("element on top id=" + ruleContext.getAttribute('id') + ", elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
if (before ? parseInt(zindex) < parseInt(z_index): parseInt(zindex) <= parseInt(z_index)) {
return RulePotential("potential_overlap", [nodeName, elem.nodeName.toLowerCase()]);
} else { // the target on top
if (bnds.height >= 24 && bnds.width >= 24)
if (bounds.height >= 24 && bounds.width >= 24)
return RulePass("pass_sized");
return RuleFail("violation_spacing", [nodeName, elem.nodeName.toLowerCase()]);
}
}

// case 4: the element overlaps partially with the target
//if (((bounds.top >= bnds.top && bounds.top <= bnds.top + bnds.height) || (bounds.top <= bnds.top && bounds.top + bounds.height > bnds.top))
// && ((bounds.left >= bnds.left && bounds.left <= bnds.left + bnds.width) || (bounds.left <= bnds.left && bounds.left + bounds.width > bnds.left))) { console.log("target id=" + ruleContext.getAttribute('id') + ", overlap elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
if ((((bounds.top >= bnds.top && bounds.top <= bnds.top + bnds.height) || (bounds.top + bounds.height <= bnds.top && bounds.top + bounds.height >= bnds.top +bnds.height))
&& ((bounds.left > bnds.left && bounds.left < bnds.left + bnds.width) || (bnds.left > bounds.left && bnds.left < bounds.left + bounds.width)))
|| (((bounds.top > bnds.top && bounds.top < bnds.top + bnds.height) || (bnds.top > bounds.top && bnds.top < bounds.top + bounds.height))
&& ((bounds.left >= bnds.left && bounds.left <= bnds.left + bnds.width) || (bounds.left + bounds.width >= bnds.left && bounds.left + bounds.width <= bnds.left + bnds.width)))) {
console.log("target id=" + ruleContext.getAttribute('id') + ", overlap elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
// TODO: more check to turn to violation
return RulePotential("potential_overlap", [nodeName, elem.nodeName.toLowerCase()]);
|| (((bounds.top > bnds.top && bounds.top < bnds.top + bnds.height) || (bnds.top > bounds.top && bnds.top < bounds.top + bounds.height))
&& ((bounds.left >= bnds.left && bounds.left <= bnds.left + bnds.width) || (bounds.left + bounds.width >= bnds.left && bounds.left + bounds.width <= bnds.left + bnds.width)))) {
// TODO: more check to turn to violation
return RulePotential("potential_overlap", [nodeName, elem.nodeName.toLowerCase()]);

} else { // no overlap with the elem, though may overlap withe other elements
console.log("target id=" + ruleContext.getAttribute('id') + ", not overlap elem id=" + elem.getAttribute('id') +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
let disX = 24;
let disY = 24;
// the element is in the horizontally same row with the target
Expand All @@ -203,13 +200,13 @@
if (disY < minY) {
minY = disY;
adjacentY = elem;
} console.log("target id=" + ruleContext.getAttribute('id') + ", not overlap elem id=" + elem.getAttribute('id') +", minX=" + minX +", minY=" + minY +",bounds=" +JSON.stringify(bounds) +", bnds=" + JSON.stringify(bnds));
}
}
checked.push(elem);
}
console.log("target id=" + ruleContext.getAttribute('id') +", minX=" + minX +", minY=" + minY);

// case 5: no verlap + sufficient target size
if (bounds.height >= 24 && bounds.width >= 24) {console.log("passed_size target id=" + ruleContext.getAttribute('id'));
if (bounds.height >= 24 && bounds.width >= 24) {
return RulePass("pass_sized");
}
// case 6: no overlap + insufficient target size. check spacing
Expand All @@ -218,10 +215,7 @@
return RuleFail("violation_spacing", [nodeName, adjacentX.nodeName.toLowerCase()]);
return RuleFail("violation_spacing", [nodeName, adjacentY.nodeName.toLowerCase()]);
} else
return RulePass("pass_spacing");

// ignore all other cases
return null;
return RulePass("pass_spacing");
}
}

Loading

0 comments on commit 4a3ed86

Please sign in to comment.