Chromium Code Reviews| OLD | NEW |
|---|---|
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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 Loading... | |
| 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 }; |
| OLD | NEW |