Accessibility testing : Focus management during content insertion and removal

When inserting content into the DOM, insert the content immediately after the triggering element, or use scripting to manage focus in an intuitive way. When triggering dialogs and menus, make sure those elements follow their trigger in the focus order in an intuitive way. When content is dismissed or removed, place focus back on the trigger.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming we have already connected to remote client with desired capabilities23import org.openqa.selenium.By;4import org.openqa.selenium.WebDriver;5import org.openqa.selenium.WebElement;6import org.openqa.selenium.chrome.ChromeDriver;78public class AccessibilityTesting {9 public static void main(String[] args) {10 /​/​Assuming we are testing a web application11 System.setProperty("webdriver.chrome.driver", "/​path/​to/​chromedriver.exe");12 WebDriver driver = new ChromeDriver();1314 /​/​Assuming web app URL is https:/​/​example.com15 driver.get("https:/​/​example.com");1617 /​/​Inserting content into the DOM18 WebElement triggerElement = driver.findElement(By.id("trigger_element"));19 WebElement newElement = driver.findElement(By.id("new_element")); /​/​element to be inserted20 triggerElement.click();21 triggerElement.sendKeys(newElement);2223 /​/​Focus management after content insertion24 WebElement insertedElement = driver.findElement(By.id("inserted_element"));25 WebElement dialogBox = driver.findElement(By.id("dialog_box"));26 insertedElement.click(); /​/​assume this triggers a dialog box27 dialogBox.sendKeys("Some text"); /​/​typing into the dialog box2829 /​/​Focus order after triggering dialogs and menus30 WebElement menuButton = driver.findElement(By.id("menu_button"));31 WebElement menu = driver.findElement(By.id("menu"));32 menuButton.click();33 assert(driver.switchTo().activeElement() == menu); /​/​assert menu is focused3435 /​/​Focus management after content is dismissed or removed36 WebElement closeButton = driver.findElement(By.id("close_button"));37 closeButton.click();38 assert(driver.switchTo().activeElement() == triggerElement); /​/​assert trigger element is focused39 }40}

Language: Python

Framework: Selenium 4

copy
1# Assumptions:2# - The web application we are testing is a single-page web application.3# - The web application uses the W3C WebDriver protocol.4# - We are using Selenium 4 with Python.5# - We have installed the necessary Selenium and WebDriver libraries for Python.6# - We are running the test on a local machine with a web browser installed.78from selenium.webdriver import Firefox9from selenium.webdriver.common.keys import Keys10from selenium.webdriver.common.action_chains import ActionChains1112# Create a new Firefox browser instance13browser = Firefox()1415# Connect to a remote client instead16# Note: Replace the desired_capabilities with the correct values17# browser = webdriver.Remote(18# command_executor='http:/​/​localhost:4444/​wd/​hub',19# desired_capabilities=desired_capabilities20# )2122# Navigate to the web page to be tested23browser.get("http:/​/​example.com")2425# Perform content insertion and removal26triggering_element = browser.find_element_by_xpath("/​/​button[@id='trigger']")2728# Click the triggering element to insert new content29triggering_element.click()3031# Find the newly inserted content element32new_content_element = browser.find_element_by_xpath("/​/​div[@class='new-content']")3334# Insert the new content immediately after the triggering element35browser.execute_script("arguments[0].insertAdjacentElement('afterend', arguments[1]);",36 triggering_element, new_content_element)3738# Verify that the new content has focus39assert new_content_element == browser.switch_to.active_element4041# Trigger a dialog42dialog_button = browser.find_element_by_xpath("/​/​button[@id='dialog-button']")43dialog_button.click()4445# Verify that the dialog has focus46dialog_element = browser.find_element_by_xpath("/​/​div[@role='dialog']")47assert dialog_element == browser.switch_to.active_element4849# Dismiss the dialog50dismiss_button = dialog_element.find_element_by_xpath("/​/​button[@id='dismiss-button']")51dismiss_button.click()5253# Verify that the triggering element has focus again54assert triggering_element == browser.switch_to.active_element5556# Remove the new content57remove_button = new_content_element.find_element_by_xpath("/​/​button[@class='remove-button']")58remove_button.click()5960# Verify that the triggering element has focus again61assert triggering_element == browser.switch_to.active_element6263# Close the browser64browser.quit()

Disclaimer: Following code snippets and related information have been sourced from GitHub and/or generated using AI code generation tools. LambdaTest takes no responsibility in the accuracy of the code and is not liable for any damages.

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Power Your Software Testing with AI and cloud

Test Intelligently and ship faster. Deliver unparalleled digital experiences for real world enterprises.

Start Free Testing