/** * E2E Test for Chat Mode Screen-Reader (ARIA Live Region) Attributes * * The chat page has two live regions so screen-reader users * are notified of new content: * - `.ldr-chat-messages` gets role="log" + aria-live="polite" so new * message bubbles are announced as they appear. * - `#chat-progress-wrapper` gets role="status" + aria-live="polite" * so the "Current Task" updates during research are announced. * * This test verifies the attributes are present and well-formed. It * does not exercise an actual screen reader. * * Prerequisites: Web server on http://127.0.0.1:5000 (override BASE_URL). */ const puppeteer = require('puppeteer'); const AuthHelper = require('../auth_helper'); const { getPuppeteerLaunchOptions } = require('../puppeteer_config'); const fs = require('fs'); const path = require('path'); const BASE_URL = process.env.BASE_URL || 'http://127.0.0.1:5000'; const isCI = !!process.env.CI; const TIMEOUTS = { navigation: isCI ? 60000 : 30000, selector: isCI ? 30000 : 10000, }; const SCREENSHOTS_DIR = path.join(__dirname, '..', 'screenshots'); async function snap(page, name) { if (!fs.existsSync(SCREENSHOTS_DIR)) { fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true }); } const file = path.join( SCREENSHOTS_DIR, `chat_aria_${name}_${Date.now()}.png` ); try { await page.screenshot({ path: file, fullPage: true }); } catch (_) {} } async function run() { console.log(`Running chat ARIA-live tests (CI mode: ${isCI})`); const browser = await puppeteer.launch(getPuppeteerLaunchOptions()); const page = await browser.newPage(); await page.setViewport({ width: 1280, height: 800 }); if (isCI) { page.setDefaultTimeout(60000); page.setDefaultNavigationTimeout(60000); } page.on('pageerror', (e) => console.log('PAGE ERROR:', e.message)); page.on('console', (m) => { if (m.type() === 'error') console.log('BROWSER ERROR:', m.text()); }); const auth = new AuthHelper(page, BASE_URL); let passed = 0; let failed = 0; try { await auth.ensureAuthenticated(); await page.goto(`${BASE_URL}/chat/`, { waitUntil: 'domcontentloaded', timeout: TIMEOUTS.navigation, }); await page.waitForSelector('.ldr-chat-container', { timeout: TIMEOUTS.selector }); // Test 1: chat-messages container has role="log" + aria-live="polite" console.log('Test 1: messages container has role=log + aria-live=polite'); try { const attrs = await page.$eval('#chat-messages', (el) => ({ role: el.getAttribute('role'), ariaLive: el.getAttribute('aria-live'), ariaAtomic: el.getAttribute('aria-atomic'), ariaLabel: el.getAttribute('aria-label'), })); if (attrs.role !== 'log') throw new Error(`role=log expected, got ${attrs.role}`); if (attrs.ariaLive !== 'polite') throw new Error(`aria-live=polite expected, got ${attrs.ariaLive}`); // aria-atomic and aria-label are nice-to-have; if present they // should be sensible. if (attrs.ariaAtomic && attrs.ariaAtomic !== 'false') throw new Error(`aria-atomic should be false when present, got ${attrs.ariaAtomic}`); if (attrs.ariaLabel === '') throw new Error('aria-label, if set, must not be empty'); console.log('PASSED'); passed++; } catch (e) { console.log(`FAILED: ${e.message}`); await snap(page, 'messages_container'); failed++; } // Test 2: progress wrapper has role=status + aria-live=polite console.log('Test 2: progress wrapper has role=status + aria-live=polite'); try { const attrs = await page.$eval('#chat-progress-wrapper', (el) => ({ role: el.getAttribute('role'), ariaLive: el.getAttribute('aria-live'), })); if (attrs.role !== 'status') throw new Error(`role=status expected, got ${attrs.role}`); if (attrs.ariaLive !== 'polite') throw new Error(`aria-live=polite expected, got ${attrs.ariaLive}`); console.log('PASSED'); passed++; } catch (e) { console.log(`FAILED: ${e.message}`); await snap(page, 'progress_wrapper'); failed++; } // Test 3: suggestion chips render and have an interactive // focus-visible rule available in the stylesheet (we // can't directly probe :focus-visible computed style on // a non-focused element, but we can confirm the rule // exists by reading document.styleSheets). console.log('Test 3: suggestion-chip focus-visible rule present'); try { const hasRule = await page.evaluate(() => { for (const sheet of document.styleSheets) { let rules; try { rules = sheet.cssRules; } catch (_) { continue; } if (!rules) continue; for (const r of rules) { if ( r.selectorText && r.selectorText.includes('.ldr-chat-suggestion:focus-visible') ) { return true; } } } return false; }); if (!hasRule) { throw new Error( 'No CSS rule found matching ".ldr-chat-suggestion:focus-visible"' ); } console.log('PASSED'); passed++; } catch (e) { console.log(`FAILED: ${e.message}`); await snap(page, 'focus_visible'); failed++; } } catch (e) { console.log(`Test suite error: ${e.message}`); failed++; } finally { await browser.close(); } console.log('-'.repeat(50)); console.log(`Chat ARIA-Live Tests — passed: ${passed}, failed: ${failed}`); console.log('-'.repeat(50)); if (failed > 0) process.exit(1); } run().catch((e) => { console.error('Test runner error:', e); process.exit(1); });