Handling clicks on buttons, links and textboxes

.gitignore

@@ -1,24 +1,7 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/node_modules
+/.cache
 /extension/inject.js

extension/manifest.json

@@ -1,15 +1,15 @@
 {
-  "name": "Injecta",
-  "version": "0.0.1",
+  "name": "ARIA DevTools",
+  "version": "1.0.0",
   "manifest_version": 2,
-  "description": "Injecting stuff",
-  "homepage_url": "http://danharper.me",
+  "description": "Powerful development tools for creating accessible rich internet applications",
+  "homepage_url": "http://ariadevtools.com",
   "background": {
     "scripts": ["background.js"],
     "persistent": true
   },
   "browser_action": {
-    "default_title": "Inject!"
+    "default_title": "Toggle accessibility view"
   },
   "commands": {
     "_execute_browser_action": {

package.json

@@ -3,45 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.1",
-    "@babel/preset-typescript": "^7.9.0",
-    "@egjs/list-differ": "^1.0.0",
     "@popperjs/core": "^2.0.6",
-    "@reduxjs/toolkit": "^1.2.5",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/lodash": "^4.14.149",
-    "@types/mocha": "^7.0.2",
-    "@types/react-redux": "^7.1.7",
-    "@types/uuid": "^7.0.2",
-    "adiff": "^0.2.13",
-    "aria-query": "^4.0.2",
-    "babel-plugin-styled-components": "^1.10.7",
-    "chai": "^4.2.0",
-    "emoji-js": "^3.5.0",
-    "http-proxy": "^1.18.0",
     "jsondiffpatch": "^0.4.1",
-    "lodash": "^4.17.15",
     "mobx": "^5.15.4",
     "mobx-react": "^6.1.8",
-    "mocha": ">=7",
-    "mochawesome": "^5.0.0",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0",
-    "react-is": ">= 16.8.0",
-    "react-redux": "^7.2.0",
-    "react-scripts": "3.3.1",
     "react-shadow": "^17.6.0",
-    "scroll-into-view": "^1.14.2",
-    "source-map-support": "^0.5.16",
+    "scroll": "^3.0.1",
     "styled-components": "^5.0.0",
     "uuid": "^7.0.2"
   },
   "scripts": {
     "test": "parcel test/index.html --open --port 3000",
-    "start": "parcel watch src/index.tsx --out-dir extension --out-file inject.js --hmr-hostname localhost --https",
+    "start": "parcel watch src/index.tsx --out-dir extension --out-file inject.js --hmr-hostname localhost --hmr-port 3005 --https",
     "build": "parcel build src/index.tsx --out-dir extension --out-file inject.js"
   },
   "eslintConfig": {
@@ -64,7 +39,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "@babel/preset-typescript": "^7.9.0",
+    "@types/mocha": "^7.0.2",
+    "@types/scroll": "^3.0.0",
     "@types/styled-components": "^5.0.1",
-    "typescript": "^3.7.5"
+    "@types/uuid": "^7.0.2",
+    "babel-plugin-styled-components": "^1.10.7",
+    "chai": "^4.2.0",
+    "mocha": ">=7",
+    "typescript": "^3.7.5",
+    "source-map-support": "^0.5.16"
   }
 }

src/AOM/traverse.ts

@@ -11,7 +11,7 @@ export default function traverse(htmlNode: Node, traversedNodes = new Map<Node,
 
   if (htmlNode.nodeType === Node.TEXT_NODE) {
     const text = htmlNode.textContent;
-    return text ? new TextElement({ key: getNodeKey(htmlNode), text }) : null;
+    return text ? new TextElement({ key: getNodeKey(htmlNode), text, node: htmlNode }) : null;
   }
 
   if (htmlNode.nodeType !== Node.ELEMENT_NODE) {
@@ -25,13 +25,7 @@ export default function traverse(htmlNode: Node, traversedNodes = new Map<Node,
     return null;
   }
 
-  const result: NodeElement = new NodeElement({
-    key: getNodeKey(node),
-    htmlTag: tagName,
-    isHidden: isHidden(node),
-    isFocused: isFocused(node),
-    isInline: isInline(node)
-  });
+  const result: NodeElement = new NodeElement(node);
 
   const attributes = result.getRawAttributes();
   Object.keys(attributes).forEach(attribute => {

src/AOM/types.ts

@@ -1,5 +1,14 @@
 import { action, computed, observable } from "mobx";
-import { findAncestor, findDescendants, hasEmptyRoleMapping, isRootLandmark } from "./utils";
+import {
+  findAncestor,
+  findDescendants,
+  getNodeKey,
+  hasEmptyRoleMapping,
+  isFocused,
+  isHidden,
+  isInline,
+  isRootLandmark
+} from "./utils";
 import html = Mocha.reporters.html;
 
 export type HtmlID = string;
@@ -425,8 +434,10 @@ export type AriaRole =
   | null;
 
 export class TextElement {
-  key: AomKey;
-  role: AriaRole = "text";
+  readonly key: AomKey;
+  readonly role: AriaRole = "text";
+  readonly domNode: HTMLElement;
+
   @observable text: string;
   @observable htmlParent: NodeElement | null = null;
 
@@ -442,9 +453,10 @@ export class TextElement {
     return this.text;
   }
 
-  constructor(props: { key: AomKey; text: string }) {
+  constructor(props: { key: AomKey; text: string; node: HTMLElement }) {
     this.key = props.key;
     this.text = props.text;
+    this.domNode = props.node;
   }
 }
 
@@ -879,6 +891,10 @@ export class Aria {
     return this.rawAttributes["name"]?.trim();
   }
 
+  @computed get htmlType() {
+    return this.rawAttributes["type"]?.trim();
+  }
+
   @computed get htmlAlt() {
     return this.rawAttributes["alt"]?.trim();
   }
@@ -911,13 +927,13 @@ export class Aria {
 }
 
 export class NodeElement {
+  readonly domNode: HTMLElement;
   readonly key: AomKey;
   readonly htmlTag: string;
 
   @observable isHidden: boolean;
   @observable isFocused: boolean;
   @observable containsFocus?: boolean;
-  @observable isActiveAlarm: boolean = false;
   @observable isInline: boolean;
   @observable htmlParent: NodeElement | null = null;
   @observable htmlChildren: NonNullable<AOMElement>[] = [];
@@ -980,7 +996,8 @@ export class NodeElement {
       !!this.relations.labelledBy.length ||
       this.attributes.ariaLabel != null ||
       this.attributes.htmlAlt != null ||
-      this.attributes.htmlTitle != null
+      this.attributes.htmlTitle != null ||
+      this.attributes.htmlPlaceholder != null
     );
   }
 
@@ -1021,6 +1038,15 @@ export class NodeElement {
         return this.attributes.htmlPlaceholder;
       }
 
+      if (
+        this.htmlTag === "input" &&
+        this.attributes.htmlType &&
+        this.attributes.htmlValue &&
+        ["submit", "button", "reset"].includes(this.attributes.htmlType)
+      ) {
+        return this.attributes.htmlValue;
+      }
+
       const children = getAccessibleNameOf(this.children).trim();
 
       if (children) {
@@ -1041,12 +1067,13 @@ export class NodeElement {
     }
   }
 
-  constructor(props: { key: AomKey; htmlTag: string; isHidden: boolean; isInline: boolean; isFocused: boolean }) {
-    this.key = props.key;
-    this.htmlTag = props.htmlTag;
-    this.isHidden = props.isHidden;
-    this.isFocused = props.isFocused;
-    this.isInline = props.isInline;
+  constructor(node: HTMLElement) {
+    this.domNode = node;
+    this.htmlTag = node.tagName.toLowerCase();
+    this.key = getNodeKey(node);
+    this.isHidden = isHidden(node);
+    this.isFocused = isFocused(node);
+    this.isInline = isInline(node);
   }
 }