Fix a11y landmark issue and add Axe Playwright test (#2687)

* a11y: add single main landmark and basic Axe accessibility test; add axe-playwright-python dev dep (#2677)

* Update fixer mode with PR instructions

* Update app/frontend/src/pages/layout/Layout.tsx

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: pamelafox

.github/chatmodes/fixer.chatmode.md

@@ -1,7 +1,7 @@
 ---
 description: 'Fix and verify issues in app'
 model: GPT-5 (Preview)
-tools: ['extensions', 'codebase', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'fetch', 'findTestFiles', 'searchResults', 'githubRepo', 'runTests', 'runCommands', 'runTasks', 'editFiles', 'runNotebooks', 'search', 'new', 'get_issue', 'get_issue_comments', 'get-library-docs', 'playwright', 'pylance mcp server']
+tools: ['extensions', 'codebase', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'fetch', 'findTestFiles', 'searchResults', 'githubRepo', 'runTests', 'runCommands', 'runTasks', 'editFiles', 'runNotebooks', 'search', 'new', 'create_pull_request', 'get_issue', 'get_issue_comments', 'get-library-docs', 'playwright', 'pylance mcp server']
 ---
 
 # Fixer Mode Instructions
@@ -25,3 +25,8 @@ You MUST check task output readiness before debugging, testing, or declaring wor
 	- Backend: Quart was started with --reload; Python changes trigger an automatic restart.
 	- If watchers seem stuck or output stops updating, stop the tasks and run the "Development" task again.
 - To interact with a running application, use the Playwright MCP server
+
+## Committing the change
+
+When change is complete, offer to make a new branch, git commit, and pull request.
+Make sure the PR follows the PULL_REQUEST_TEMPLATE.md format, with all sections filled out and appropriate checkboxes checked.

app/frontend/src/pages/layout/Layout.module.css

@@ -4,6 +4,12 @@
     height: 100%;
 }
 
+.main {
+    display: flex;
+    flex: 1;
+    min-height: 0; /* allow inner scroll areas to work inside flex container */
+}
+
 .header {
     background-color: #222222;
     color: #f2f2f2;

app/frontend/src/pages/layout/Layout.tsx

@@ -75,7 +75,9 @@ const Layout = () => {
                 </div>
             </header>
 
-            <Outlet />
+            <main className={styles.main} id="main-content">
+                <Outlet />
+            </main>
         </div>
     );
 };

requirements-dev.txt

@@ -12,3 +12,4 @@ pytest-snapshot
 pre-commit
 pip-tools
 mypy==1.14.1
+axe-playwright-python

tests/e2e.py

@@ -10,6 +10,7 @@
 import pytest
 import requests
 import uvicorn
+from axe_playwright_python.sync_playwright import Axe
 from playwright.sync_api import Page, Route, expect
 
 import app
@@ -110,6 +111,10 @@ def handle(route: Route):
     expect(page.get_by_role("button", name="Clear chat")).to_be_disabled()
     expect(page.get_by_role("button", name="Developer settings")).to_be_enabled()
 
+    # Check accessibility of page in initial state
+    results = Axe().run(page)
+    assert results.violations_count == 0, results.generate_report()
+
     # Ask a question and wait for the message to appear
     page.get_by_placeholder("Type a new question (e.g. does my plan cover annual eye exams?)").click()
     page.get_by_placeholder("Type a new question (e.g. does my plan cover annual eye exams?)").fill(