200 lines
10 KiB
Markdown
200 lines
10 KiB
Markdown
# Bug List - WorkRoot Website QA Report
|
|
|
|
**Date:** 2026-05-11
|
|
**Test Environment:** Chromium only (Edge/WebKit not installed)
|
|
**Server:** http://localhost:10000 (Astro SSR, running)
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
| Suite | Tests | Passed | Failed |
|
|
|---|---|---|---|
|
|
| e2e-smoke-suite | 26 | 26 | 0 |
|
|
| e2e-critical-paths | 16 | 16 | 0 |
|
|
| contact-form | 9 | 9 | 0 |
|
|
| navigation | 12 | 12 | 0 |
|
|
| pages | 18 | 18 | 0 |
|
|
| blog | 4 | 4 | 0 |
|
|
| portfolio | 9 | 9 | 0 |
|
|
| e2e-form-interactions | 16 | 16 | 0 |
|
|
| accessibility | 58 | 41 | 17 |
|
|
| static-assets | 14 | 14 | 0 |
|
|
| newsletter-subscription | 23 | 19 | 4 |
|
|
| **TOTAL** | **285** | **264** | **21** |
|
|
|
|
---
|
|
|
|
## Site Bugs (Actual Application Issues)
|
|
|
|
### P2 - SVG Accessibility (WCAG 1.1.1 Non-text Content)
|
|
|
|
**Test:** `accessibility.spec.ts` - "SVGs are either decorative (aria-hidden) or have accessible labels"
|
|
**Affected pages:** Home, About, Services, Portfolio, Blog, Contact, Privacy, Terms, Sitemap (all 9 pages)
|
|
**Failure:** SVGs found on pages that lack both `aria-hidden="true"` and accessible labels (role="img" + title)
|
|
**Severity:** P2 - WCAG violation; affects screen reader users
|
|
**Fix:** Add `aria-hidden="true"` to all purely decorative SVG icons, OR add `role="img"` and `<title>` tags to meaningful SVGs. Review all inline SVG icons across components.
|
|
|
|
---
|
|
|
|
### P2 - Contact Form Label Association (WCAG 1.3.1)
|
|
|
|
**Test:** `accessibility.spec.ts` - "Contact: form inputs have associated labels"
|
|
**Failure:** An input on `/contact` is missing a proper programmatic label association. The budget radio inputs may lack explicit `aria-labelledby` or `for` attributes.
|
|
**Severity:** P2 - WCAG violation
|
|
**Fix:** Ensure all inputs in the contact form have `<label for="...">` or `aria-label` attributes. The budget range radio group needs `aria-labelledby` referencing the group label.
|
|
|
|
---
|
|
|
|
### P2 - Newsletter Form Rate Limiting (API 429 During Tests)
|
|
|
|
**Test:** `newsletter-subscription.spec.ts` - "API rejects invalid email", "API rejects empty email"
|
|
**Failure:** API returns 429 (Too Many Requests) instead of expected 422 (Unprocessable Entity) for invalid/empty email submissions. Rate limiter fires before validation logic.
|
|
**Severity:** P2 - Rate limiter is too aggressive; real users hitting the form multiple times get blocked instead of seeing validation errors
|
|
**Fix:** Run input validation before rate limit checks, returning 422 for clearly invalid input. Consider a higher rate limit threshold in staging/test environments.
|
|
|
|
---
|
|
|
|
### P2 - Newsletter Submit Button Loading State Missing
|
|
|
|
**Test:** `newsletter-subscription.spec.ts` - "submit button shows loading state during submission"
|
|
**Failure:** Newsletter subscribe button remains enabled during form submission. Contact form correctly disables its button during submission; newsletter form does not.
|
|
**Severity:** P2 - UX inconsistency; allows duplicate submissions
|
|
**Fix:** Add a loading/disabled state to the newsletter form submit handler (disable button while API call is in flight).
|
|
|
|
---
|
|
|
|
### P3 - Skip Link Does Not Focus Main Content (WCAG 2.1.1)
|
|
|
|
**Test:** `accessibility.spec.ts` - "Skip link works - activating it focuses main content"
|
|
**Failure:** Skip link exists but activating it does not programmatically focus the `<main>` element
|
|
**Severity:** P3 - Keyboard navigation aid not working
|
|
**Fix:** Add `tabindex="-1"` to the `<main>` element so it can receive programmatic focus from the skip link's anchor click.
|
|
|
|
---
|
|
|
|
### P3 - Portfolio Modal Escape Key Not Working (WCAG 2.1.1)
|
|
|
|
**Test:** `accessibility.spec.ts` - "Portfolio modal can be closed with Escape key"
|
|
**Failure:** Portfolio modal/lightbox does not respond to Escape key press to close
|
|
**Severity:** P3 - Keyboard accessibility issue
|
|
**Fix:** Add `keydown` event listener for the `Escape` key in the portfolio modal JavaScript that calls the close function.
|
|
|
|
---
|
|
|
|
### P3 - Home Page Focus Order Issue (WCAG 2.4.3)
|
|
|
|
**Test:** `accessibility.spec.ts` - "Focus order follows logical reading order on Home page"
|
|
**Failure:** Tab order on the homepage does not follow the expected logical visual reading order
|
|
**Severity:** P3 - Keyboard navigation usability
|
|
**Fix:** Review z-index, positioning, and tabindex values across the homepage. Sticky header elements should not interrupt expected content tab flow.
|
|
|
|
---
|
|
|
|
### P3 - Contact Form Error Messages Not Triggering on Empty Submit
|
|
|
|
**Test:** `accessibility.spec.ts` - "Contact form shows error messages for invalid submissions"
|
|
**Failure:** Error messages do not appear when an empty contact form is submitted
|
|
**Severity:** P3 - Form validation UX issue (errors only show after field blur, not on submit)
|
|
**Fix:** Ensure `validateField()` is called for all form fields on submit attempt, even fields the user has not yet interacted with.
|
|
|
|
---
|
|
|
|
### P3 - Mobile Menu aria-expanded State Not Updating (WCAG 4.1.2)
|
|
|
|
**Test:** `accessibility.spec.ts` - "Mobile menu toggle has correct aria-expanded state"
|
|
**Failure:** `aria-expanded` on `#mobile-menu-toggle` does not reflect the open/closed state as expected by the test (test times out at 30s)
|
|
**Severity:** P3 - Screen reader accessibility
|
|
**Fix:** Verify the JavaScript setting `aria-expanded` on the toggle button executes correctly. The button starts as `aria-expanded="false"` and should update to `"true"` when the menu panel slides in.
|
|
|
|
---
|
|
|
|
### P3 - Buttons Color Contrast Not Distinct (WCAG 1.4.3)
|
|
|
|
**Test:** `accessibility.spec.ts` - "Buttons have distinct background colors"
|
|
**Failure:** Two or more buttons on a page have identical computed background-color values
|
|
**Severity:** P3 - Visual distinction issue
|
|
**Fix:** Review button variant CSS. Ensure primary, secondary, and ghost button styles have distinct background values. Check that hover/focus states don't override background in the default state.
|
|
|
|
---
|
|
|
|
### P3 - Reduced Motion Not Respected
|
|
|
|
**Test:** `accessibility.spec.ts` - "Animations respect prefers-reduced-motion media query"
|
|
**Failure:** Animations/transitions are not reduced when `prefers-reduced-motion: reduce` is set
|
|
**Severity:** P3 - Accessibility for users with vestibular disorders (WCAG 2.3.3 AAA)
|
|
**Fix:** Add CSS `@media (prefers-reduced-motion: reduce)` rules to disable or minimize transitions and animations. Use Tailwind's `motion-reduce:` variant on all animated elements.
|
|
|
|
---
|
|
|
|
## Test Spec Issues (Not Site Bugs)
|
|
|
|
### Newsletter Mobile Test Uses `.tap()` Without Touch Context
|
|
|
|
**Test:** `newsletter-subscription.spec.ts:361` - "newsletter form is visible and usable on mobile"
|
|
**Issue:** `.tap()` requires `hasTouch: true` in the Playwright context, which is not set for the Chromium project
|
|
**Fix in spec:** Replace `emailInput.tap()` with `emailInput.click()`, OR add `use: { hasTouch: true }` to the mobile test configuration.
|
|
|
|
---
|
|
|
|
## Test Environment Issues
|
|
|
|
### Edge / WebKit / Mobile Safari Not Installed
|
|
|
|
The Playwright config defines 7 projects (chromium, firefox, webkit, edge, Mobile Chrome, Mobile Safari, Tablet). Edge and WebKit are not installed in this test environment. All tests were run on Chromium only.
|
|
|
|
**Resolution:** Install with `npx playwright install --with-deps webkit` and `npx playwright install msedge`, OR remove unavailable projects from `playwright.config.ts` for this environment.
|
|
|
|
---
|
|
|
|
## Test Spec Bugs Fixed In This Session
|
|
|
|
The following pre-existing test spec bugs were identified and fixed (committed `d89b87c` to `main` branch):
|
|
|
|
1. **Navigation assertion** (`e2e-smoke-suite.spec.ts`): `not.toContain('http://localhost:10000/')` matched `/about` (which contains the prefix). Fixed to `not.toMatch(/http:\/\/localhost:10000\/?$/)`.
|
|
|
|
2. **Strict locator: email field** (3 files): Unscoped `input[name="email"]` matched both the contact form and newsletter footer. Fixed to `#contact-form input[name="email"]`.
|
|
|
|
3. **Strict locator: submit button** (3 files): Unscoped `button[type="submit"]` matched contact and newsletter buttons. Fixed to `#contact-form button[type="submit"]`.
|
|
|
|
4. **Strict locator: form** (`e2e-smoke-suite.spec.ts`): `locator('form')` matched 2 forms. Fixed to `#contact-form`.
|
|
|
|
5. **Strict locator: blog article** (`e2e-critical-paths.spec.ts`): `article, [class*="prose"]` matched article + prose div. Fixed with `.first()`.
|
|
|
|
6. **Keyboard focus context** (multiple files): Tab from blank page focus landed on browser chrome before form fields. Fixed by clicking the first field before tabbing.
|
|
|
|
7. **Mobile navigation** (`e2e-critical-paths.spec.ts`): Desktop nav links are CSS-hidden on mobile viewport. Fixed to click `#mobile-menu` links or fall back to `page.goto()`.
|
|
|
|
8. **Form submission success detection** (multiple files): Rate limiter (429) prevented success state; test timed out. Fixed with `waitForFunction` checking both `#success-state` hidden class and toast visibility.
|
|
|
|
9. **Mobile tap()** (`e2e-form-interactions.spec.ts`): Replaced `.tap()` with `.click()` for Chromium compatibility (no touch context).
|
|
|
|
10. **Budget radio tab order** (`e2e-form-interactions.spec.ts`): Budget radio inputs intercept Tab between subject and message. Fixed with a loop that tabs until message textarea is focused.
|
|
|
|
11. **Subject label text** (`e2e-form-interactions.spec.ts`): Test expected label "Subject" but actual label is "Service Needed". Fixed to match actual label.
|
|
|
|
---
|
|
|
|
## Overall Assessment: Is the Site Ready for Client Demo?
|
|
|
|
**YES, with caveats.**
|
|
|
|
**Core functionality is solid:**
|
|
- All 9 pages load (200 OK) with correct header/main/footer layout
|
|
- Contact form submits successfully (CSRF fix confirmed working, POST /api/contact returns 200)
|
|
- Desktop navigation works correctly across all pages
|
|
- Blog, portfolio, and services pages render correctly with content
|
|
- No JavaScript console errors on any page
|
|
- Static assets all load (no broken images or stylesheets)
|
|
- SEO meta tags (title, description, OG tags) are present
|
|
- Security headers (CSP/X-Frame-Options) are present
|
|
- Responsive layout works on desktop/tablet/mobile viewports
|
|
|
|
**Issues to fix before production launch (not demo blockers):**
|
|
- P2: SVG accessibility across all pages (WCAG violation)
|
|
- P2: Rate limiting fires before newsletter validation
|
|
- P2: Newsletter form missing loading state
|
|
- P3: Skip link, modal Escape key, focus order, reduced motion (accessibility)
|
|
|
|
**Recommendation:** Proceed with client demo. Accessibility items should be scheduled as a post-demo sprint (1-2 days of work). Rate limiting can be tuned server-side without UI changes.
|