├── .gitignore ├── README.md ├── www ├── index.html ├── style.css └── renderer.js ├── package.json ├── CONTRIBUTING.md ├── .eslintrc.js ├── index.js ├── LICENSE └── accessibility.js /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | yarn.lock 3 | node_modules 4 | .profile 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML Accessibility Renderer 2 | Uses Puppeteer to convert from HTML -> Accessibility Intermediate Representation -> HTML 3 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ax-viewer", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node index.js", 8 | "test": "eslint ." 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "carlo": "^0.9.10", 14 | "prepend-http": "^2.0.0", 15 | "puppeteer": "^1.10.0-next.1541361083518" 16 | }, 17 | "devDependencies": { 18 | "eslint": "^5.16.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to Contribute 2 | 3 | We'd love to accept your patches and contributions to this project. There are 4 | just a few small guidelines you need to follow. 5 | 6 | ## Contributor License Agreement 7 | 8 | Contributions to this project must be accompanied by a Contributor License 9 | Agreement. You (or your employer) retain the copyright to your contribution; 10 | this simply gives us permission to use and redistribute your contributions as 11 | part of the project. Head over to to see 12 | your current agreements on file or to sign a new one. 13 | 14 | You generally only need to submit a CLA once, so if you've already submitted one 15 | (even if it was for a different project), you probably don't need to do it 16 | again. 17 | 18 | ## Code reviews 19 | 20 | All submissions, including submissions by project members, require review. We 21 | use GitHub pull requests for this purpose. Consult 22 | [GitHub Help](https://help.github.com/articles/about-pull-requests/) for more 23 | information on using pull requests. 24 | 25 | ## Community Guidelines 26 | 27 | This project follows [Google's Open Source Community 28 | Guidelines](https://opensource.google.com/conduct/). 29 | -------------------------------------------------------------------------------- /www/style.css: -------------------------------------------------------------------------------- 1 | input.urlbar { 2 | width:100%; 3 | border: none; 4 | box-shadow: 0 1px 2px rgba(0,0,0,0.3); 5 | font-size: 1.5em; 6 | padding: 4px; 7 | } 8 | 9 | div div { 10 | padding-left: 5px; 11 | } 12 | span { 13 | white-space: pre-wrap; 14 | } 15 | a, 16 | span { 17 | margin-right: 5px; 18 | } 19 | 20 | button-container { 21 | display: block; 22 | padding: 4px 0px; 23 | } 24 | 25 | button-container button { 26 | margin-right: 4px; 27 | } 28 | 29 | button.dropdown { 30 | display: block; 31 | } 32 | 33 | button.dropdown::after { 34 | content: ' ▼'; 35 | } 36 | 37 | body { 38 | font-family: sans-serif; 39 | background: #f1f1f1; 40 | color: #333; 41 | } 42 | h1 { 43 | font-size: 1.3em 44 | } 45 | 46 | h2 { 47 | font-size: 1em 48 | } 49 | a:not(:hover) { 50 | text-decoration: none; 51 | } 52 | 53 | a.big { 54 | display: block; 55 | font-size: 1.1em; 56 | font-weight:bold; 57 | margin-top: 10px; 58 | } 59 | 60 | .list-marker::before { 61 | display: block; 62 | content: ''; 63 | } 64 | .list-marker { 65 | margin-left: 10px; 66 | } 67 | 68 | body { 69 | background-color: #f1f1f1; 70 | } 71 | inner { 72 | display: block; 73 | background-color: white; 74 | max-width: 850px; 75 | margin: 10px auto; 76 | padding: 10px; 77 | margin-bottom: 10px; 78 | overflow: hidden; 79 | text-overflow: ellipsis; 80 | box-shadow: 0 1px 2px rgba(0,0,0,0.3); 81 | } 82 | 83 | input[type="text"], textarea { 84 | display: block; 85 | margin-bottom: 5px; 86 | } 87 | 88 | [tabIndex="0"] { 89 | font-weight: bold; 90 | color: #888; 91 | cursor: pointer; 92 | } 93 | [tabIndex="0"]:hover { 94 | font-weight: bold; 95 | color: #222; 96 | } 97 | menu { 98 | margin: 12px; 99 | padding: 4px; 100 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 101 | width: fit-content; 102 | } 103 | menu h2 { 104 | margin: 4px 0; 105 | } 106 | 107 | menu li { 108 | text-decoration: underline; 109 | list-style-type: none; 110 | padding: 4px; 111 | cursor: pointer; 112 | color: #888; 113 | } 114 | 115 | menu li:hover { 116 | color: #222 117 | } 118 | 119 | tab { 120 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 121 | margin: 5px auto; 122 | display: block; 123 | padding: 5px; 124 | width: fit-content; 125 | } 126 | 127 | ax-image { 128 | display:flex; 129 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset; 130 | margin: 5px; 131 | width: 150px; 132 | height: 150px; 133 | background-color: #f1f1f1; 134 | justify-content: center; 135 | align-items: center; 136 | } 137 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "root": true, 3 | 4 | "env": { 5 | "node": true, 6 | "es6": true 7 | }, 8 | 9 | "parserOptions": { 10 | "ecmaVersion": 9 11 | }, 12 | 13 | /** 14 | * ESLint rules 15 | * 16 | * All available rules: http://eslint.org/docs/rules/ 17 | * 18 | * Rules take the following form: 19 | * "rule-name", [severity, { opts }] 20 | * Severity: 2 == error, 1 == warning, 0 == off. 21 | */ 22 | "rules": { 23 | /** 24 | * Enforced rules 25 | */ 26 | 27 | 28 | // syntax preferences 29 | "quotes": [2, "single", { 30 | "avoidEscape": true, 31 | "allowTemplateLiterals": true 32 | }], 33 | "semi": 2, 34 | "no-extra-semi": 2, 35 | "comma-style": [2, "last"], 36 | "wrap-iife": [2, "inside"], 37 | "spaced-comment": [2, "always", { 38 | "markers": ["*"] 39 | }], 40 | "eqeqeq": [2], 41 | "arrow-body-style": [2, "as-needed"], 42 | "accessor-pairs": [2, { 43 | "getWithoutSet": false, 44 | "setWithoutGet": false 45 | }], 46 | "brace-style": [2, "1tbs", {"allowSingleLine": true}], 47 | "curly": [2, "multi-or-nest", "consistent"], 48 | "new-parens": 2, 49 | "func-call-spacing": 2, 50 | "arrow-parens": [2, "as-needed"], 51 | "prefer-const": 2, 52 | "quote-props": [2, "consistent"], 53 | 54 | // anti-patterns 55 | "no-var": 2, 56 | "no-with": 2, 57 | "no-multi-str": 2, 58 | "no-caller": 2, 59 | "no-implied-eval": 2, 60 | "no-labels": 2, 61 | "no-new-object": 2, 62 | "no-octal-escape": 2, 63 | "no-self-compare": 2, 64 | "no-shadow-restricted-names": 2, 65 | "no-cond-assign": 2, 66 | "no-debugger": 2, 67 | "no-dupe-keys": 2, 68 | "no-duplicate-case": 2, 69 | "no-empty-character-class": 2, 70 | "no-unreachable": 2, 71 | "no-unsafe-negation": 2, 72 | "radix": 2, 73 | "valid-typeof": 2, 74 | "no-unused-vars": [2, { "args": "none", "vars": "local", "varsIgnorePattern": "([fx]?describe|[fx]?it|beforeAll|beforeEach|afterAll|afterEach)" }], 75 | "no-implicit-globals": [2], 76 | 77 | // es2015 features 78 | "require-yield": 2, 79 | "template-curly-spacing": [2, "never"], 80 | 81 | // spacing details 82 | "space-infix-ops": 2, 83 | "space-in-parens": [2, "never"], 84 | "space-before-function-paren": [2, "never"], 85 | "no-whitespace-before-property": 2, 86 | "keyword-spacing": [2, { 87 | "overrides": { 88 | "if": {"after": true}, 89 | "else": {"after": true}, 90 | "for": {"after": true}, 91 | "while": {"after": true}, 92 | "do": {"after": true}, 93 | "switch": {"after": true}, 94 | "return": {"after": true} 95 | } 96 | }], 97 | "arrow-spacing": [2, { 98 | "after": true, 99 | "before": true 100 | }], 101 | 102 | // file whitespace 103 | "no-multiple-empty-lines": [2, {"max": 2}], 104 | "no-mixed-spaces-and-tabs": 2, 105 | "no-trailing-spaces": 2, 106 | "linebreak-style": [ process.platform === "win32" ? 0 : 2, "unix" ], 107 | "indent": [2, 2, { "SwitchCase": 1, "CallExpression": {"arguments": 2}, "MemberExpression": 2 }], 108 | "key-spacing": [2, { 109 | "beforeColon": false 110 | }] 111 | } 112 | }; 113 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the 'License'); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an 'AS IS' BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | const puppeteer = require('puppeteer'); 17 | const carlo = require('carlo'); 18 | const path = require('path'); 19 | const {snapshot} = require('./accessibility'); 20 | const {createJSHandle} = require('puppeteer/lib/JSHandle'); 21 | const prependHttp = require('prepend-http'); 22 | 23 | const appPromise = carlo.launch({ 24 | executablePath: puppeteer.executablePath() 25 | }).then(async app => { 26 | app.serveFolder(path.resolve(__dirname, 'www')); 27 | await app.exposeFunction('snapshot', async() => { 28 | const page = await pagePromise; 29 | return await snapshot(page); 30 | }); 31 | await app.exposeFunction('$eval', async(backendNodeId, func, ...args) => { 32 | const page = await pagePromise; 33 | const {object} = await page._client.send('DOM.resolveNode', {backendNodeId}); 34 | const handle = createJSHandle(await page.mainFrame().executionContext(), object); 35 | const dummy = () => void 0; 36 | dummy.toString = () => func; 37 | return await page.evaluate(dummy, handle, ...args); 38 | }); 39 | await app.exposeFunction('keypress', async key => { 40 | const page = await pagePromise; 41 | await page.keyboard.press(key); 42 | }); 43 | await app.exposeFunction('changeURL', async url => { 44 | const page = await pagePromise; 45 | await page.goto(prependHttp(url)); 46 | }); 47 | await app.exposeFunction('goForward', async url => { 48 | const page = await pagePromise; 49 | await page.goForward(); 50 | }); 51 | await app.exposeFunction('goBack', async url => { 52 | const page = await pagePromise; 53 | await page.goBack(); 54 | }); 55 | await app.load('index.html'); 56 | app.on('exit', () => process.exit()); 57 | return app; 58 | }); 59 | if (process.argv.some(x => x === '--help')) { 60 | console.log('Usage: node [--show] [url]'); 61 | process.exit(0); 62 | } 63 | const headless = !process.argv.some(x => x === '--show'); 64 | const pagePromise = puppeteer.launch({ 65 | headless, 66 | defaultViewport: headless ? {width: 1920, height: 1080} : null, 67 | ignoreDefaultArgs: headless ? [] : ['--enable-automation'], 68 | args: ['--no-default-browser-check'], 69 | env: { 70 | GOOGLE_API_KEY: 'no', 71 | GOOGLE_DEFAULT_CLIENT_ID: 'no', 72 | GOOGLE_DEFAULT_CLIENT_SECRET: 'no', 73 | ...process.env 74 | } 75 | }).then(async browser => { 76 | const [page] = await browser.pages(); 77 | page.on('framenavigated', async frame => { 78 | if (frame.parentFrame()) 79 | return; 80 | const app = await appPromise; 81 | app.evaluate(url => { 82 | urlChanged(url); 83 | render(); 84 | }, page.url()); 85 | }); 86 | page.on('load', async() => { 87 | const app = await appPromise; 88 | app.evaluate(() => render()); 89 | }); 90 | page.on('domcontentloaded', async() => { 91 | const app = await appPromise; 92 | app.evaluate(() => render()); 93 | }); 94 | const urls = process.argv.slice(2).map(x => x.trim()).filter(x => x && !x.startsWith('--')); 95 | const url = urls.length ? prependHttp(urls[0]) : 'https://www.google.com'; 96 | await page.goto(url); 97 | await page._client.send('Accessibility.enable'); 98 | await page._client.send('Emulation.setFocusEmulationEnabled', {enabled: true}); 99 | 100 | return page; 101 | }); -------------------------------------------------------------------------------- /www/renderer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the 'License'); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an 'AS IS' BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | const urlBar = document.createElement('input'); 18 | urlBar.classList.add('urlbar'); 19 | document.body.appendChild(urlBar); 20 | 21 | window.urlChanged = function(url) { 22 | urlBar.value = url; 23 | }; 24 | 25 | urlBar.addEventListener('keydown', event => { 26 | if (event.key === 'Enter') { 27 | changeURL(urlBar.value); 28 | event.preventDefault(); 29 | event.stopPropagation(); 30 | } 31 | }); 32 | urlBar.addEventListener('focus', () => urlBar.select()); 33 | 34 | document.addEventListener('keydown', event => { 35 | if (document.activeElement.tagName === 'INPUT') 36 | return; 37 | if (document.activeElement.tagName === 'TEXTAREA') 38 | return; 39 | if (event.key === 'Backspace') { 40 | if (event.shiftKey) 41 | goForward(); 42 | else 43 | goBack(); 44 | } 45 | }); 46 | 47 | document.addEventListener('keydown', event => { 48 | if (event.key === 'Enter') { 49 | keypress(event.key); 50 | event.preventDefault(); 51 | event.stopPropagation(); 52 | } 53 | }); 54 | 55 | const inner = document.createElement('inner'); 56 | let last = null; 57 | async function render() { 58 | const data = await snapshot(); 59 | if (JSON.stringify(last) === JSON.stringify(data)) 60 | return; 61 | last = data; 62 | const lastFocused = { 63 | id: document.activeElement.nodeId, 64 | selectionStart: document.activeElement.selectionStart, 65 | selectionEnd: document.activeElement.selectionEnd, 66 | }; 67 | inner.textContent = ''; 68 | document.body.appendChild(inner); 69 | 70 | walk(data, inner); 71 | 72 | /** 73 | * @param {Object} axnode 74 | * @param {!Element} parentElement 75 | */ 76 | function walk(axnode, parentElement) { 77 | let newElement = parentElement; 78 | switch (axnode.role) { 79 | case 'WebArea': 80 | document.title = axnode.name; 81 | break; 82 | case 'text': 83 | newElement = document.createElement('span'); 84 | newElement.textContent = axnode.name; 85 | parentElement.appendChild(newElement); 86 | break; 87 | case 'link': 88 | newElement = document.createElement('a'); 89 | newElement.href = '#'; 90 | newElement.textContent = axnode.name; 91 | if (axnode.name.length > 25) 92 | newElement.className = 'big'; 93 | parentElement.appendChild(newElement); 94 | break; 95 | case 'heading': 96 | newElement = document.createElement('h' + axnode.level); 97 | newElement.textContent = axnode.name; 98 | parentElement.appendChild(newElement); 99 | break; 100 | case 'button': 101 | let container = parentElement.lastElementChild; 102 | if (!container || container.tagName !== 'BUTTON-CONTAINER') { 103 | container = document.createElement('button-container'); 104 | parentElement.appendChild(container); 105 | } 106 | newElement = document.createElement('button'); 107 | newElement.textContent = axnode.name; 108 | container.appendChild(newElement); 109 | break; 110 | case 'radio': 111 | newElement = document.createElement('input'); 112 | newElement.type = 'radio'; 113 | newElement.textContent = axnode.name; 114 | newElement.checked = axnode.checked; 115 | parentElement.appendChild(newElement); 116 | { 117 | const label = document.createElement('label'); 118 | label.textContent = axnode.name; 119 | parentElement.appendChild(label); 120 | } 121 | break; 122 | case 'checkbox': 123 | newElement = document.createElement('input'); 124 | newElement.type = 'checkbox'; 125 | newElement.textContent = axnode.name; 126 | newElement.checked = axnode.checked; 127 | parentElement.appendChild(newElement); 128 | { 129 | const label = document.createElement('label'); 130 | label.textContent = axnode.name; 131 | parentElement.appendChild(label); 132 | } 133 | break; 134 | case 'GenericContainer': 135 | newElement = document.createElement('div'); 136 | newElement.textContent = axnode.name; 137 | newElement.tabIndex = 0; 138 | parentElement.appendChild(newElement); 139 | break; 140 | case 'ListMarker': 141 | newElement = document.createElement('span'); 142 | newElement.textContent = axnode.name; 143 | newElement.className = 'list-marker'; 144 | parentElement.appendChild(newElement); 145 | break; 146 | case 'img': 147 | newElement = document.createElement('ax-image'); 148 | newElement.textContent = axnode.name; 149 | newElement.title = axnode.title; 150 | parentElement.appendChild(newElement); 151 | break; 152 | case 'listbox': 153 | case 'combobox': 154 | if (!axnode.editable) { 155 | if (!axnode.children || !axnode.children.some(x => x.role === 'menuitem' || x.role === 'option')) { 156 | newElement = document.createElement('button'); 157 | newElement.textContent = axnode.name; 158 | newElement.className = 'dropdown'; 159 | parentElement.appendChild(newElement); 160 | } else { 161 | newElement = document.createElement('select'); 162 | newElement.title = axnode.name; 163 | for (const child of axnode.children) { 164 | if (child.role === 'menuitem' || child.role === 'option') { 165 | const option = document.createElement('option'); 166 | option.textContent = child.name; 167 | newElement.appendChild(option); 168 | } 169 | } 170 | newElement.value = axnode.value; 171 | parentElement.appendChild(newElement); 172 | } 173 | break; 174 | } 175 | // fallthrough 176 | case 'textbox': 177 | newElement = document.createElement(axnode.multiline ? 'textarea' : 'input'); 178 | newElement.type = 'text'; 179 | newElement.value = axnode.value || ''; 180 | newElement.title = newElement.placeholder = axnode.name; 181 | newElement.disabled = axnode.disabled; 182 | parentElement.appendChild(newElement); 183 | break; 184 | case 'menu': 185 | newElement = document.createElement('menu'); 186 | const h2 = document.createElement('h2'); 187 | h2.textContent = axnode.name; 188 | newElement.appendChild(h2); 189 | parentElement.appendChild(newElement); 190 | break; 191 | case 'menuitem': 192 | newElement = document.createElement('li'); 193 | if (!axnode.children) 194 | newElement.textContent = axnode.name; 195 | newElement.title = axnode.name; 196 | parentElement.appendChild(newElement); 197 | break; 198 | 199 | case 'tab': 200 | newElement = document.createElement('tab'); 201 | if (!axnode.children) 202 | newElement.textContent = axnode.name; 203 | axnode.title = axnode.name; 204 | parentElement.appendChild(newElement); 205 | break; 206 | 207 | default: 208 | newElement = document.createElement('div'); 209 | newElement.textContent = `${axnode.role}: ${axnode.name}`; 210 | parentElement.appendChild(newElement); 211 | } 212 | newElement.nodeId = axnode.nodeId; 213 | newElement.addEventListener('click', async event => { 214 | event.stopPropagation(); 215 | await evalWithNode(axnode, node => node.click && node.click()); 216 | await render(); 217 | }); 218 | newElement.addEventListener('focus', async event => { 219 | await evalWithNode(axnode, node => node.focus && node.focus()); 220 | }); 221 | newElement.addEventListener('input', event => { 222 | evalWithNode(axnode, (node, value) => node.value = value, newElement.value); 223 | event.stopPropagation(); 224 | }); 225 | if (axnode.nodeId === lastFocused.id) { 226 | newElement.focus(); 227 | newElement.selectionStart = lastFocused.selectionStart; 228 | newElement.selectionEnd = lastFocused.selectionEnd; 229 | } 230 | for (const child of axnode.children || []) 231 | walk(child, newElement); 232 | } 233 | } 234 | 235 | setInterval(render, 1500); 236 | 237 | async function evalWithNode(node, func, ...args) { 238 | return await $eval(node.backendDOMNodeId, func.toString(), ...args); 239 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright 2017 Google Inc. 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /accessibility.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2019 Google Inc. All rights reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the 'License'); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an 'AS IS' BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** 18 | * @typedef {Object} SerializedAXNode 19 | * @property {string} role 20 | * 21 | * @property {string=} name 22 | * @property {string|number=} value 23 | * @property {string=} description 24 | * 25 | * @property {string=} keyshortcuts 26 | * @property {string=} roledescription 27 | * @property {string=} valuetext 28 | * 29 | * @property {boolean=} editable 30 | * @property {boolean=} disabled 31 | * @property {boolean=} expanded 32 | * @property {boolean=} focused 33 | * @property {boolean=} modal 34 | * @property {boolean=} multiline 35 | * @property {boolean=} multiselectable 36 | * @property {boolean=} readonly 37 | * @property {boolean=} required 38 | * @property {boolean=} selected 39 | * 40 | * @property {boolean|"mixed"=} checked 41 | * @property {boolean|"mixed"=} pressed 42 | * 43 | * @property {number=} level 44 | * @property {number=} valuemin 45 | * @property {number=} valuemax 46 | * 47 | * @property {string=} autocomplete 48 | * @property {string=} haspopup 49 | * @property {string=} invalid 50 | * @property {string=} orientation 51 | * 52 | * @property {Array=} children 53 | */ 54 | 55 | class Accessibility { 56 | /** 57 | * @param {!Puppeteer.CDPSession} client 58 | */ 59 | constructor(client) { 60 | this._client = client; 61 | } 62 | 63 | /** 64 | * @param {{interestingOnly?: boolean}=} options 65 | * @return {!Promise} 66 | */ 67 | 68 | } 69 | 70 | /** 71 | * @param {!Set} collection 72 | * @param {!AXNode} node 73 | * @param {boolean} insideControl 74 | */ 75 | function collectInterestingNodes(collection, node, insideControl) { 76 | if (node.isInteresting(insideControl)) 77 | collection.add(node); 78 | if (node.isLeafNode()) 79 | return; 80 | insideControl = insideControl || node.isControl(); 81 | for (const child of node._children) 82 | collectInterestingNodes(collection, child, insideControl); 83 | } 84 | 85 | /** 86 | * @param {!AXNode} node 87 | * @param {!Set=} whitelistedNodes 88 | * @return {!Array} 89 | */ 90 | function serializeTree(node, whitelistedNodes) { 91 | /** @type {!Array} */ 92 | const children = []; 93 | for (const child of node._children) 94 | children.push(...serializeTree(child, whitelistedNodes)); 95 | 96 | if (whitelistedNodes && !whitelistedNodes.has(node)) 97 | return children; 98 | 99 | const serializedNode = node.serialize(); 100 | if (children.length) 101 | serializedNode.children = children; 102 | return [serializedNode]; 103 | } 104 | 105 | 106 | class AXNode { 107 | /** 108 | * @param {!Protocol.Accessibility.AXNode} payload 109 | */ 110 | constructor(payload) { 111 | this._payload = payload; 112 | 113 | /** @type {!Array} */ 114 | this._children = []; 115 | 116 | this._richlyEditable = false; 117 | this._editable = false; 118 | this._focusable = false; 119 | this._expanded = false; 120 | this._name = this._payload.name ? this._payload.name.value : ''; 121 | this._role = this._payload.role ? this._payload.role.value : 'Unknown'; 122 | this._cachedHasFocusableChild; 123 | 124 | for (const property of this._payload.properties || []) { 125 | if (property.name === 'editable') { 126 | this._richlyEditable = property.value.value === 'richtext'; 127 | this._editable = true; 128 | } 129 | if (property.name === 'focusable') 130 | this._focusable = property.value.value; 131 | if (property.name === 'expanded') 132 | this._expanded = property.value.value; 133 | } 134 | } 135 | 136 | /** 137 | * @return {boolean} 138 | */ 139 | _isPlainTextField() { 140 | if (this._richlyEditable) 141 | return false; 142 | if (this._editable) 143 | return true; 144 | return this._role === 'textbox' || this._role === 'ComboBox' || this._role === 'searchbox'; 145 | } 146 | 147 | /** 148 | * @return {boolean} 149 | */ 150 | _isTextOnlyObject() { 151 | const role = this._role; 152 | return (role === 'LineBreak' || role === 'text' || 153 | role === 'InlineTextBox'); 154 | } 155 | 156 | /** 157 | * @return {boolean} 158 | */ 159 | _hasFocusableChild() { 160 | if (this._cachedHasFocusableChild === undefined) { 161 | this._cachedHasFocusableChild = false; 162 | for (const child of this._children) { 163 | if (child._focusable || child._hasFocusableChild()) { 164 | this._cachedHasFocusableChild = true; 165 | break; 166 | } 167 | } 168 | } 169 | return this._cachedHasFocusableChild; 170 | } 171 | 172 | /** 173 | * @return {boolean} 174 | */ 175 | isLeafNode() { 176 | if (!this._children.length) 177 | return true; 178 | 179 | // These types of objects may have children that we use as internal 180 | // implementation details, but we want to expose them as leaves to platform 181 | // accessibility APIs because screen readers might be confused if they find 182 | // any children. 183 | if (this._isPlainTextField() || this._isTextOnlyObject()) 184 | return true; 185 | 186 | // Roles whose children are only presentational according to the ARIA and 187 | // HTML5 Specs should be hidden from screen readers. 188 | // (Note that whilst ARIA buttons can have only presentational children, HTML5 189 | // buttons are allowed to have content.) 190 | switch (this._role) { 191 | case 'doc-cover': 192 | case 'graphics-symbol': 193 | case 'img': 194 | case 'Meter': 195 | case 'scrollbar': 196 | case 'slider': 197 | case 'separator': 198 | case 'progressbar': 199 | return true; 200 | default: 201 | break; 202 | } 203 | 204 | // Here and below: Android heuristics 205 | if (this._hasFocusableChild()) 206 | return false; 207 | if (this._focusable && this._name) 208 | return true; 209 | if (this._role === 'heading' && this._name) 210 | return true; 211 | return false; 212 | } 213 | 214 | /** 215 | * @return {boolean} 216 | */ 217 | isControl() { 218 | switch (this._role) { 219 | case 'button': 220 | case 'checkbox': 221 | case 'ColorWell': 222 | case 'combobox': 223 | case 'DisclosureTriangle': 224 | case 'listbox': 225 | case 'menu': 226 | case 'menubar': 227 | case 'menuitem': 228 | case 'menuitemcheckbox': 229 | case 'menuitemradio': 230 | case 'radio': 231 | case 'scrollbar': 232 | case 'searchbox': 233 | case 'slider': 234 | case 'spinbutton': 235 | case 'switch': 236 | case 'tab': 237 | case 'textbox': 238 | case 'tree': 239 | return true; 240 | default: 241 | return false; 242 | } 243 | } 244 | 245 | /** 246 | * @param {boolean} insideControl 247 | * @return {boolean} 248 | */ 249 | isInteresting(insideControl) { 250 | const role = this._role; 251 | if (role === 'Ignored') 252 | return false; 253 | 254 | if (this._focusable || this._richlyEditable) 255 | return true; 256 | 257 | // If it's not focusable but has a control role, then it's interesting. 258 | if (this.isControl()) 259 | return true; 260 | 261 | // A non focusable child of a control is not interesting 262 | if (insideControl) 263 | return false; 264 | 265 | return this.isLeafNode() && !!this._name; 266 | } 267 | 268 | /** 269 | * @return {!SerializedAXNode} 270 | */ 271 | serialize() { 272 | /** @type {!Map} */ 273 | const properties = new Map(); 274 | for (const property of this._payload.properties || []) 275 | properties.set(property.name.toLowerCase(), property.value.value); 276 | if (this._payload.name) 277 | properties.set('name', this._payload.name.value); 278 | if (this._payload.value) 279 | properties.set('value', this._payload.value.value); 280 | if (this._payload.description) 281 | properties.set('description', this._payload.description.value); 282 | 283 | /** @type {SerializedAXNode} */ 284 | const node = { 285 | role: this._role 286 | }; 287 | 288 | /** @type {!Array} */ 289 | const userStringProperties = [ 290 | 'name', 291 | 'value', 292 | 'description', 293 | 'keyshortcuts', 294 | 'roledescription', 295 | 'valuetext', 296 | ]; 297 | for (const userStringProperty of userStringProperties) { 298 | if (!properties.has(userStringProperty)) 299 | continue; 300 | node[userStringProperty] = properties.get(userStringProperty); 301 | } 302 | 303 | /** @type {!Array} */ 304 | const booleanProperties = [ 305 | 'editable', 306 | 'disabled', 307 | 'expanded', 308 | 'focused', 309 | 'modal', 310 | 'multiline', 311 | 'multiselectable', 312 | 'readonly', 313 | 'required', 314 | 'selected', 315 | ]; 316 | for (const booleanProperty of booleanProperties) { 317 | // WebArea's treat focus differently than other nodes. They report whether their frame has focus, 318 | // not whether focus is specifically on the root node. 319 | if (booleanProperty === 'focused' && this._role === 'WebArea') 320 | continue; 321 | const value = properties.get(booleanProperty); 322 | if (!value) 323 | continue; 324 | node[booleanProperty] = true; 325 | } 326 | 327 | /** @type {!Array} */ 328 | const tristateProperties = [ 329 | 'checked', 330 | 'pressed', 331 | ]; 332 | for (const tristateProperty of tristateProperties) { 333 | if (!properties.has(tristateProperty)) 334 | continue; 335 | const value = properties.get(tristateProperty); 336 | node[tristateProperty] = value === 'mixed' ? 'mixed' : value === 'true' ? true : false; 337 | } 338 | /** @type {!Array} */ 339 | const numericalProperties = [ 340 | 'level', 341 | 'valuemax', 342 | 'valuemin', 343 | ]; 344 | for (const numericalProperty of numericalProperties) { 345 | if (!properties.has(numericalProperty)) 346 | continue; 347 | node[numericalProperty] = properties.get(numericalProperty); 348 | } 349 | /** @type {!Array} */ 350 | const tokenProperties = [ 351 | 'autocomplete', 352 | 'haspopup', 353 | 'invalid', 354 | 'orientation', 355 | ]; 356 | for (const tokenProperty of tokenProperties) { 357 | const value = properties.get(tokenProperty); 358 | if (!value || value === 'false') 359 | continue; 360 | node[tokenProperty] = value; 361 | } 362 | node.nodeId = this._payload.nodeId; 363 | node.backendDOMNodeId = this._payload.backendDOMNodeId; 364 | return node; 365 | } 366 | 367 | /** 368 | * @param {!Array} payloads 369 | * @return {!AXNode} 370 | */ 371 | static createTree(payloads) { 372 | /** @type {!Map} */ 373 | const nodeById = new Map(); 374 | for (const payload of payloads) 375 | nodeById.set(payload.nodeId, new AXNode(payload)); 376 | for (const node of nodeById.values()) { 377 | for (const childId of node._payload.childIds || []) 378 | node._children.push(nodeById.get(childId)); 379 | } 380 | return nodeById.values().next().value; 381 | } 382 | } 383 | 384 | 385 | async function snapshot(page, options = {}) { 386 | const {interestingOnly = true} = options; 387 | const {nodes} = await page._client.send('Accessibility.getFullAXTree'); 388 | const root = AXNode.createTree(nodes); 389 | if (!interestingOnly) 390 | return serializeTree(root)[0]; 391 | 392 | /** @type {!Set} */ 393 | const interestingNodes = new Set(); 394 | collectInterestingNodes(interestingNodes, root, false); 395 | return serializeTree(root, interestingNodes)[0]; 396 | } 397 | 398 | module.exports = {snapshot}; --------------------------------------------------------------------------------