diff options
Diffstat (limited to 'chromium/chrome/browser/resources/accessibility')
| -rw-r--r-- | chromium/chrome/browser/resources/accessibility/accessibility.html | 94 | ||||
| -rw-r--r-- | chromium/chrome/browser/resources/accessibility/accessibility.js | 74 |
2 files changed, 118 insertions, 50 deletions
diff --git a/chromium/chrome/browser/resources/accessibility/accessibility.html b/chromium/chrome/browser/resources/accessibility/accessibility.html index 478c0c27385..1d9b645429c 100644 --- a/chromium/chrome/browser/resources/accessibility/accessibility.html +++ b/chromium/chrome/browser/resources/accessibility/accessibility.html @@ -17,11 +17,20 @@ found in the LICENSE file. </head> <body> <h1>Accessibility Internals</h1> + <p> + Use this page to inspect the internal representation of accessibility in + Chrome. You can see and modify the various accessibility modes Chrome has. + You can also view the accessibility tree for a specific page, or for the + Chrome app natively. + </p> <div class="columns"> <div class="column"> - <h2>Global accessibility mode:</h2> - + <h2>Accessibility modes:</h2> + <p> + Check/uncheck accessibility modes to see how they change a page's + accessibility. + </p> <div class="checkbox-row"> <label> <span class="checkbox-wrapper"> @@ -103,8 +112,25 @@ found in the LICENSE file. Automatically labels images. </div> - <h2>Options:</h2> + <h2>Command line options:</h2> + <p> + Accessibility features in Chrome are off by default and enabled + automatically on-demand. Changes to these modes only take effect + until the next time Chrome is restarted. + </p> + <p> + To force accessibility to be enabled at launch, run Chrome with this + flag: + <pre>--force-renderer-accessibility</pre> + </p> + <p> + To disable accessibility, run Chrome with this flag: + <pre>--disable-renderer-accessibility</pre> + </p> + </div> + <div class="column"> + <h2>Accessibility tree viewing options:</h2> <div class="checkbox-row"> <span class="checkbox-wrapper"> <input type="checkbox" id="internal" @@ -118,37 +144,47 @@ found in the LICENSE file. Show internal accessibility tree instead of native </div> - </div> - <div class="column"> - <p> - Accessibility features in Chrome are off by default and enabled - automatically on-demand. Changes to this page only take effect - until the next time Chrome is restarted. - </p> + <h3>Filters:</h3> <p> - To force accessibility to be enabled at launch, run Chrome with this - command-line flag: - <pre>--force-renderer-accessibility</pre> - </p> - <p> - To disable accessibility, run Chrome with this flag: - <pre>--disable-renderer-accessibility</pre> + Use filters to match the attributes and attribute values you want + included in the output. Filters can contain simple wildcards (*) only, + they're not regular expressions. Attributes are separated by spaces. </p> - </div> - </div> - <!-- - <div id="global" class="row">Global accessibility mode: - <a is="action-link" role="button" id="toggle_global" - aria-labelledby="global"></a> - </div> + <div> + <label for="filter-allow"> + Allow: + </label> + <input id="filter-allow" aria-describedby="allow_secondary"> + </div> + <div id="allow_secondary" class="secondary"> + Include these attributes. Empty attributes are skipped. + </div> - <div id="internal" class="row"> - Show internal accessibility tree instead of native: - <a is="action-link" role="button" id="toggle_internal" - aria-labelledby="internal"></a> + <div> + <label for="filter-allow-empty"> + Allow empty: + </label> + <input id="filter-allow-empty" + aria-describedby="allow-empty_secondary"> + </div> + <div id="allow-empty_secondary" class="secondary"> + Include these attributes, even if they are empty. + </div> + + <div> + <label for="filter-deny"> + Deny: + </label> + <input id="filter-deny" aria-describedby="deny_secondary"> + </div> + <div id="deny_secondary" class="secondary"> + Exclude these attributes. + </div> + + </div> </div> ---> + <h2>Chrome Native UI:</h2> <div id="browsers" class="list"> Set a delay, in milliseconds, before getting the native accessibility tree: diff --git a/chromium/chrome/browser/resources/accessibility/accessibility.js b/chromium/chrome/browser/resources/accessibility/accessibility.js index e5f19928733..7db0aafd5e0 100644 --- a/chromium/chrome/browser/resources/accessibility/accessibility.js +++ b/chromium/chrome/browser/resources/accessibility/accessibility.js @@ -57,15 +57,24 @@ cr.define('accessibility', function() { const tree = $(id + ':tree'); // If the tree is visible, request a new tree with the updated mode. const shouldRequestTree = !!tree && tree.style.display != 'none'; - chrome.send('toggleAccessibility', [ - String(data.processId), String(data.routeId), mode, - String(shouldRequestTree) - ]); + chrome.send('toggleAccessibility', [{ + 'processId': data.processId, + 'routeId': data.routeId, + 'modeId': mode, + 'shouldRequestTree': shouldRequestTree + }]); } function requestTree(data, element) { + const allow = $('filter-allow').value; + const allowEmpty = $('filter-allow-empty').value; + const deny = $('filter-deny').value; + window.localStorage['chrome-accessibility-filter-allow'] = allow; + window.localStorage['chrome-accessibility-filter-allow-empty'] = allowEmpty; + window.localStorage['chrome-accessibility-filter-deny'] = deny; + // The calling |element| is a button with an id of the format - // <treeId>:<requestType>, where requestType is one of 'showTree', + // <treeId>:<requestType>, where requestType is one of 'showOrRefreshTree', // 'copyTree'. Send the request type to C++ so is calls the corresponding // function with the result. const requestType = element.id.split(':')[1]; @@ -73,12 +82,21 @@ cr.define('accessibility', function() { const delay = $('native_ui_delay').value; setTimeout(() => { chrome.send( - 'requestNativeUITree', [String(data.sessionId), requestType]); + 'requestNativeUITree', [{ + 'sessionId': data.sessionId, + 'requestType': requestType, + 'filters': + {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny} + }]); }, delay); } else { chrome.send( - 'requestWebContentsTree', - [String(data.processId), String(data.routeId), requestType]); + 'requestWebContentsTree', [{ + 'processId': data.processId, + 'routeId': data.routeId, + 'requestType': requestType, + 'filters': {'allow': allow, 'allowEmpty': allowEmpty, 'deny': deny} + }]); } } @@ -91,7 +109,7 @@ cr.define('accessibility', function() { bindCheckbox('text', data['text']); bindCheckbox('screenreader', data['screenreader']); bindCheckbox('html', data['html']); - bindCheckbox('label_images', data['label_images']); + bindCheckbox('label_images', data['labelImages']); bindCheckbox('internal', data['internal']); $('pages').textContent = ''; @@ -105,6 +123,15 @@ cr.define('accessibility', function() { for (let i = 0; i < browsers.length; i++) { addToBrowsersList(browsers[i]); } + + // Cache filters so they're easily accessible on page refresh. + const allow = window.localStorage['chrome-accessibility-filter-allow']; + const allowEmpty = + window.localStorage['chrome-accessibility-filter-allow-empty']; + const deny = window.localStorage['chrome-accessibility-filter-deny']; + $('filter-allow').value = allow ? allow : '*'; + $('filter-allow-empty').value = allowEmpty ? allowEmpty : ''; + $('filter-deny').value = deny ? deny : ''; } function bindCheckbox(name, value) { @@ -116,7 +143,8 @@ cr.define('accessibility', function() { $(name).labels[0].classList.add('disabled'); } $(name).addEventListener('change', function() { - chrome.send('setGlobalFlag', [name, $(name).checked]); + chrome.send( + 'setGlobalFlag', [{'flagName': name, 'enabled': $(name).checked}]); document.location.reload(); }); } @@ -157,7 +185,7 @@ cr.define('accessibility', function() { if (data.type == 'page') { const siteInfo = document.createElement('div'); - const properties = ['favicon_url', 'name', 'url']; + const properties = ['faviconUrl', 'name', 'url']; for (let j = 0; j < properties.length; j++) { siteInfo.appendChild(formatValue(data, properties[j])); } @@ -169,7 +197,7 @@ cr.define('accessibility', function() { row.appendChild(createModeElement(AXMode.kScreenReader, data, 'web')); row.appendChild(createModeElement(AXMode.kHTML, data, 'web')); row.appendChild( - createModeElement(AXMode.kLabelImages, data, 'label_images')); + createModeElement(AXMode.kLabelImages, data, 'labelImages')); } else { const siteInfo = document.createElement('span'); siteInfo.appendChild(formatValue(data, 'name')); @@ -200,7 +228,7 @@ cr.define('accessibility', function() { function formatValue(data, property) { const value = data[property]; - if (property == 'favicon_url') { + if (property == 'faviconUrl') { const faviconElement = document.createElement('img'); if (value) { faviconElement.src = value; @@ -245,7 +273,7 @@ cr.define('accessibility', function() { } function createModeElement(mode, data, globalStateName) { - const currentMode = data['a11y_mode']; + const currentMode = data['a11yMode']; const link = document.createElement('a', 'action-link'); link.setAttribute('role', 'button'); @@ -282,7 +310,7 @@ cr.define('accessibility', function() { } else { show.textContent = 'Show accessibility tree'; } - show.id = id + ':showTree'; + show.id = id + ':showOrRefreshTree'; show.setAttribute('aria-expanded', String(opt_refresh)); show.addEventListener('click', requestTree.bind(this, data, show)); return show; @@ -293,7 +321,7 @@ cr.define('accessibility', function() { hide.textContent = 'Hide accessibility tree'; hide.id = id + ':hideTree'; hide.addEventListener('click', function() { - const show = $(id + ':showTree'); + const show = $(id + ':showOrRefreshTree'); show.textContent = 'Show accessibility tree'; show.setAttribute('aria-expanded', 'false'); show.focus(); @@ -335,7 +363,7 @@ cr.define('accessibility', function() { } // Called from C++ - function showTree(data) { + function showOrRefreshTree(data) { const id = getIdFromData(data); const row = $(id); if (!row) { @@ -344,7 +372,7 @@ cr.define('accessibility', function() { row.textContent = ''; formatRow(row, data); - $(id + ':hideTree').focus(); + $(id + ':showOrRefreshTree').focus(); } // Called from C++ @@ -371,11 +399,11 @@ cr.define('accessibility', function() { console.error('Unable to copy accessibility tree.', data.error); } - const tree = $(id + ':tree'); // If the tree is currently shown, update it since it may have changed. if (tree && tree.style.display != 'none') { - showTree(data); + showOrRefreshTree(data); + $(id + ':copyTree').focus(); } } @@ -401,7 +429,11 @@ cr.define('accessibility', function() { } // These are the functions we export so they can be called from C++. - return {copyTree: copyTree, initialize: initialize, showTree: showTree}; + return { + copyTree: copyTree, + initialize: initialize, + showOrRefreshTree: showOrRefreshTree + }; }); document.addEventListener('DOMContentLoaded', accessibility.initialize); |