fix: resolve e2e test failures across browsers

- Change Board from nested <main> to <section role="region"> to fix
  invalid HTML semantics (main elements shouldn't be nested)
- Fix auth-flow tests that incorrectly expected Board visible after
  login when EmptyBoardWelcome is actually rendered
- Fix race conditions in waitForResponse calls by using Promise.all
  pattern to start waiting before triggering the action
- Update Board unit tests to use getByRole('region') instead of
  getByRole('main')

Author: msujaws

src/components/Board/Board.test.tsx

@@ -446,24 +446,24 @@ describe('Board', () => {
   })
 
   describe('accessibility', () => {
-    it('should have main landmark role', () => {
+    it('should have region landmark role', () => {
       render(<Board {...defaultProps} />)
 
-      expect(screen.getByRole('main')).toBeInTheDocument()
+      expect(screen.getByRole('region', { name: 'Kanban Board' })).toBeInTheDocument()
     })
 
     it('should have aria-label for the board', () => {
       render(<Board {...defaultProps} />)
 
-      const main = screen.getByRole('main')
-      expect(main).toHaveAttribute('aria-label', expect.stringContaining('Kanban'))
+      const board = screen.getByRole('region', { name: 'Kanban Board' })
+      expect(board).toHaveAttribute('aria-label', expect.stringContaining('Kanban'))
     })
 
     it('should have aria-busy when loading', () => {
       render(<Board {...defaultProps} isLoading={true} />)
 
-      const main = screen.getByRole('main')
-      expect(main).toHaveAttribute('aria-busy', 'true')
+      const board = screen.getByRole('region', { name: 'Kanban Board' })
+      expect(board).toHaveAttribute('aria-busy', 'true')
     })
   })
 

src/components/Board/Board.tsx

@@ -563,8 +563,8 @@ export function Board({
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
     >
-      <main
-        role="main"
+      <section
+        role="region"
         aria-label="Kanban Board"
         aria-busy={isLoading}
         className="min-h-screen bg-bg-primary py-6"
@@ -640,7 +640,7 @@ export function Board({
           isLoading={isLoading}
           hasActiveFilters={hasActiveFilters}
         />
-      </main>
+      </section>
 
       {/* Drag overlay - shows the card being dragged */}
       <DragOverlay>

tests/integration/auth-flow.spec.ts

@@ -84,8 +84,9 @@ test.describe('Auth Flow', () => {
 
     // Modal should close
     await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 10000 })
-    // Board should be visible
-    await expect(page.getByRole('main', { name: 'Kanban Board' })).toBeVisible()
+    // Main content should be visible (EmptyBoardWelcome is shown before filters are applied)
+    await expect(page.getByRole('main')).toBeVisible()
+    await expect(page.getByText('Get Started')).toBeVisible()
   })
 
   // Skip: API key persistence relies on Web Crypto API encryption which may not
@@ -123,8 +124,9 @@ test.describe('Auth Flow', () => {
 
     // Modal should NOT appear (key is persisted)
     await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 10000 })
-    // Board should be visible
-    await expect(page.getByRole('main', { name: 'Kanban Board' })).toBeVisible()
+    // Main content should be visible
+    await expect(page.getByRole('main')).toBeVisible()
+    await expect(page.getByText('Get Started')).toBeVisible()
   })
 
   test('should allow clearing API key and show modal again', async ({ page }) => {

tests/integration/filter-flow.spec.ts

@@ -205,14 +205,16 @@ test.describe('Filter Flow', () => {
 
     await whiteboardInput.fill('kanban')
     await componentInput.fill('Frontend')
-    await page.getByRole('button', { name: 'Apply Filters' }).click()
 
-    // Wait for request with both filters
-    await page.waitForResponse(
-      (response) =>
-        response.url().includes('whiteboard=kanban') &&
-        response.url().includes('component=Frontend'),
-    )
+    // Wait for request with both filters (start waiting before clicking to avoid race condition)
+    await Promise.all([
+      page.waitForResponse(
+        (response) =>
+          response.url().includes('whiteboard=kanban') &&
+          response.url().includes('component=Frontend'),
+      ),
+      page.getByRole('button', { name: 'Apply Filters' }).click(),
+    ])
 
     // Should show only the matching bug
     await expect(page.getByText('Frontend bug with kanban tag')).toBeVisible({ timeout: 10000 })
@@ -280,13 +282,17 @@ test.describe('Filter Flow', () => {
     // Apply filter
     const whiteboardInput = page.getByPlaceholder('e.g., [kanban] or bug-triage')
     await whiteboardInput.fill('kanban')
-    await page.getByRole('button', { name: 'Apply Filters' }).click()
-    await page.waitForResponse('**/api/bugzilla/**')
+    await Promise.all([
+      page.waitForResponse('**/api/bugzilla/**'),
+      page.getByRole('button', { name: 'Apply Filters' }).click(),
+    ])
 
     // Clear filter
     await page.getByRole('button', { name: 'Clear' }).click()
-    await page.getByRole('button', { name: 'Apply Filters' }).click()
-    await page.waitForResponse('**/api/bugzilla/**')
+    await Promise.all([
+      page.waitForResponse('**/api/bugzilla/**'),
+      page.getByRole('button', { name: 'Apply Filters' }).click(),
+    ])
 
     // Both types of requests should have been made
     expect(requestWithFilter).toBe(true)

tests/integration/kanban-flow.spec.ts

@@ -246,12 +246,14 @@ test.describe('Kanban Flow', () => {
     // Click Apply Changes
     const applyButton = page.getByRole('button', { name: /Apply 1 change/i })
     await expect(applyButton).toBeVisible({ timeout: 5000 })
-    await applyButton.click()
 
-    // Wait for the update request
-    await page.waitForResponse(
-      (response) => response.request().method() === 'PUT' && response.url().includes('/bug/'),
-    )
+    // Wait for the update request (start waiting before clicking to avoid race condition)
+    await Promise.all([
+      page.waitForResponse(
+        (response) => response.request().method() === 'PUT' && response.url().includes('/bug/'),
+      ),
+      applyButton.click(),
+    ])
 
     // Verify the update request was made (backlog->todo adds sprint tag to whiteboard)
     expect(updateRequestMade).toBe(true)