Bug 1570645 - devtools panels registered by extension should provide an aria-label. r=jdescottes a=lizzard
authorLuca Greco <lgreco@mozilla.com>
Thu, 05 Sep 2019 15:19:50 +0000
changeset 555034 d586c535354fab0eb451b693d778b71f61270cff
parent 555033 d9c4ede99bc12cbe6b7b8c3fc4ece00a13785abc
child 555035 621031e3cd33d1d7f8b2d8f82aada30661bb6be8
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, lizzard
bugs1570645
milestone70.0
Bug 1570645 - devtools panels registered by extension should provide an aria-label. r=jdescottes a=lizzard Differential Revision: https://phabricator.services.mozilla.com/D44677
browser/components/extensions/parent/ext-devtools-panels.js
browser/components/extensions/test/browser/browser_ext_devtools_panel.js
--- a/browser/components/extensions/parent/ext-devtools-panels.js
+++ b/browser/components/extensions/parent/ext-devtools-panels.js
@@ -137,16 +137,18 @@ class ParentDevToolsPanel extends BaseDe
     const extensionName = this.context.extension.name;
 
     this.toolbox.addAdditionalTool({
       id: this.id,
       extensionId: this.context.extension.id,
       url: WEBEXT_PANELS_URL,
       icon: icon,
       label: title,
+      // panelLabel is used to set the aria-label attribute (See Bug 1570645).
+      panelLabel: title,
       tooltip: `DevTools Panel added by "${extensionName}" add-on.`,
       isTargetSupported: target => target.isLocalTab,
       build: (window, toolbox) => {
         if (toolbox !== this.toolbox) {
           throw new Error(
             "Unexpected toolbox received on addAdditionalTool build property"
           );
         }
--- a/browser/components/extensions/test/browser/browser_ext_devtools_panel.js
+++ b/browser/components/extensions/test/browser/browser_ext_devtools_panel.js
@@ -279,25 +279,25 @@ add_task(async function test_devtools_pa
     "The preference branch for the extension should have been created"
   );
   is(
     prefBranch.getBoolPref("enabled", false),
     true,
     "The 'enabled' bool preference for the extension should be initially true"
   );
 
-  // Get the devtools panel id from the first item in the toolbox additional tools array.
-  const getPanelId = toolbox => {
+  // Get the devtools panel info for the first item in the toolbox additional tools array.
+  const getPanelInfo = toolbox => {
     let toolboxAdditionalTools = toolbox.getAdditionalTools();
     is(
       toolboxAdditionalTools.length,
       1,
       "Got the expected number of toolbox specific panel registered."
     );
-    return toolboxAdditionalTools[0].id;
+    return toolboxAdditionalTools[0];
   };
 
   // Test the devtools panel shown and hide events.
   const testPanelShowAndHide = async ({
     target,
     panelId,
     isFirstPanelLoad,
     expectedResults,
@@ -385,31 +385,31 @@ add_task(async function test_devtools_pa
 
       let toolboxAdditionalTools = toolbox.getAdditionalTools();
       is(
         toolboxAdditionalTools.length,
         1,
         "Got one extension devtools panel registered"
       );
 
-      let newPanelId = getPanelId(toolbox);
+      let newPanelId = getPanelInfo(toolbox).id;
       is(
         toolbox.visibleAdditionalTools.filter(toolId => toolId == newPanelId)
           .length,
         1,
         "Extension panel is listed in the visible additional tools"
       );
     }
   };
 
   // Wait that the devtools_page has created its devtools panel and retrieve its
   // panel id.
   let { toolbox, target } = await openToolboxForTab(tab);
   await extension.awaitMessage("devtools_panel_created");
-  let panelId = getPanelId(toolbox);
+  let panelId = getPanelInfo(toolbox).id;
 
   info("Test panel show and hide - first cycle");
   await testPanelShowAndHide({
     target,
     panelId,
     isFirstPanelLoad: true,
     expectedResults: {
       panelCreated: 1,
@@ -429,16 +429,31 @@ add_task(async function test_devtools_pa
       panelHidden: 2,
     },
   });
 
   // Go back to the extension devtools panel.
   await gDevTools.showToolbox(target, panelId);
   await extension.awaitMessage("devtools_panel_shown");
 
+  // Check that the aria-label has been set on the devtools panel.
+  const panelFrame = toolbox.doc.getElementById(
+    `toolbox-panel-iframe-${panelId}`
+  );
+  const panelInfo = getPanelInfo(toolbox);
+  ok(
+    panelInfo.panelLabel && panelInfo.panelLabel.length > 0,
+    "Expect the registered panel to include a non empty panelLabel property"
+  );
+  is(
+    panelFrame && panelFrame.getAttribute("aria-label"),
+    panelInfo.panelLabel,
+    "Got the expected aria-label on the extension panel frame"
+  );
+
   // Turn off the extension devtools page using the preference that enable/disable the
   // devtools page for a given installed WebExtension.
   await testExtensionDevToolsPref({
     toolbox,
     prefValue: false,
     oldPanelId: panelId,
   });
 
@@ -465,17 +480,17 @@ add_task(async function test_devtools_pa
   // devtools page for a given installed WebExtension.
   await testExtensionDevToolsPref({
     toolbox,
     prefValue: true,
   });
 
   // Test devtools panel is loaded correctly after being toggled and
   // devtools panel events has been fired as expected.
-  panelId = getPanelId(toolbox);
+  panelId = getPanelInfo(toolbox).id;
 
   info("Test panel show and hide - after disabling/enabling devtools_page");
   await testPanelShowAndHide({
     target,
     panelId,
     isFirstPanelLoad: true,
     expectedResults: {
       panelCreated: 1,