browser_treeupdate_image.js (6961B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 /* import-globals-from ../../mochitest/role.js */ 8 loadScripts({ name: "role.js", dir: MOCHITESTS_DIR }); 9 10 const IMG_ID = "img"; 11 const ALT_TEXT = "some-text"; 12 const ARIA_LABEL = "some-label"; 13 14 // Verify that granting alt text adds the graphic accessible. 15 addAccessibleTask( 16 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" alt=""/>`, 17 async function (browser, accDoc) { 18 // Test initial state; the img has empty alt text so it should not be in the tree. 19 const acc = findAccessibleChildByID(accDoc, IMG_ID); 20 ok(!acc, "Image has no Accessible"); 21 22 // Add the alt text. The graphic should have been inserted into the tree. 23 info(`Adding alt text "${ALT_TEXT}" to img id '${IMG_ID}'`); 24 const shown = waitForEvent(EVENT_SHOW, IMG_ID); 25 await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT); 26 await shown; 27 let tree = { 28 role: ROLE_GRAPHIC, 29 name: ALT_TEXT, 30 children: [], 31 }; 32 testAccessibleTree(acc, tree); 33 }, 34 { chrome: true, iframe: true, remoteIframe: true } 35 ); 36 37 // Verify that the graphic accessible exists even with a missing alt attribute. 38 addAccessibleTask( 39 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png"/>`, 40 async function (browser, accDoc) { 41 // Test initial state; the img has no alt attribute so the name is empty. 42 const acc = findAccessibleChildByID(accDoc, IMG_ID); 43 let tree = { 44 role: ROLE_GRAPHIC, 45 name: null, 46 children: [], 47 }; 48 testAccessibleTree(acc, tree); 49 50 // Add the alt text. The graphic should still be present in the tree. 51 info(`Adding alt attribute with text "${ALT_TEXT}" to id ${IMG_ID}`); 52 const shown = waitForEvent(EVENT_NAME_CHANGE, IMG_ID); 53 await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT); 54 await shown; 55 tree = { 56 role: ROLE_GRAPHIC, 57 name: ALT_TEXT, 58 children: [], 59 }; 60 testAccessibleTree(acc, tree); 61 }, 62 { chrome: true, iframe: true, remoteIframe: true } 63 ); 64 65 // Verify that removing alt text removes the graphic accessible. 66 addAccessibleTask( 67 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" alt="${ALT_TEXT}"/>`, 68 async function (browser, accDoc) { 69 // Test initial state; the img has alt text so it should be in the tree. 70 let acc = findAccessibleChildByID(accDoc, IMG_ID); 71 let tree = { 72 role: ROLE_GRAPHIC, 73 name: ALT_TEXT, 74 children: [], 75 }; 76 testAccessibleTree(acc, tree); 77 78 // Set the alt text empty. The graphic should have been removed from the tree. 79 info(`Setting empty alt text for img id ${IMG_ID}`); 80 const hidden = waitForEvent(EVENT_HIDE, acc); 81 await invokeContentTask(browser, [IMG_ID, "alt", ""], (id, attr, value) => { 82 let elm = content.document.getElementById(id); 83 elm.setAttribute(attr, value); 84 }); 85 await hidden; 86 acc = findAccessibleChildByID(accDoc, IMG_ID); 87 ok(!acc, "Image has no Accessible"); 88 }, 89 { chrome: true, iframe: true, remoteIframe: true } 90 ); 91 92 // Verify that the presence of an aria-label creates an accessible, even if 93 // there is no alt text. 94 addAccessibleTask( 95 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" aria-label="${ARIA_LABEL}" alt=""/>`, 96 async function (browser, accDoc) { 97 // Test initial state; the img has empty alt text, but it does have an 98 // aria-label, so it should be in the tree. 99 const acc = findAccessibleChildByID(accDoc, IMG_ID); 100 let tree = { 101 role: ROLE_GRAPHIC, 102 name: ARIA_LABEL, 103 children: [], 104 }; 105 testAccessibleTree(acc, tree); 106 107 // Add the alt text. The graphic should still be in the tree. 108 info(`Adding alt text "${ALT_TEXT}" to img id '${IMG_ID}'`); 109 await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT); 110 tree = { 111 role: ROLE_GRAPHIC, 112 name: ARIA_LABEL, 113 children: [], 114 }; 115 testAccessibleTree(acc, tree); 116 }, 117 { chrome: true, iframe: true, remoteIframe: true } 118 ); 119 120 // Verify that the presence of a click listener results in the graphic 121 // accessible's presence in the tree. 122 addAccessibleTask( 123 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" alt=""/>`, 124 async function (browser, accDoc) { 125 // Add a click listener to the img element. 126 info(`Adding click listener to img id '${IMG_ID}'`); 127 const shown = waitForEvent(EVENT_SHOW, IMG_ID); 128 await invokeContentTask(browser, [IMG_ID], id => { 129 content.document.getElementById(id).addEventListener("click", () => {}); 130 }); 131 await shown; 132 133 // Test initial state; the img has empty alt text, but it does have a click 134 // listener, so it should be in the tree. 135 let acc = findAccessibleChildByID(accDoc, IMG_ID); 136 let tree = { 137 role: ROLE_GRAPHIC, 138 name: null, 139 children: [], 140 }; 141 testAccessibleTree(acc, tree); 142 }, 143 { chrome: true, iframe: true, remoteIframe: true } 144 ); 145 146 // Verify that the presentation role prevents creation of the graphic accessible. 147 addAccessibleTask( 148 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" role="presentation"/>`, 149 async function (browser, accDoc) { 150 // Test initial state; the img is presentational and should not be in the tree. 151 const acc = findAccessibleChildByID(accDoc, IMG_ID); 152 ok(!acc, "Image has no Accessible"); 153 154 // Add some alt text. There should still be no accessible for the img in the tree. 155 info(`Adding alt attribute with text "${ALT_TEXT}" to id ${IMG_ID}`); 156 await invokeSetAttribute(browser, IMG_ID, "alt", ALT_TEXT); 157 ok(!acc, "Image has no Accessible"); 158 159 // Remove the presentation role. The accessible should be created. 160 info(`Removing presentation role from img id ${IMG_ID}`); 161 const shown = waitForEvent(EVENT_SHOW, IMG_ID); 162 await invokeSetAttribute(browser, IMG_ID, "role"); 163 await shown; 164 let tree = { 165 role: ROLE_GRAPHIC, 166 name: ALT_TEXT, 167 children: [], 168 }; 169 testAccessibleTree(acc, tree); 170 }, 171 { chrome: true, iframe: true, remoteIframe: true } 172 ); 173 174 // Verify that setting empty alt text on a hidden image does not crash. 175 // See Bug 1799208 for more info. 176 addAccessibleTask( 177 `<img id="${IMG_ID}" src="${MOCHITESTS_DIR}/moz.png" hidden/>`, 178 async function (browser, accDoc) { 179 // Test initial state; should be no accessible since img is hidden. 180 const acc = findAccessibleChildByID(accDoc, IMG_ID); 181 ok(!acc, "Image has no Accessible"); 182 183 // Add empty alt text. We shouldn't crash. 184 info(`Adding empty alt text "" to img id '${IMG_ID}'`); 185 await invokeContentTask(browser, [IMG_ID, "alt", ""], (id, attr, value) => { 186 let elm = content.document.getElementById(id); 187 elm.setAttribute(attr, value); 188 }); 189 ok(true, "Setting empty alt text on a hidden image did not crash"); 190 }, 191 { chrome: true, iframe: true, remoteIframe: true } 192 );