From: Danilo M. Date: Fri, 17 Apr 2026 07:56:07 +0000 (+0200) Subject: docs: revise Week 6 plan - audit About/Contact (no new code), create 404 from scratch... X-Git-Tag: release_22042026-1342~163 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=db063604738a60420071b511742e10f1f9831c3a;p=danix.xyz-2.git docs: revise Week 6 plan - audit About/Contact (no new code), create 404 from scratch, 12 tasks instead of 24 --- diff --git a/docs/superpowers/plans/2026-04-17-week6-pages-testing.md b/docs/superpowers/plans/2026-04-17-week6-pages-testing.md index 7688144..f3535b3 100644 --- a/docs/superpowers/plans/2026-04-17-week6-pages-testing.md +++ b/docs/superpowers/plans/2026-04-17-week6-pages-testing.md @@ -2,9 +2,9 @@ > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. -**Goal:** Complete final three pages (About, Contact, 404), conduct end-to-end testing, maintain accessibility standards from Weeks 1-5, and prepare for production. +**Goal:** Verify existing About and Contact pages meet accessibility & quality standards, create 404 page, conduct end-to-end testing, and prepare for production. -**Architecture:** Week 6 builds on the complete Week 1-5 foundation (hero, components, forms, animations, accessibility) by adding three standalone pages. No new dependencies, no component refactoring — pure content pages with integrated existing components. +**Architecture:** Week 6 builds on the complete Week 1-5 foundation by auditing existing pages (About, Contact) for WCAG 2.1 AA compliance and adding the missing 404 error page. No new dependencies, no component refactoring — quality assurance and final page addition. **Tech Stack:** Hugo, Tailwind CSS, Alpine.js, form components from Week 4, animations from Week 5, accessibility standards from all weeks. @@ -12,48 +12,47 @@ ## File Structure -Before implementing, here's what will be created/modified: +Before implementing, here's what will be checked/created: -### Files to Create +### Files to Audit (Already Exist) + +**`content/en/about.md`** — Verify WCAG 2.1 AA compliance +- Check heading hierarchy +- Verify keyboard navigation on any links +- Screen reader test +- Responsive design check +- Dark/light mode test -**`content/en/about.md`** (200-300 words) -- Bio section -- Skills section (with badges) -- Photo gallery (if applicable) -- Links/social profiles -- Call-to-action (link to contact page) +**`content/it/about.md`** — Verify WCAG 2.1 AA compliance +- Same checks as English version +- Verify i18n strings used correctly +- Language switcher works -**`content/it/about.md`** (Italian translation) -- Same structure as English -- Translated content +**`content/en/contact.md`** — Verify WCAG 2.1 AA compliance +- Verify form fields are keyboard accessible +- Check form labels properly associated +- Test form submission +- Screen reader test on form -**`content/en/contact.md`** (100-150 words) -- Contact form (reuse Week 4 form-components) -- Submission instructions -- Contact info (email, social) +**`content/it/contact.md`** — Verify WCAG 2.1 AA compliance +- Same checks as English version +- Form labels in Italian +- Language switcher works -**`content/it/contact.md`** (Italian translation) -- Same structure as English -- Translated content +### Files to Create **`layouts/404.html`** (50-100 lines) - 404 error page - Friendly message - Navigation links (home, articles, contact) -- Search box (optional, if search exists) +- Multilingual support (EN/IT) +- Accessible heading hierarchy +- Keyboard navigable links ### Files to Modify (if needed) -**`config/_default/languages.toml`** (or `hugo.toml`) -- Add routes for /about and /contact pages -- Ensure 404 page is served correctly - -**`themes/danix-xyz-hacker/layouts/baseof.html`** -- Verify page layout works for all page types -- Check footer displays on all pages - **`i18n/en.yaml` and `i18n/it.yaml`** -- Add any new i18n strings for about/contact pages +- Add i18n strings for 404 page (if not already present) --- @@ -90,272 +89,404 @@ Expected: Webpack/Tailwind watcher starts. Keep this running during development. --- -### Task 2: Create About Page (English) +### Task 2: Audit About Page (English) for Accessibility Compliance **Files:** -- Create: `content/en/about.md` +- Audit: `content/en/about.md` (already exists) -- [ ] **Step 1: Create file** +- [ ] **Step 1: Open the existing About page** ```bash -touch content/en/about.md +cat content/en/about.md ``` -- [ ] **Step 2: Write frontmatter** +Review current content structure and metadata. -```yaml ---- -title: "About Me" -description: "Danilo's background, skills, and interests" -date: 2026-04-17 -layout: "single" -draft: false ---- +- [ ] **Step 2: Start Hugo server for testing** + +```bash +hugo server ``` -- [ ] **Step 3: Write bio section** +Navigate to http://localhost:1313/en/about/ -Include: -- Brief introduction (2-3 sentences) -- Background/experience (2-3 paragraphs) -- Current focus and interests -- Personal interests (optional) +- [ ] **Step 3: Test keyboard navigation** -- [ ] **Step 4: Add skills section** +- Press Tab repeatedly through the page +- Verify focus moves logically (top-to-bottom, left-to-right) +- Check that all links are reachable via Tab +- Verify focus indicators visible +- No keyboard traps -List technical and soft skills. Use badge components from Week 2 if applicable: +Expected: Full page navigable via keyboard. -```html -### Skills +- [ ] **Step 4: Test heading hierarchy** -**Technical:** -- Hugo & static site generation -- Tailwind CSS & utility-first design -- Alpine.js & lightweight interactivity -- Accessibility (WCAG 2.1 AA) -- Git & version control +Open browser DevTools. Check elements: +- Verify one h1 (page title) +- Check h2, h3 follow logical order (no skips like h1 → h3) +- Verify all headings are semantic `

` through `

` (not divs with large text) -**Soft Skills:** -- Problem-solving -- Documentation -- Testing & QA -- User experience focus -``` +Expected: Proper heading hierarchy (WCAG 2.1 1.3.1). -- [ ] **Step 5: Add call-to-action** +- [ ] **Step 5: Screen reader spot-check** -Link to contact page: +Use VoiceOver (Mac) or NVDA (Windows): +- Navigate to About page +- Verify page title announced +- Verify headings announced with level +- Verify all links announced with context +- Check that main content is readable -```markdown ---- +Expected: Screen reader users can understand page structure. -## Let's Connect +- [ ] **Step 6: Test color contrast** -Interested in collaborating or just want to chat? [Send me a message]({{< ref "contact" >}}). -``` +Use WebAIM Contrast Checker or Chrome DevTools: +- Check body text color vs background (should be ≥4.5:1) +- Check link color vs background (should be ≥4.5:1) +- Test in both light and dark modes -- [ ] **Step 6: Verify markdown renders** +Expected: All text meets WCAG AA (4.5:1 minimum). -Build and check in browser: -```bash -hugo server -``` +- [ ] **Step 7: Test responsive design** -Navigate to http://localhost:1313/en/about/ +Set viewport to: +- 320px (mobile) +- 768px (tablet) +- 1200px (desktop) -Expected: Page renders correctly, links work, styling matches theme. +Verify: +- Content readable at all sizes +- Links/buttons have adequate touch targets (≥44px) +- No horizontal scroll +- Layout adapts appropriately -- [ ] **Step 7: Commit** +Expected: Responsive at all breakpoints. -```bash -git add content/en/about.md -git commit -m "content: add English About page" -``` +- [ ] **Step 8: Test dark/light mode** + +Toggle dark/light mode in header. Verify: +- All text readable in both modes +- Focus indicators visible in both modes +- No contrast issues +- Links visible + +Expected: Works in both themes. + +- [ ] **Step 9: Document findings** + +If any issues found, note them. Expected: 0 issues (page should already comply). + +- [ ] **Step 10: No commit needed (audit only)** + +If changes are needed to fix issues, commit with message: `fix: improve About page accessibility` --- -### Task 3: Create About Page (Italian) +### Task 3: Audit About Page (Italian) for Accessibility Compliance **Files:** -- Create: `content/it/about.md` +- Audit: `content/it/about.md` (already exists) -- [ ] **Step 1: Create file** +- [ ] **Step 1: Review Italian About page** ```bash -touch content/it/about.md +cat content/it/about.md ``` -- [ ] **Step 2: Write Italian frontmatter and content** +Verify it mirrors English version structure. -Translate all content from Task 2. Maintain same structure: -- Title: "Chi Sono" -- Bio section (translated) -- Skills section (translated) -- CTA to contact page +- [ ] **Step 2: Navigate to Italian About page** -- [ ] **Step 3: Verify Italian page renders** +In browser (Hugo server still running): +Navigate to http://localhost:1313/it/about/ -```bash -hugo server -``` +- [ ] **Step 3: Test keyboard navigation** -Navigate to http://localhost:1313/it/about/ +- Press Tab repeatedly through the page +- Verify focus moves logically +- All links keyboard accessible +- Focus indicators visible +- No keyboard traps -Expected: Italian page displays correctly, language switcher in header works. +Expected: Fully navigable via keyboard, same as English version. -- [ ] **Step 4: Test language switching** +- [ ] **Step 4: Test heading hierarchy** -From English about page, click language switcher. Should navigate to Italian about page. +Same as Task 2, Step 4: +- One h1 +- h2/h3 follow logical order +- No skipped heading levels -- [ ] **Step 5: Commit** +Expected: Proper hierarchy maintained in translation. -```bash -git add content/it/about.md -git commit -m "content: add Italian About page" -``` +- [ ] **Step 5: Test language switcher** ---- +From English About page (/en/about/), click language switcher. +Expected: Navigate to Italian About page (/it/about/). -### Task 4: Create Contact Page (English) +From Italian About page, click language switcher. +Expected: Navigate to English About page (/en/about/). -**Files:** -- Create: `content/en/contact.md` +- [ ] **Step 6: Screen reader test (Italian)** -- [ ] **Step 1: Create file** +Use VoiceOver or NVDA: +- Navigate to Italian About page +- Verify page title announced in context +- Verify headings announced +- Verify links make sense in Italian +- Verify no untranslated UI strings -```bash -touch content/en/contact.md -``` +Expected: Screen reader can navigate Italian page effectively. -- [ ] **Step 2: Write frontmatter** +- [ ] **Step 7: Test color contrast (Italian)** -```yaml ---- -title: "Contact Me" -description: "Get in touch with Danilo" -date: 2026-04-17 -layout: "single" -draft: false ---- -``` +Same as Task 2, Step 6 — contrast requirements apply to Italian page too. -- [ ] **Step 3: Write intro section** +Expected: Same contrast ratios as English version (inherited CSS). -Brief message about contacting: +- [ ] **Step 8: Test responsive design (Italian)** -```markdown -# Contact Me +Same as Task 2, Step 7 — responsive design applies to Italian page too. -I'd love to hear from you! Whether you have a question, feedback, or just want to connect, feel free to reach out using the form below or via email. -``` +Expected: Same responsive behavior as English. -- [ ] **Step 4: Embed contact form** +- [ ] **Step 9: Test dark/light mode (Italian)** -Use Week 4 form-components shortcode: +Same as Task 2, Step 8 — theme switching applies to Italian page too. -```markdown -## Send a Message +Expected: Both themes work on Italian page. -{{< contact_form >}} -``` +- [ ] **Step 10: Document findings** -(Or manually embed the form HTML if shortcode doesn't exist yet) +If any issues found (untranslated strings, broken links, etc.), note them. -- [ ] **Step 5: Add alternative contact methods** +Expected: 0 issues (page should already comply). -```markdown -## Other Ways to Reach Me +- [ ] **Step 11: No commit needed (audit only)** -- **Email:** danix@danix.xyz -- **Social:** [GitHub](https://github.com/danilo), [LinkedIn](https://linkedin.com/in/danilo), [Twitter](https://twitter.com/danilo) -``` +If fixes are needed, commit with message: `fix: improve Italian About page accessibility` + +--- + +### Task 4: Audit Contact Page (English) for Accessibility Compliance + +**Files:** +- Audit: `content/en/contact.md` (already exists) -- [ ] **Step 6: Verify form renders and is accessible** +- [ ] **Step 1: Review the existing Contact page** -Build and check in browser: ```bash -hugo server +cat content/en/contact.md ``` -Navigate to http://localhost:1313/en/contact/ +Review content structure and verify form is embedded. -Expected: -- Form displays -- All form inputs are keyboard accessible (Tab works) -- Focus indicators visible -- Form submits (even if submission doesn't actually send, form handler should work) +- [ ] **Step 2: Navigate to Contact page** -- [ ] **Step 7: Test form keyboard navigation** +In browser (Hugo server still running): +Navigate to http://localhost:1313/en/contact/ -- Tab through all inputs -- Verify focus moves in logical order +- [ ] **Step 3: Test form keyboard navigation** + +- Tab through all form inputs +- Verify focus moves in logical order (top-to-bottom) - Test Shift+Tab to move backward - Press Enter on submit button +- Verify all inputs are reachable via keyboard -Expected: All keyboard navigation works, no traps, form responds. +Expected: All keyboard navigation works, no traps, form fully accessible. -- [ ] **Step 8: Commit** +- [ ] **Step 4: Test form field labels** -```bash -git add content/en/contact.md -git commit -m "content: add English Contact page with form" -``` +For each form input, verify: +- Label is associated with input (check for `