Bug 1326659 - [devtools] Use button element to render close button in NotificationBox r=nchevobbe,yzen

Differential Revision: https://phabricator.services.mozilla.com/D98987

devtools/client/framework/test/browser.ini

@@ -99,6 +99,7 @@ skip-if = fission # Disable frequent fission intermittents Bug 1675020
 [browser_toolbox_hosts_telemetry.js]
 [browser_toolbox_keyboard_navigation.js]
 skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+[browser_toolbox_keyboard_navigation_notification_box.js]
 [browser_toolbox_meatball.js]
 [browser_toolbox_options.js]
 [browser_toolbox_options_multiple_tabs.js]

devtools/client/framework/test/browser_toolbox_keyboard_navigation_notification_box.js

@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests keyboard navigation of the DevTools notification box.
+
+// The test page attempts to load a stylesheet at an invalid URL which will
+// trigger a devtools notification to show up on top of the window.
+const TEST_PAGE = `<link rel="stylesheet" type="text/css" href="http://mochi.test:1234/invalid.port">`;
+const TEST_URL = `data:text/html;charset=utf8,${TEST_PAGE}`;
+
+add_task(async function() {
+  info("Create a test tab and open the toolbox");
+  const toolbox = await openNewTabAndToolbox(TEST_URL, "styleeditor");
+  const doc = toolbox.doc;
+
+  info("Wait until the notification box displays the stylesheet warning");
+  const notificationBox = await waitFor(() =>
+    doc.querySelector(".notificationbox")
+  );
+
+  ok(
+    notificationBox.querySelector(".notification"),
+    "A notification is rendered"
+  );
+
+  const toolbar = doc.querySelector(".devtools-tabbar");
+  const tabButtons = toolbar.querySelectorAll(".devtools-tab, button");
+
+  // Put the keyboard focus onto the first tab button.
+  tabButtons[0].focus();
+  is(doc.activeElement.id, tabButtons[0].id, "First tab button is focused.");
+
+  // Move the focus to the notification box.
+  info("Send a shift+tab key event to focus the previous focusable element");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  is(
+    doc.activeElement,
+    notificationBox.querySelector(".messageCloseButton"),
+    "The focus is on the close button of the notification"
+  );
+
+  info("Send a vk_space key event to click on the close button");
+  EventUtils.synthesizeKey("VK_SPACE");
+
+  info("Wait until the notification is removed");
+  await waitUntil(() => !notificationBox.querySelector(".notificationbox"));
+});

devtools/client/shared/components/NotificationBox.css

@@ -93,6 +93,7 @@
   background-color: transparent;
   background-repeat: no-repeat;
   border-radius: 2px;
+  border-width: 0;
   -moz-context-properties: fill;
   fill: currentColor;
 }

devtools/client/shared/components/NotificationBox.js

@@ -240,7 +240,7 @@ class NotificationBox extends Component {
         notification.buttons.map(props =>
           this.renderButton(props, notification)
         ),
-        div({
+        button({
           className: "messageCloseButton",
           title: this.props.closeButtonTooltip,
           onClick: this.close.bind(this, notification),