在带有弹出/覆盖的页面上使用Pa11y 5进行可访问性测试

Question

我有一个页面，可以使用actions从Pa11y 5获得可访问性测试报告。

当我单击该特定页面上的按钮时，我会得到一个弹出/覆盖，我希望Pa11y能够嗅探该弹出/覆盖页面并报告可访问性指标，但是当前Pa11y 5只能为主父页面提供我，而忽略弹出页面中的html上的任何报告？有什么方法可以做到这一点，告诉Pa11y切换到弹出并嗅探弹出html并报告这一点。

弹出/覆盖包含divrole=‘对话框’，因为它是由aria生成的模态对话框。

我使用的是最新的Pa11y，因此我一直提到它为Pa11y 5，我没有使用Pa11y4，所以不能评论它是否适用于Pa11y 4。

如有任何帮助/建议，我们衷心感谢。

更新:根据请求，下面是代码的完整(相关)部分

const PageOptions1 = {  
    timeout: 30000,
    userAgent: 'A11Y TESTS',
    actions: [
        'screen capture screenshots/001-DefaultView.png'                    
    ]
};
const PageOptions2 = {
    timeout: 35000, 
    userAgent: 'A11Y TESTS',
    rootElement: 'div[role="dialog"]',
    actions: [
        'click element button[data-automation-id="ccbutton"]',
        'wait for element div[role="dialog"] to be added',
        'screen capture screenshots/002-Popup.png',
        'click element i.fa-close',
        'screen capture screenshots/002-DefaultView.png'
    ]
};

async function runPa11y(navigateUrl) {
    try {
        const results = await Promise.all([
            pa11y(navigateUrl, PageOptions1),
            pa11y(navigateUrl, PageOptions2),           
        ]);

        LogResults(results);
    } catch (error) {
        console.error("Error: " + error.message);
    }
}

runPa11y("Url to navigate");

Answer 1

谢谢你的更新！你在做正确的事情，一切看起来都像预期的一样。

Pa11y将在运行测试之前执行所有的操作，因此它将打开模态对话框，立即再次关闭它，然后在不使用它的情况下运行测试。

将PageOptions2分解为较小的单元，以便您的最后一个动作是您想要测试的状态，并且一切都应该是正常的。