diff options
Diffstat (limited to 'devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js')
-rw-r--r-- | devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js b/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js new file mode 100644 index 0000000000..ed872f46e0 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js @@ -0,0 +1,140 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check "Show tabbing order" works as expected + +const TEST_URI = `https://example.com/document-builder.sjs?html= + <button id=top-btn-1>Top level button before iframe</button> + <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(` + <button id=iframe-org-btn-1>in iframe button 1</button> + <button id=iframe-org-btn-2>in iframe button 2</button> + `)}"></iframe> + <button id=top-btn-2>Top level button after iframe</button> + <iframe src="https://example.net/document-builder.sjs?html=${encodeURIComponent(` + <button id=iframe-net-btn-1>in iframe button 1</button> + `)}"></iframe>`; + +add_task(async () => { + const { doc, store, tab, toolbox } = await addTestTab(TEST_URI); + + const topLevelFrameHighlighterTestFront = await toolbox.target.getFront( + "highlighterTest" + ); + + const frameTargets = toolbox.commands.targetCommand.getAllTargets([ + toolbox.commands.targetCommand.TYPES.FRAME, + ]); + const orgIframeTarget = frameTargets.find(t => + t.url.startsWith("https://example.org") + ); + const netIframeTarget = frameTargets.find(t => + t.url.startsWith("https://example.net") + ); + + // The iframe only has a dedicated target when Fission or EFT is enabled + const orgIframeHighlighterTestFront = orgIframeTarget + ? await orgIframeTarget.getFront("highlighterTest") + : null; + const netIframeHighlighterTestFront = netIframeTarget + ? await netIframeTarget.getFront("highlighterTest") + : null; + + let tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + tabbingOrderHighlighterData.length, + 0, + "Tabbing order is not visible at first" + ); + + info(`Click on "Show Tabbing Order" checkbox`); + const tabbingOrderCheckbox = doc.getElementById( + "devtools-display-tabbing-order-checkbox" + ); + tabbingOrderCheckbox.click(); + + await waitUntilState(store, state => state.ui.tabbingOrderDisplayed === true); + + is(tabbingOrderCheckbox.checked, true, "Checkbox is checked"); + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData(); + if (isFissionEnabled()) { + // ⚠️ We don't get the highlighter for the <html> node of the iframe when Fission is enabled. + // This should be fix as part of Bug 1740509. + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([`button#top-btn-1 : 1`, `button#top-btn-2 : 4`]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + + const orgIframeTabingOrderHighlighterData = + await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + JSON.stringify(orgIframeTabingOrderHighlighterData), + JSON.stringify([ + `button#iframe-org-btn-1 : 2`, + `button#iframe-org-btn-2 : 3`, + ]), + "Tabbing order is visible for the org iframe after clicking the checkbox" + ); + + const netIframeTabingOrderHighlighterData = + await netIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + JSON.stringify(netIframeTabingOrderHighlighterData), + JSON.stringify([`button#iframe-net-btn-1 : 5`]), + "Tabbing order is visible for the net iframe after clicking the checkbox" + ); + } else { + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([ + `button#top-btn-1 : 1`, + `html : 2`, + `button#iframe-org-btn-1 : 3`, + `button#iframe-org-btn-2 : 4`, + `button#top-btn-2 : 5`, + `html : 6`, + `button#iframe-net-btn-1 : 7`, + ]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + } + + info(`Clicking on the checkbox again hides the highlighter`); + tabbingOrderCheckbox.click(); + await waitUntilState( + store, + state => state.ui.tabbingOrderDisplayed === false + ); + + is(tabbingOrderCheckbox.checked, false, "Checkbox is unchecked"); + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + tabbingOrderHighlighterData.length, + 0, + "Tabbing order is not visible anymore after unchecking the checkbox" + ); + + if (isFissionEnabled()) { + const orgIframeTabingOrderHighlighterData = + await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + orgIframeTabingOrderHighlighterData.length, + 0, + "Tabbing order is also hidden on the org iframe target" + ); + const netIframeTabingOrderHighlighterData = + await netIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + netIframeTabingOrderHighlighterData.length, + 0, + "Tabbing order is also hidden on the net iframe target" + ); + } + + await closeTabToolboxAccessibility(tab); +}); |