Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(extension): Info overlay for web page doesn't inspect the element underneath #1894

Merged
merged 7 commits into from
May 8, 2024
Merged

fix(extension): Info overlay for web page doesn't inspect the element underneath #1894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b4db1d2
add pointer-event none only to element overlay
drjoho Apr 17, 2024
7c44bd3
Add overlay dismiss button
tombrunet Apr 26, 2024
c2e09ef
Dismiss overlay on escape
tombrunet Apr 27, 2024
be1a21e
Fix KCM to update on resize / scroll
tombrunet Apr 29, 2024
60db9e6
Merge branch 'master' into drjoho-overlaybug-1854-NEW
tombrunet Apr 29, 2024
c00518c
Merge branch 'master' into drjoho-overlaybug-1854-NEW
tombrunet May 6, 2024
6139bb5
Don't render when KCM isn't on
tombrunet May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 13 additions & 2 deletions accessibility-checker-extension/src/ts/contentScripts/DomPathUtils.ts
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

33 changes: 17 additions & 16 deletions accessibility-checker-extension/src/ts/contentScripts/TabStopErrorCircles.ts
View file
Open in desktop
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
Open in desktop
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);
}
}