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 |