tor-browser

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

browser_accessibility_tabbing_order_highlighter.js (3495B)

      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 TabbingOrderHighlighter.
      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          TabbingOrderHighlighter,
     25        } = require("resource://devtools/server/actors/highlighters/tabbing-order.js");
     26 
     27        // Start testing. First, create highlighter environment and initialize.
     28        const env = new HighlighterEnvironment();
     29        env.initFromWindow(content.window);
     30 
     31        // Wait for loading highlighter environment content to complete before
     32        // creating the highlighter.
     33        await new Promise(resolve => {
     34          const doc = env.document;
     35 
     36          function onContentLoaded() {
     37            if (
     38              doc.readyState === "interactive" ||
     39              doc.readyState === "complete"
     40            ) {
     41              resolve();
     42            } else {
     43              doc.addEventListener("DOMContentLoaded", onContentLoaded, {
     44                once: true,
     45              });
     46            }
     47          }
     48 
     49          onContentLoaded();
     50        });
     51 
     52        // Now, we can test the Infobar's index content.
     53        const node = content.document.createElement("div");
     54        content.document.body.append(node);
     55        const highlighter = new TabbingOrderHighlighter(env);
     56        await highlighter.isReady;
     57 
     58        info("Showing tabbing order highlighter for all tabbable nodes");
     59        const { contentDOMReference, index } = await highlighter.show(
     60          content.document,
     61          {
     62            index: 0,
     63          }
     64        );
     65 
     66        is(
     67          contentDOMReference,
     68          null,
     69          "No current element when at the end of the tab order"
     70        );
     71        is(index, 2, "Current index is correct");
     72        is(
     73          highlighter._highlighters.size,
     74          2,
     75          "Number of node tabbing order highlighters is correct"
     76        );
     77        for (let i = 0; i < highlighter._highlighters.size; i++) {
     78          const nodeHighlighter = [...highlighter._highlighters.values()][i];
     79          const infoBarText = nodeHighlighter.getElement(
     80            "tabbing-order-infobar-text"
     81          );
     82 
     83          is(
     84            parseInt(infoBarText.getTextContent(), 10),
     85            i + 1,
     86            "infobar text content is correct"
     87          );
     88        }
     89 
     90        info("Showing focus highlighting");
     91        const input = content.document.getElementById("input");
     92        highlighter.updateFocus({ node: input, focused: true });
     93        const nodeHighlighter = highlighter._highlighters.get(input);
     94        const { classList } = nodeHighlighter.getElement("tabbing-order-root");
     95        ok(classList.contains("focused"), "Focus styling is applied");
     96        highlighter.updateFocus({ node: input, focused: false });
     97        ok(!classList.contains("focused"), "Focus styling is removed");
     98 
     99        highlighter.hide();
    100      });
    101    }
    102  );
    103 });