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 (4299B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Check "Show tabbing order" works as expected
      7 
      8 const TEST_URI = `https://example.com/document-builder.sjs?html=
      9    <button id=top-btn-1>Top level button before iframe</button>
     10    <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(`
     11      <button id=iframe-org-btn-1>in iframe button 1</button>
     12      <button id=iframe-org-btn-2>in iframe button 2</button>
     13    `)}"></iframe>
     14    <button id=top-btn-2>Top level button after iframe</button>
     15    <iframe src="https://example.net/document-builder.sjs?html=${encodeURIComponent(`
     16      <button id=iframe-net-btn-1>in iframe button 1</button>
     17    `)}"></iframe>`;
     18 
     19 add_task(async () => {
     20  const { doc, store, tab, toolbox } = await addTestTab(TEST_URI);
     21 
     22  const topLevelFrameHighlighterTestFront =
     23    await toolbox.target.getFront("highlighterTest");
     24 
     25  const frameTargets = toolbox.commands.targetCommand.getAllTargets([
     26    toolbox.commands.targetCommand.TYPES.FRAME,
     27  ]);
     28  const orgIframeTarget = frameTargets.find(t =>
     29    t.url.startsWith("https://example.org")
     30  );
     31  const netIframeTarget = frameTargets.find(t =>
     32    t.url.startsWith("https://example.net")
     33  );
     34 
     35  const orgIframeHighlighterTestFront = orgIframeTarget
     36    ? await orgIframeTarget.getFront("highlighterTest")
     37    : null;
     38  const netIframeHighlighterTestFront = netIframeTarget
     39    ? await netIframeTarget.getFront("highlighterTest")
     40    : null;
     41 
     42  let tabbingOrderHighlighterData =
     43    await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData();
     44  is(
     45    tabbingOrderHighlighterData.length,
     46    0,
     47    "Tabbing order is not visible at first"
     48  );
     49 
     50  info(`Click on "Show Tabbing Order" checkbox`);
     51  const tabbingOrderCheckbox = doc.getElementById(
     52    "devtools-display-tabbing-order-checkbox"
     53  );
     54  tabbingOrderCheckbox.click();
     55 
     56  await waitUntilState(store, state => state.ui.tabbingOrderDisplayed === true);
     57 
     58  is(tabbingOrderCheckbox.checked, true, "Checkbox is checked");
     59  tabbingOrderHighlighterData =
     60    await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData();
     61  // ⚠️ We don't get the highlighter for the <html> node of the iframe when Fission is enabled.
     62  // This should be fix as part of Bug 1740509.
     63  is(
     64    JSON.stringify(tabbingOrderHighlighterData),
     65    JSON.stringify([`button#top-btn-1 : 1`, `button#top-btn-2 : 4`]),
     66    "Tabbing order is visible for the top level target after clicking the checkbox"
     67  );
     68 
     69  const orgIframeTabingOrderHighlighterData =
     70    await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData();
     71  is(
     72    JSON.stringify(orgIframeTabingOrderHighlighterData),
     73    JSON.stringify([
     74      `button#iframe-org-btn-1 : 2`,
     75      `button#iframe-org-btn-2 : 3`,
     76    ]),
     77    "Tabbing order is visible for the org iframe after clicking the checkbox"
     78  );
     79 
     80  const netIframeTabingOrderHighlighterData =
     81    await netIframeHighlighterTestFront.getTabbingOrderHighlighterData();
     82  is(
     83    JSON.stringify(netIframeTabingOrderHighlighterData),
     84    JSON.stringify([`button#iframe-net-btn-1 : 5`]),
     85    "Tabbing order is visible for the net iframe after clicking the checkbox"
     86  );
     87 
     88  info(`Clicking on the checkbox again hides the highlighter`);
     89  tabbingOrderCheckbox.click();
     90  await waitUntilState(
     91    store,
     92    state => state.ui.tabbingOrderDisplayed === false
     93  );
     94 
     95  is(tabbingOrderCheckbox.checked, false, "Checkbox is unchecked");
     96  tabbingOrderHighlighterData =
     97    await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData();
     98  is(
     99    tabbingOrderHighlighterData.length,
    100    0,
    101    "Tabbing order is not visible anymore after unchecking the checkbox"
    102  );
    103 
    104  const orgIframeTabingOrderHighlighterDataAfter =
    105    await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData();
    106  is(
    107    orgIframeTabingOrderHighlighterDataAfter.length,
    108    0,
    109    "Tabbing order is also hidden on the org iframe target"
    110  );
    111  const netIframeTabingOrderHighlighterDataAfter =
    112    await netIframeHighlighterTestFront.getTabbingOrderHighlighterData();
    113  is(
    114    netIframeTabingOrderHighlighterDataAfter.length,
    115    0,
    116    "Tabbing order is also hidden on the net iframe target"
    117  );
    118 
    119  await closeTabToolboxAccessibility(tab);
    120 });