browser_toolbox_keyboard_navigation_notification_box.js (1803B)
1 /* Any copyright is dedicated to the Public Domain. 2 * http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests keyboard navigation of the DevTools notification box. 7 8 // The test page attempts to load a stylesheet at an invalid URL which will 9 // trigger a devtools notification to show up on top of the window. 10 const TEST_PAGE = `<link rel="stylesheet" type="text/css" href="http://mochi.test:1234/invalid.port">`; 11 const TEST_URL = `data:text/html;charset=utf8,${TEST_PAGE}`; 12 13 add_task(async function () { 14 info("Create a test tab and open the toolbox"); 15 const toolbox = await openNewTabAndToolbox(TEST_URL, "styleeditor"); 16 const doc = toolbox.doc; 17 18 info("Wait until the notification box displays the stylesheet warning"); 19 const notificationBox = await waitFor(() => 20 doc.querySelector(".notificationbox") 21 ); 22 23 ok( 24 notificationBox.querySelector(".notification"), 25 "A notification is rendered" 26 ); 27 28 const toolbar = doc.querySelector(".devtools-tabbar"); 29 const tabButtons = toolbar.querySelectorAll(".devtools-tab, button"); 30 31 // Put the keyboard focus onto the first tab button. 32 tabButtons[0].focus(); 33 is(doc.activeElement.id, tabButtons[0].id, "First tab button is focused."); 34 35 // Move the focus to the notification box. 36 info("Send a shift+tab key event to focus the previous focusable element"); 37 EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }); 38 is( 39 doc.activeElement, 40 notificationBox.querySelector(".messageCloseButton"), 41 "The focus is on the close button of the notification" 42 ); 43 44 info("Send a vk_space key event to click on the close button"); 45 EventUtils.synthesizeKey("VK_SPACE"); 46 47 info("Wait until the notification is removed"); 48 await waitUntil(() => !notificationBox.querySelector(".notificationbox")); 49 });