refactor: improve bug page semantic HTML structure

Amolith created 3 weeks ago

Restructure bug timeline to use semantic article elements with proper
headers and footers, improving accessibility and HTML structure.

Implements: bug-9b4c17f

Change summary

pkg/web/templates/bug.html | 88 ++++++++++++++++-----------------------
1 file changed, 36 insertions(+), 52 deletions(-)

Detailed changes

pkg/web/templates/bug.html

@@ -7,80 +7,64 @@
   </ul>
 </nav>
 
-<header>
-  <h2 id="bug-heading">
-    [{{.ID}}] {{.Title}}
-    <span class="badge badge-{{.Status}}">{{.Status}}</span>
-  </h2>
-  <p>
-    <strong>{{.Author}}</strong> opened this bug on
-    <time datetime="{{.CreatedAt | rfc3339}}">{{.CreatedAt | formatDate}}</time>
-    {{if .Edited}}<em>(edited)</em>{{end}}
-  </p>
-  {{if .Labels}}
-  <div aria-label="Labels">
-    {{range .Labels}}
-    <span class="label" style="background-color: {{.Color}}; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; display: inline-block; margin: 0.25rem;">{{.Name}}</span>
-    {{end}}
-  </div>
-  {{end}}
-</header>
-
 <section aria-labelledby="timeline-heading">
   <h3 id="timeline-heading" class="visually-hidden">Timeline</h3>
   
   {{range .Timeline}}
   <article id="{{.ID}}" aria-labelledby="timeline-item-{{.ID}}">
     {{if eq .Type "create"}}
-    <h4 id="timeline-item-{{.ID}}" class="visually-hidden">Initial description</h4>
+    <header>
+      <h4 id="timeline-item-{{.ID}}">{{$.Title}}</h4>
+    </header>
     {{if .Message}}
-    <div class="bug-message">
-      {{.Message}}
-    </div>
+    {{.Message}}
     {{else}}
-    <p><em class="muted">No description provided.</em></p>
+    <em class="muted">No description provided.</em>
     {{end}}
+    <footer>
+      <strong>{{.Author}}</strong> opened this bug on
+      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
+      {{if $.Edited}}<em>(edited)</em>{{end}}
+    </footer>
     
     {{else if eq .Type "comment"}}
-    <h4 id="timeline-item-{{.ID}}">
-      <strong>{{.Author}}</strong> commented on
-      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-      {{if .Edited}}<em>(edited)</em>{{end}}
-    </h4>
     {{if .Message}}
-    <div class="bug-message">
-      {{.Message}}
-    </div>
+    {{.Message}}
     {{else}}
-    <p><em class="muted">No comment provided.</em></p>
+    <em class="muted">No comment provided.</em>
     {{end}}
+    <footer>
+      <strong>{{.Author}}</strong> commented on
+      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
+      {{if .Edited}}<em>(edited)</em>{{end}}
+    </footer>
     
     {{else if eq .Type "title"}}
-    <p id="timeline-item-{{.ID}}">
-      <strong>{{.Author}}</strong> changed the title to <strong>{{.Title}}</strong> on
+    <strong>{{.Author}}</strong> changed the title to <strong>{{.Title}}</strong>.
+    <footer>
       <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-    </p>
+    </footer>
     
     {{else if eq .Type "status"}}
-    <p id="timeline-item-{{.ID}}">
-      <strong>{{.Author}}</strong> {{.Status}} the bug on
+    <strong>{{.Author}}</strong> {{.Status}} the bug.
+    <footer>
       <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-    </p>
+    <footer>
     
     {{else if eq .Type "labels"}}
-    <p id="timeline-item-{{.ID}}">
-      <strong>{{.Author}}</strong>
-      {{if .AddedLabels}}
-      added label{{if gt (len .AddedLabels) 1}}s{{end}}
-      {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
-      {{end}}
-      {{if and .AddedLabels .RemovedLabels}}and{{end}}
-      {{if .RemovedLabels}}
-      removed label{{if gt (len .RemovedLabels) 1}}s{{end}}
-      {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
-      {{end}}
-      on <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
-    </p>
+    <strong>{{.Author}}</strong>
+    {{if .AddedLabels}}
+    added label{{if gt (len .AddedLabels) 1}}s{{end}}
+    {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
+    {{end}}
+    {{if and .AddedLabels .RemovedLabels}}and{{end}}
+    {{if .RemovedLabels}}
+    removed label{{if gt (len .RemovedLabels) 1}}s{{end}}
+    {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
+    {{end}}
+    <footer>
+      <time datetime="{{.Timestamp | rfc3339}}">{{.Timestamp | formatDate}}</time>
+    </footer>
     {{end}}
   </article>
   {{end}}