Accesibility changes img

docs/accessibility.html

@@ -7,9 +7,12 @@
 
   <section id="images-section" class="bg-white rounded-2xl border border-gray-200 p-6 space-y-4">
     <h2 class="font-semibold text-gray-900">Images</h2>
-    <div class="flex gap-4">
-      <img id="img-one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%237c3aed'/%3E%3C/svg%3E" width="80" height="80"/>
-      <img id="img-two" alt="Purple square logo" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%237c3aed'/%3E%3C/svg%3E" width="80" height="80"/>
+    <div class="flex flex-wrap gap-4">
+      <img id="img-one" src="assets/a11y-chart.svg" width="80" height="80"/>
+      <img id="img-two" alt="Purple logo with a person icon" src="assets/a11y-logo.svg" width="80" height="80"/>
+      <img id="img-three" alt="" src="assets/a11y-warning.svg" width="80" height="80"/>
+      <img id="img-four" alt="image of photo.svg" src="assets/a11y-photo.svg" width="80" height="80"/>
+      <img id="img-five" alt="Decorative wavy divider" role="presentation" src="assets/a11y-divider.svg" width="80" height="80"/>
     </div>
   </section>
 

web-tests/config/accessibility.yml

@@ -0,0 +1,28 @@
+# Accessibility — BrowserStack config
+# Runs the accessibility test on Automate with BrowserStack Accessibility Testing enabled.
+# Run: BROWSERSTACK_CONFIG_FILE='config/accessibility.yml' browserstack-node-sdk jest --testPathPattern=tests/accessibility
+
+userName: ${BROWSERSTACK_USERNAME}
+accessKey: ${BROWSERSTACK_ACCESS_KEY}
+
+projectName: BrowserStack Demo
+buildName: Accessibility Demo
+buildIdentifier: "#${BUILD_NUMBER}"
+
+platforms:
+  - browserName: chrome
+    browser_version: latest
+    os: Windows
+    os_version: 10
+
+# Accessibility Testing
+accessibility: true
+accessibilityOptions:
+  wcagVersion: wcag21aa
+  includeIssueType:
+    bestPractice: true
+    needsReview: true
+
+parallelsPerPlatform: 1
+browserstackLocal: false
+idleTimeout: 300

web-tests/tests/accessibility.test.js

@@ -0,0 +1,75 @@
+const { Builder, By, until } = require('selenium-webdriver');
+
+const ACCESSIBILITY_URL =
+  process.env.ACCESSIBILITY_URL ||
+  'https://browserstackce.github.io/features-demo-web/accessibility.html';
+
+/**
+ * The accessibility scan is enabled by `accessibility: true` in
+ * config/accessibility.yml. The SDK scans each page the session loads and
+ * reports results to the BrowserStack Accessibility dashboard.
+ */
+
+describe('Accessibility page', () => {
+  let driver;
+
+  beforeAll(async () => {
+    driver = await new Builder().build();
+  }, 180000);
+
+  afterAll(async () => {
+    if (driver) await driver.quit();
+  }, 30000);
+
+  test('loads the accessibility sample page with all sections', async () => {
+    await driver.get(ACCESSIBILITY_URL);
+    await driver.wait(
+      until.elementLocated(By.id('images-section')),
+      10000,
+      'accessibility page did not load'
+    );
+
+    const sectionIds = [
+      'images-section',
+      'forms-section',
+      'buttons-section',
+      'text-section',
+      'links-section',
+      'headings-section',
+      'table-section',
+      'controls-section',
+      'media-section',
+      'widgets-section',
+      'language-section',
+    ];
+    for (const id of sectionIds) {
+      const section = await driver.findElement(By.id(id));
+      expect(await section.isDisplayed()).toBe(true);
+    }
+
+    const heading = await driver.findElement(By.css('h1'));
+    expect(await heading.getText()).toBe('Accessibility');
+
+    await driver.sleep(2000);
+  }, 60000);
+
+  test('modal dialog opens and closes', async () => {
+    await driver.get(ACCESSIBILITY_URL);
+    await driver.wait(until.elementLocated(By.id('modal-open')), 10000);
+
+    const openBtn = await driver.findElement(By.id('modal-open'));
+    await driver.executeScript('arguments[0].scrollIntoView({block:"center"})', openBtn);
+    await openBtn.click();
+
+    const closeBtn = await driver.wait(
+      until.elementIsVisible(await driver.findElement(By.id('modal-close'))),
+      5000
+    );
+    await closeBtn.click();
+
+    const open = await driver.executeScript('return document.getElementById("dialog-one").open');
+    expect(open).toBe(false);
+
+    await driver.sleep(1000);
+  }, 60000);
+});