Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(99)

Side by Side Diff: chrome/browser/resources/chromeos/chromevox/common/dom_util.js

Issue 1362223003: Improve braille related message descriptions and clean up message handling in Chromevox. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@inputtypeexception
Patch Set: Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview A collection of JavaScript utilities used to simplify working 6 * @fileoverview A collection of JavaScript utilities used to simplify working
7 * with the DOM. 7 * with the DOM.
8 */ 8 */
9 9
10 10
(...skipping 17 matching lines...) Expand all
28 }; 28 };
29 29
30 30
31 /** 31 /**
32 * Note: If you are adding a new mapping, the new message identifier needs a 32 * Note: If you are adding a new mapping, the new message identifier needs a
33 * corresponding braille message. For example, a message id 'tag_button' 33 * corresponding braille message. For example, a message id 'tag_button'
34 * requires another message 'tag_button_brl' within messages.js. 34 * requires another message 'tag_button_brl' within messages.js.
35 * @type {Object} 35 * @type {Object}
36 */ 36 */
37 cvox.DomUtil.INPUT_TYPE_TO_INFORMATION_TABLE_MSG = { 37 cvox.DomUtil.INPUT_TYPE_TO_INFORMATION_TABLE_MSG = {
38 'button' : 'input_type_button', 38 'button' : 'aria_role_button',
39 'checkbox' : 'input_type_checkbox', 39 'checkbox' : 'aria_role_checkbox',
40 'color' : 'input_type_color', 40 'color' : 'input_type_color',
41 'datetime' : 'input_type_datetime', 41 'datetime' : 'input_type_datetime',
42 'datetime-local' : 'input_type_datetime_local', 42 'datetime-local' : 'input_type_datetime_local',
43 'date' : 'input_type_date', 43 'date' : 'input_type_date',
44 'email' : 'input_type_email', 44 'email' : 'input_type_email',
45 'file' : 'input_type_file', 45 'file' : 'input_type_file',
46 'image' : 'input_type_image', 46 'image' : 'aria_role_button',
47 'month' : 'input_type_month', 47 'month' : 'input_type_month',
48 'number' : 'input_type_number', 48 'number' : 'input_type_number',
49 'password' : 'input_type_password', 49 'password' : 'input_type_password',
50 'radio' : 'input_type_radio', 50 'radio' : 'aria_role_radio',
dmazzoni 2015/09/25 16:23:35 This is another example. I think it'd be better if
51 'range' : 'input_type_range', 51 'range' : 'aria_role_slider',
52 'reset' : 'input_type_reset', 52 'reset' : 'input_type_reset',
53 'search' : 'input_type_search', 53 'search' : 'input_type_search',
54 'submit' : 'input_type_submit', 54 'submit' : 'aria_role_button',
55 'tel' : 'input_type_tel', 55 'tel' : 'input_type_number',
56 'text' : 'input_type_text', 56 'text' : 'input_type_text',
57 'url' : 'input_type_url', 57 'url' : 'input_type_url',
58 'week' : 'input_type_week' 58 'week' : 'input_type_week'
59 }; 59 };
60 60
61 61
62 /** 62 /**
63 * Note: If you are adding a new mapping, the new message identifier needs a 63 * Note: If you are adding a new mapping, the new message identifier needs a
64 * corresponding braille message. For example, a message id 'tag_button' 64 * corresponding braille message. For example, a message id 'tag_button'
65 * requires another message 'tag_button_brl' within messages.js. 65 * requires another message 'tag_button_brl' within messages.js.
66 * @type {Object} 66 * @type {Object}
67 */ 67 */
68 cvox.DomUtil.TAG_TO_INFORMATION_TABLE_VERBOSE_MSG = { 68 cvox.DomUtil.TAG_TO_INFORMATION_TABLE_VERBOSE_MSG = {
69 'A' : 'tag_link', 69 'A' : 'tag_link',
70 'ARTICLE' : 'tag_article', 70 'ARTICLE' : 'tag_article',
71 'ASIDE' : 'tag_aside', 71 'ASIDE' : 'tag_aside',
72 'AUDIO' : 'tag_audio', 72 'AUDIO' : 'tag_audio',
73 'BUTTON' : 'tag_button', 73 'BUTTON' : 'aria_role_button',
74 'FOOTER' : 'tag_footer', 74 'FOOTER' : 'tag_footer',
75 'H1' : 'tag_h1', 75 'H1' : 'tag_h1',
76 'H2' : 'tag_h2', 76 'H2' : 'tag_h2',
77 'H3' : 'tag_h3', 77 'H3' : 'tag_h3',
78 'H4' : 'tag_h4', 78 'H4' : 'tag_h4',
79 'H5' : 'tag_h5', 79 'H5' : 'tag_h5',
80 'H6' : 'tag_h6', 80 'H6' : 'tag_h6',
81 'HEADER' : 'tag_header', 81 'HEADER' : 'tag_header',
82 'HGROUP' : 'tag_hgroup', 82 'HGROUP' : 'tag_hgroup',
83 'LI' : 'tag_li', 83 'LI' : 'tag_li',
84 'MARK' : 'tag_mark', 84 'MARK' : 'tag_mark',
85 'NAV' : 'tag_nav', 85 'NAV' : 'tag_nav',
86 'OL' : 'tag_ol', 86 'OL' : 'tag_ol',
87 'SECTION' : 'tag_section', 87 'SECTION' : 'tag_section',
88 'SELECT' : 'tag_select', 88 'SELECT' : 'tag_select',
89 'TABLE' : 'tag_table', 89 'TABLE' : 'tag_table',
90 'TEXTAREA' : 'tag_textarea', 90 'TEXTAREA' : 'tag_textarea',
91 'TIME' : 'tag_time', 91 'TIME' : 'tag_time',
92 'UL' : 'tag_ul', 92 'UL' : 'tag_ul',
93 'VIDEO' : 'tag_video' 93 'VIDEO' : 'tag_video'
94 }; 94 };
95 95
96 /** 96 /**
97 * ChromeVox does not speak the omitted tags. 97 * ChromeVox does not speak the omitted tags.
98 * @type {Object} 98 * @type {Object}
99 */ 99 */
100 cvox.DomUtil.TAG_TO_INFORMATION_TABLE_BRIEF_MSG = { 100 cvox.DomUtil.TAG_TO_INFORMATION_TABLE_BRIEF_MSG = {
101 'AUDIO' : 'tag_audio', 101 'AUDIO' : 'tag_audio',
102 'BUTTON' : 'tag_button', 102 'BUTTON' : 'aria_role_button',
103 'SELECT' : 'tag_select', 103 'SELECT' : 'tag_select',
104 'TABLE' : 'tag_table', 104 'TABLE' : 'tag_table',
105 'TEXTAREA' : 'tag_textarea', 105 'TEXTAREA' : 'tag_textarea',
106 'VIDEO' : 'tag_video' 106 'VIDEO' : 'tag_video'
107 }; 107 };
108 108
109 /** 109 /**
110 * These tags are treated as text formatters. 110 * These tags are treated as text formatters.
111 * @type {Array<string>} 111 * @type {Array<string>}
112 */ 112 */
(...skipping 752 matching lines...) Expand 10 before | Expand all | Expand 10 after
865 if (node.constructor == HTMLSelectElement) { 865 if (node.constructor == HTMLSelectElement) {
866 node = /** @type {HTMLSelectElement} */(node); 866 node = /** @type {HTMLSelectElement} */(node);
867 var value = ''; 867 var value = '';
868 var start = node.selectedOptions ? node.selectedOptions[0] : null; 868 var start = node.selectedOptions ? node.selectedOptions[0] : null;
869 var end = node.selectedOptions ? 869 var end = node.selectedOptions ?
870 node.selectedOptions[node.selectedOptions.length - 1] : null; 870 node.selectedOptions[node.selectedOptions.length - 1] : null;
871 // TODO(dtseng): Keeping this stateless means we describe the start and end 871 // TODO(dtseng): Keeping this stateless means we describe the start and end
872 // of the selection only since we don't know which was added or 872 // of the selection only since we don't know which was added or
873 // removed. Once we keep the previous selection, we can read the diff. 873 // removed. Once we keep the previous selection, we can read the diff.
874 if (start && end && start != end) { 874 if (start && end && start != end) {
875 value = cvox.ChromeVox.msgs.getMsg( 875 value = Msgs.getMsg(
876 'selected_options_value', [start.text, end.text]); 876 'selected_options_value', [start.text, end.text]);
877 } else if (start) { 877 } else if (start) {
878 value = start.text + ''; 878 value = start.text + '';
879 } 879 }
880 return value; 880 return value;
881 } 881 }
882 882
883 if (node.constructor == HTMLTextAreaElement) { 883 if (node.constructor == HTMLTextAreaElement) {
884 return node.value; 884 return node.value;
885 } 885 }
(...skipping 420 matching lines...) Expand 10 before | Expand all | Expand 10 after
1306 * ARIA roles are given priority; if there is no ARIA role set, the role 1306 * ARIA roles are given priority; if there is no ARIA role set, the role
1307 * will be determined by the HTML tag for the node. 1307 * will be determined by the HTML tag for the node.
1308 * 1308 *
1309 * @param {Node} targetNode The node to get the role name for. 1309 * @param {Node} targetNode The node to get the role name for.
1310 * @param {number} verbosity The verbosity setting to use. 1310 * @param {number} verbosity The verbosity setting to use.
1311 * @return {string} The role name for the targetNode. 1311 * @return {string} The role name for the targetNode.
1312 */ 1312 */
1313 cvox.DomUtil.getRole = function(targetNode, verbosity) { 1313 cvox.DomUtil.getRole = function(targetNode, verbosity) {
1314 var roleMsg = cvox.DomUtil.getRoleMsg(targetNode, verbosity) || ''; 1314 var roleMsg = cvox.DomUtil.getRoleMsg(targetNode, verbosity) || '';
1315 var role = roleMsg && roleMsg != ' ' ? 1315 var role = roleMsg && roleMsg != ' ' ?
1316 cvox.ChromeVox.msgs.getMsg(roleMsg) : ''; 1316 Msgs.getMsg(roleMsg) : '';
1317 return role ? role : roleMsg; 1317 return role ? role : roleMsg;
1318 }; 1318 };
1319 1319
1320 1320
1321 /** 1321 /**
1322 * Count the number of items in a list node. 1322 * Count the number of items in a list node.
1323 * 1323 *
1324 * @param {Node} targetNode The list node. 1324 * @param {Node} targetNode The list node.
1325 * @return {number} The number of items in the list. 1325 * @return {number} The number of items in the list.
1326 */ 1326 */
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
1374 'radio-true': 'radio_selected_state', 1374 'radio-true': 'radio_selected_state',
1375 'radio-false': 'radio_unselected_state' }; 1375 'radio-false': 'radio_unselected_state' };
1376 var msgId = INPUT_MSGS[targetNode.type + '-' + !!targetNode.checked]; 1376 var msgId = INPUT_MSGS[targetNode.type + '-' + !!targetNode.checked];
1377 if (msgId) { 1377 if (msgId) {
1378 info.push([msgId]); 1378 info.push([msgId]);
1379 } 1379 }
1380 } 1380 }
1381 } else if (targetNode.tagName == 'SELECT') { 1381 } else if (targetNode.tagName == 'SELECT') {
1382 if (targetNode.selectedOptions && targetNode.selectedOptions.length <= 1) { 1382 if (targetNode.selectedOptions && targetNode.selectedOptions.length <= 1) {
1383 info.push(['list_position', 1383 info.push(['list_position',
1384 cvox.ChromeVox.msgs.getNumber(targetNode.selectedIndex + 1), 1384 Msgs.getNumber(targetNode.selectedIndex + 1),
1385 cvox.ChromeVox.msgs.getNumber(targetNode.options.length)]); 1385 Msgs.getNumber(targetNode.options.length)]);
1386 } else { 1386 } else {
1387 info.push(['selected_options_state', 1387 info.push(['selected_options_state',
1388 cvox.ChromeVox.msgs.getNumber(targetNode.selectedOptions.length)]); 1388 Msgs.getNumber(targetNode.selectedOptions.length)]);
1389 } 1389 }
1390 } else if (targetNode.tagName == 'UL' || 1390 } else if (targetNode.tagName == 'UL' ||
1391 targetNode.tagName == 'OL' || 1391 targetNode.tagName == 'OL' ||
1392 role == 'list') { 1392 role == 'list') {
1393 info.push(['list_with_items_not_pluralized', 1393 info.push(['list_with_items_not_pluralized',
1394 cvox.ChromeVox.msgs.getNumber( 1394 Msgs.getNumber(
1395 cvox.DomUtil.getListLength(targetNode))]); 1395 cvox.DomUtil.getListLength(targetNode))]);
1396 } 1396 }
1397 1397
1398 if (cvox.DomUtil.isDisabled(targetNode)) { 1398 if (cvox.DomUtil.isDisabled(targetNode)) {
1399 info.push(['aria_disabled_true']); 1399 info.push(['aria_disabled_true']);
1400 } 1400 }
1401 1401
1402 if (targetNode.accessKey) { 1402 if (targetNode.accessKey) {
1403 info.push(['access_key', targetNode.accessKey]); 1403 info.push(['access_key', targetNode.accessKey]);
1404 } 1404 }
(...skipping 525 matching lines...) Expand 10 before | Expand all | Expand 10 after
1930 1930
1931 /** 1931 /**
1932 * Get a string containing the currently selected link's URL. 1932 * Get a string containing the currently selected link's URL.
1933 * @param {Node} node The link from which URL needs to be extracted. 1933 * @param {Node} node The link from which URL needs to be extracted.
1934 * @return {string} The value of the URL. 1934 * @return {string} The value of the URL.
1935 */ 1935 */
1936 cvox.DomUtil.getLinkURL = function(node) { 1936 cvox.DomUtil.getLinkURL = function(node) {
1937 if (node.tagName == 'A') { 1937 if (node.tagName == 'A') {
1938 if (node.getAttribute('href')) { 1938 if (node.getAttribute('href')) {
1939 if (cvox.DomUtil.isInternalLink(node)) { 1939 if (cvox.DomUtil.isInternalLink(node)) {
1940 return cvox.ChromeVox.msgs.getMsg('internal_link'); 1940 return Msgs.getMsg('internal_link');
1941 } else { 1941 } else {
1942 return node.getAttribute('href'); 1942 return node.getAttribute('href');
1943 } 1943 }
1944 } else { 1944 } else {
1945 return ''; 1945 return '';
1946 } 1946 }
1947 } else if (cvox.AriaUtil.getRoleName(node) == 1947 } else if (cvox.AriaUtil.getRoleName(node) ==
1948 cvox.ChromeVox.msgs.getMsg('aria_role_link')) { 1948 Msgs.getMsg('tag_link')) {
1949 return cvox.ChromeVox.msgs.getMsg('unknown_link'); 1949 return Msgs.getMsg('unknown_link');
1950 } 1950 }
1951 1951
1952 return ''; 1952 return '';
1953 }; 1953 };
1954 1954
1955 1955
1956 /** 1956 /**
1957 * Checks if a given node is inside a table and returns the table node if it is 1957 * Checks if a given node is inside a table and returns the table node if it is
1958 * @param {Node} node The node. 1958 * @param {Node} node The node.
1959 * @param {{allowCaptions: (undefined|boolean)}=} kwargs Optional named args. 1959 * @param {{allowCaptions: (undefined|boolean)}=} kwargs Optional named args.
(...skipping 639 matching lines...) Expand 10 before | Expand all | Expand 10 after
2599 var describedNode = document.getElementById(describedById); 2599 var describedNode = document.getElementById(describedById);
2600 if (describedNode) { 2600 if (describedNode) {
2601 desc += ' ' + cvox.DomUtil.getName( 2601 desc += ' ' + cvox.DomUtil.getName(
2602 describedNode, true, true, true); 2602 describedNode, true, true, true);
2603 } 2603 }
2604 } 2604 }
2605 } 2605 }
2606 } 2606 }
2607 return desc; 2607 return desc;
2608 }; 2608 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698