Skip to content

Commit

Permalink
Merge pull request #1894 from IBMa/drjoho-overlaybug-1854-NEW
Browse files Browse the repository at this point in the history 
fix(extension): Info overlay for web page doesn't inspect the element underneath
  • Loading branch information
@ErickRenteria
ErickRenteria committed May 8, 2024
2 parents 0c35289 + 6139bb5 commit e1ca4a7
Show file tree
Hide file tree
Showing 8 changed files with 338 additions and 281 deletions.
15 changes: 13 additions & 2 deletions accessibility-checker-extension/src/ts/contentScripts/DomPathUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@
import { IIssue } from "../interfaces/interfaces";

export default class DomPathUtils {
public static getScreenRect(node: HTMLElement) {
if (typeof node.getBoundingClientRect === 'undefined') {
return null;
} else {
let rect = node.getBoundingClientRect();
rect.y += window.scrollY;
rect.x += window.scrollX;
return rect;
}
}

public static domPathsToElements(xpaths: string[]) {
// console.log("Function: domPathsToElements: ")
let results: HTMLElement[] = [];
Expand All @@ -34,8 +45,8 @@ export default class DomPathUtils {

public static issuesToDomPaths(issues: IIssue[]) {
// console.log("Inside issuesToDomPaths");
let tabXpaths: any = [];
issues.map((result: any) => {
let tabXpaths: string[] = [];
issues.map((result) => {
if (result != null) {
// console.log("result.path.dom = "+result.path.dom);
tabXpaths.push(result.path.dom);
Expand Down
277 changes: 138 additions & 139 deletions accessibility-checker-extension/src/ts/contentScripts/TabChainCircles.ts
View file

Large diffs are not rendered by default.

33 changes: 17 additions & 16 deletions accessibility-checker-extension/src/ts/contentScripts/TabStopErrorCircles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import TabStopLine from "./TabStopLine";
import TabStopText from "./TabStopText";
import NotificationDot from "./NotificationDot";

const getScreenRect = DomPathUtils.getScreenRect;

export default class TabStopErrorCircles {
// Tab Stop error NOT in the tab chain - get ? instead of number
public static draw(tabStopsErrors: any, tabStops: any, outlines: boolean, iframes: any) {
Expand All @@ -28,9 +30,8 @@ export default class TabStopErrorCircles {
setTimeout(() => {
let tabbableNodesXpaths = DomPathUtils.issuesToDomPaths(tabStops);

let nodes = DomPathUtils.issuesToDomPaths(tabStopsErrors);
let nodeXpaths = nodes;
nodes = DomPathUtils.domPathsToElements(nodeXpaths);
let nodeXpaths = DomPathUtils.issuesToDomPaths(tabStopsErrors);
let nodes = DomPathUtils.domPathsToElements(nodeXpaths);

// console.log("tabStopsErrors = ", tabStopsErrors);
nodes = nodes.filter(function (el: any) { // Removing failure case of null nodes being sent
Expand Down Expand Up @@ -65,10 +66,9 @@ export default class TabStopErrorCircles {
// console.log("Non tabbable nodes[",i,"] element exists");
if (typeof nodes[i].tagName !== 'undefined' || nodes[i].tagName !== null ) { // JCH - tabbable nodes
// console.log("Non tabbable nodes[",i,"] tagName is ",nodes[i].tagName);
if (typeof nodes[i].getBoundingClientRect !== 'undefined' || nodes[i].getBoundingClientRect != null) {
if (getScreenRect(nodes[i]) !== null) {
// console.log("Non tabbable nodes[",i,"] has bounding rect");
}
else {
} else {
console.log("Non tabbable nodes[",i,"] has NO bounding rect");
}
} else {
Expand All @@ -80,15 +80,16 @@ export default class TabStopErrorCircles {
}
// console.log("--------------------------------");

if (nodes[i] != null ) { // JCH - if node exists

if (nodes[i] !== null && getScreenRect(nodes[i]) !== null) { // JCH - tabbable nodes
let nodeRect = getScreenRect(nodes[i])!;

// coords for nodes[i] and its bounding box if not in iframe or shadow dom
let x = nodes[i].getBoundingClientRect().x;
// console.log("nodes[i].getBoundingClientRect() = ",nodes[i].getBoundingClientRect());
let xPlusWidth = nodes[i].getBoundingClientRect().x + nodes[i].getBoundingClientRect().width;
let x = nodeRect.x;
// console.log("nodeRect = ",nodeRect);
let xPlusWidth = nodeRect.x + nodeRect.width;

let y = nodes[i].getBoundingClientRect().y;
let yPlusHeight = nodes[i].getBoundingClientRect().y + nodes[i].getBoundingClientRect().height;
let y = nodeRect.y;
let yPlusHeight = nodeRect.y + nodeRect.height;

// adjustment for iframes
// if element inside iframe get iframe coordinates the add coordinates of element to those of iframe
Expand All @@ -99,7 +100,7 @@ export default class TabStopErrorCircles {
if (lastElement.includes("iframe")) { // this is for the iframe element
// console.log("We Have an iframe, lastElement", lastElement);
if (!iframes.find((e:any) => e.name === nodeXpaths[i])) { // already in iframes
const iframe = {element: nodes[i], name: nodeXpaths[i], x: nodes[i].getBoundingClientRect().x, y: nodes[i].getBoundingClientRect().y};
const iframe = {element: nodes[i], name: nodeXpaths[i], x: nodeRect.x, y: nodeRect.y};
iframes.push(iframe);
}
// no need to adjust coords as the iframe is an element on the main page
Expand All @@ -109,8 +110,8 @@ export default class TabStopErrorCircles {
// find the iframe in iframes
const iframesObj = iframes.find((e:any) => e.name === realIframeString);
// console.log("iframesObj = ",iframesObj);
x = iframesObj.x + nodes[i].getBoundingClientRect().x;
y = iframesObj.y + nodes[i].getBoundingClientRect().y;
x = iframesObj.x + nodeRect.x;
y = iframesObj.y + nodeRect.y;

}
}
Expand Down
50 changes: 22 additions & 28 deletions accessibility-checker-extension/src/ts/contentScripts/TabStopHighlight.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,15 @@ import { getBGController } from "../background/backgroundController";
import { getDevtoolsController } from "../devtools/devtoolsController";
import DomPathUtils from "./DomPathUtils";
import {
IIssue,
IReport
IIssue
} from "../interfaces/interfaces";

export default class TabStopHighlight {
// JCH - This is where we handle Tab Stop highlighting
// We need to differentiate between regular circles and circles with errors.
// The number text inside the circle (doesn't matter if error or not)
// will be normal if not highlighting, bold if highlight
public static async handleTabHighlight(event:any,doc:any,docType:string,iframeStr:string, tabStopsErrors: IReport, regularTabstops: IReport) { // doc type is main, iframe, shadowdom, click
public static async handleTabHighlight(event:any,doc:any,docType:string,iframeStr:string, tabStopsErrors: IIssue[], regularTabstops: IIssue[]) { // doc type is main, iframe, shadowdom, click
let elementXpath = "";
if (!event.shiftKey && event.key === "Tab") { // only catch Tab key
if (docType === "main") {
Expand Down Expand Up @@ -228,14 +227,15 @@ export default class TabStopHighlight {
this.highlightCircle(circle,"circle");

let issue = this.getIssueByXpath(elementXpath,regularTabstops);

let tabId = await getBGController().getTabId();
let devtoolsController = getDevtoolsController(true, "remote", tabId);
await devtoolsController.setSelectedIssue(null);
if (await devtoolsController.getActivePanel() === "elements") {
await devtoolsController.inspectPath(elementXpath,element);
} else {
await devtoolsController.setSelectedElementPath(issue.path.dom);
if (issue) {
let tabId = await getBGController().getTabId();
let devtoolsController = getDevtoolsController(true, "remote", tabId);
await devtoolsController.setSelectedIssue(null);
if (await devtoolsController.getActivePanel() === "elements") {
await devtoolsController.inspectPath(elementXpath,element);
} else {
await devtoolsController.setSelectedElementPath(issue.path.dom);
}
}
} else {
console.log("No circle to highlight = ",circle);
Expand All @@ -245,14 +245,15 @@ export default class TabStopHighlight {
this.highlightCircle(errorCircle,"errorCircle");

let issue = this.getIssueByXpath(elementXpath,tabStopsErrors);

let tabId = await getBGController().getTabId();
let devtoolsController = getDevtoolsController(true, "remote", tabId);
await devtoolsController.setSelectedIssue(issue);
if (await devtoolsController.getActivePanel() === "elements") {
await devtoolsController.inspectPath(elementXpath,element);
} else {
await devtoolsController.setSelectedElementPath(issue.path.dom);
if (issue) {
let tabId = await getBGController().getTabId();
let devtoolsController = getDevtoolsController(true, "remote", tabId);
await devtoolsController.setSelectedIssue(issue);
if (await devtoolsController.getActivePanel() === "elements") {
await devtoolsController.inspectPath(elementXpath,element);
} else {
await devtoolsController.setSelectedElementPath(issue.path.dom);
}
}
} else {
console.log("No errorCircle to highlight = ",circle);
Expand Down Expand Up @@ -324,14 +325,7 @@ export default class TabStopHighlight {
}
}

private static getIssueByXpath(elementXpath:string, tabStopsErrors: IReport) {
let issue: any;
let tabStops:any = tabStopsErrors;
for (let i = 0; i < tabStops.length; i++) {
if (tabStops[i].path.dom === elementXpath) {
issue = tabStops[i];
}
}
return issue as IIssue;
private static getIssueByXpath(elementXpath:string, tabStops: IIssue[]) {
return tabStops.find(tabStop => tabStop.path.dom === elementXpath);
}
}

0 comments on commit e1ca4a7

Please sign in to comment.