favoritter/web/templates/pages/profile.html
Ole-Morten Duesund a9d84a4de8 a11y: fix WCAG 2.2 AA and Uutilsynet audit findings
Tag autocomplete combobox pattern (WCAG 2.1.1, 4.1.2, 4.1.3):
- Add role="combobox", aria-expanded, aria-haspopup to tag input
- Implement arrow key navigation (up/down) through suggestions
- Add Space key support alongside Enter for selecting tags
- Manage aria-activedescendant to track highlighted option
- Add Escape to close suggestions
- Add aria-live="polite" status region announcing suggestion count
- Add aria-selected state on options
- Tag suggestions now have stable IDs for activedescendant

Focus visibility (WCAG 2.4.7):
- Remove outline:none on tag suggestions, replace with visible
  2px solid outline on :focus-visible

Contrast (WCAG 1.4.3):
- Replace opacity:0.5 on disabled rows with muted text color
  and strikethrough on username (maintains 4.5:1 ratio)

Structure and semantics (WCAG 1.3.1):
- Fix heading hierarchy H1→H3 skip in import.html (now H2)
- Replace <nav> misuse for fave actions with div[role="group"]
- Add aria-label="Administrasjonsmeny" to admin dashboard nav
- Wrap admin users table in responsive scrollable region
- Remove redundant "Bilde for:" prefix from image alt text
- Make error page H1 descriptive: "Feil 404: Ikke funnet"
- Add .sr-only utility class for screen-reader-only content
- Add hreflang="en" to English-language external link

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 17:54:24 +02:00

107 lines
4.3 KiB
HTML

{{define "head"}}
{{with .Data}}{{$d := .}}{{with .ProfileUser}}
{{if eq .ProfileVisibility "public"}}
<meta property="og:title" content="{{.DisplayNameOrUsername}} sine favoritter">
<meta property="og:type" content="profile">
{{if $.ExternalURL}}
<meta property="og:url" content="{{$.ExternalURL}}/u/{{.Username}}">
{{if .AvatarPath}}
<meta property="og:image" content="{{$.ExternalURL}}/uploads/{{.AvatarPath}}">
{{end}}
{{end}}
<meta property="og:site_name" content="{{$.SiteName}}">
{{end}}
{{end}}{{end}}
{{end}}
{{define "content"}}
{{with .Data}}
{{$d := .}}
{{with .ProfileUser}}
<section class="profile-header">
{{if .AvatarPath}}
<img src="{{basePath}}/uploads/{{.AvatarPath}}"
alt="Profilbilde for {{.DisplayNameOrUsername}}"
class="avatar-large">
{{end}}
<hgroup>
<h1>{{.DisplayNameOrUsername}}</h1>
{{if and (ne .DisplayName "") (ne .DisplayName .Username)}}
<p>@{{.Username}}</p>
{{end}}
</hgroup>
</section>
{{if not $d.IsLimited}}
{{if .Bio}}
<p>{{.Bio}}</p>
{{end}}
<p><small>Medlem siden {{.CreatedAt.Format "02.01.2006"}}</small></p>
{{if $d.IsOwner}}
<p>
<a href="{{basePath}}/settings" role="button" class="outline">Rediger profil</a>
<a href="{{basePath}}/faves/new" role="button">+ Ny favoritt</a>
</p>
{{end}}
<h2>
{{if $d.IsOwner}}Favoritter{{else}}Offentlige favoritter{{end}}
<small>({{$d.Total}})</small>
</h2>
{{if $d.Faves}}
<div class="fave-grid" role="list">
{{range $d.Faves}}
<article class="fave-card" role="listitem">
{{if .ImagePath}}
<img src="{{basePath}}/uploads/{{.ImagePath}}"
alt="{{.Description}}"
loading="lazy">
{{end}}
<header>
<a href="{{basePath}}/faves/{{.ID}}">
<strong>{{.Description}}</strong>
</a>
{{if eq .Privacy "private"}}
<small class="badge-private" aria-label="Privat">Privat</small>
{{end}}
</header>
{{if .Tags}}
<footer>
{{range .Tags}}
<a href="{{basePath}}/tags/{{.Name}}" class="tag-chip">{{.Name}}</a>
{{end}}
</footer>
{{end}}
</article>
{{end}}
</div>
{{if gt $d.TotalPages 1}}
<nav aria-label="Sidenavigasjon">
<ul>
{{if gt $d.Page 1}}
<li><a href="{{basePath}}/u/{{.Username}}?page={{subtract $d.Page 1}}">← Forrige</a></li>
{{end}}
<li>Side {{$d.Page}} av {{$d.TotalPages}}</li>
{{if lt $d.Page $d.TotalPages}}
<li><a href="{{basePath}}/u/{{.Username}}?page={{add $d.Page 1}}">Neste →</a></li>
{{end}}
</ul>
</nav>
{{end}}
{{else}}
{{if $d.IsOwner}}
<p>Du har ingen favoritter ennå. <a href="{{basePath}}/faves/new">Legg til din første!</a></p>
{{else}}
<p>Ingen offentlige favoritter ennå.</p>
{{end}}
{{end}}
{{else}}
<p><small>Denne profilen har begrenset synlighet.</small></p>
{{end}}
{{end}}
{{end}}
{{end}}