tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_accessibility_node_tabbing_order_highlighter.js (3225B)

      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 // Checks for the NodeTabbingOrderHighlighter.
      8 
      9 add_task(async function () {
     10  await BrowserTestUtils.withNewTab(
     11    {
     12      gBrowser,
     13      url: MAIN_DOMAIN + "doc_accessibility_infobar.html",
     14    },
     15    async function (browser) {
     16      await SpecialPowers.spawn(browser, [], async function () {
     17        const { require } = ChromeUtils.importESModule(
     18          "resource://devtools/shared/loader/Loader.sys.mjs"
     19        );
     20        const {
     21          HighlighterEnvironment,
     22        } = require("resource://devtools/server/actors/highlighters.js");
     23        const {
     24          NodeTabbingOrderHighlighter,
     25        } = require("resource://devtools/server/actors/highlighters/node-tabbing-order.js");
     26 
     27        // Checks for updated content for an infobar.
     28        async function testShowHide(highlighter, node, index) {
     29          const shown = highlighter.show(node, { index });
     30          const infoBarText = highlighter.getElement(
     31            "tabbing-order-infobar-text"
     32          );
     33 
     34          ok(shown, "Highlighter is shown.");
     35          is(
     36            parseInt(infoBarText.getTextContent(), 10),
     37            index,
     38            "infobar text content is correct"
     39          );
     40 
     41          highlighter.hide();
     42        }
     43 
     44        // Start testing. First, create highlighter environment and initialize.
     45        const env = new HighlighterEnvironment();
     46        env.initFromWindow(content.window);
     47 
     48        // Wait for loading highlighter environment content to complete before
     49        // creating the highlighter.
     50        await new Promise(resolve => {
     51          const doc = env.document;
     52 
     53          function onContentLoaded() {
     54            if (
     55              doc.readyState === "interactive" ||
     56              doc.readyState === "complete"
     57            ) {
     58              resolve();
     59            } else {
     60              doc.addEventListener("DOMContentLoaded", onContentLoaded, {
     61                once: true,
     62              });
     63            }
     64          }
     65 
     66          onContentLoaded();
     67        });
     68 
     69        // Now, we can test the Infobar's index content.
     70        const node = content.document.createElement("div");
     71        content.document.body.append(node);
     72        const highlighter = new NodeTabbingOrderHighlighter(env);
     73        await highlighter.isReady;
     74 
     75        info("Showing Node tabbing order highlighter with index");
     76        await testShowHide(highlighter, node, 1);
     77 
     78        info("Showing Node tabbing order highlighter with new index");
     79        await testShowHide(highlighter, node, 9);
     80 
     81        info(
     82          "Showing and highlighting focused node with the Node tabbing order highlighter"
     83        );
     84        highlighter.show(node, { index: 1 });
     85        highlighter.updateFocus(true);
     86        const { classList } = highlighter.getElement("tabbing-order-root");
     87        ok(classList.contains("focused"), "Focus styling is applied");
     88        highlighter.updateFocus(false);
     89        ok(!classList.contains("focused"), "Focus styling is removed");
     90        highlighter.hide();
     91      });
     92    }
     93  );
     94 });