refactor: simplify HTML lessons to use semantic elements only

- Remove presentational classes (.form-group, .required, .hint, .checkbox-group)
- Replace <span class="required">*</span> with plain * in label text
- Replace <div class="hint"> with semantic <small> element
- Simplify checkbox markup to use native label wrapping pattern
- Update previewBaseCSS to style semantic elements directly
- Add code quality standards to CLAUDE.md emphasizing WCAG compliance and native HTML

🤖 Generated with [Claude Code](https://claude.ai/code)
This commit is contained in:
2025-12-24 01:55:47 +01:00
parent 8236aad1bc
commit c4df288471
5 changed files with 51 additions and 32 deletions

View File

@@ -48,6 +48,25 @@ For Tailwind mode, user classes are injected via `{{USER_CLASSES}}` placeholder
Tests use Vitest with jsdom environment. Setup in `tests/setup.js` includes DOM testing library matchers. Test files are in `tests/unit/`.
## Code Quality Standards
This project adheres to the highest standards for web development:
- **Semantic HTML5**: Always use semantic elements (`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, `<figure>`, etc.) over generic `<div>` containers
- **WCAG Compliance**: Ensure accessibility - proper heading hierarchy, ARIA labels where needed, keyboard navigation support
- **Native HTML over JavaScript**: Prefer native HTML elements and attributes (e.g., `<dialog>`, `<details>`, `required`, `pattern`) over JS-driven solutions
- **No unnecessary classes**: Avoid presentational classes like `.form-group` or `.container` in lesson examples - teach pure semantic HTML first
- **Progressive enhancement**: Core functionality should work without JavaScript where possible
- **Valid HTML**: All HTML must be valid according to W3C standards
### Lesson Content Guidelines
When creating or editing lessons:
- Student code examples should be minimal and semantic
- Avoid CSS framework patterns (Bootstrap, Tailwind utility classes) in HTML lessons
- Use native form validation attributes instead of JavaScript validation
- Teach the platform's native capabilities first
## Git Commits
- Do NOT add co-authoring lines to commit messages