From 7bd4bed55899face526107cb6f4413e7c6ed1011 Mon Sep 17 00:00:00 2001
From: Frederic Thevenet <thevenet.fred@free.fr>
Date: Sat, 10 May 2025 19:46:41 +0000
Subject: [PATCH] [feature/frontend] Add id attributes to 'about user' section
 to allow for reordering using css (#4164)

# Description

This pull request adds `id` attributes to elements in the "About" section of the user page so that it is easy to look them up using css.
It also move the screen reader only elements for some these so that they are re-ordered alongside their parent element.

closes #4163

## Checklist

Please put an x inside each checkbox to indicate that you've read and followed it: `[ ]` -> `[x]`

If this is a documentation change, only the first checkbox must be filled (you can delete the others if you want).

- [x] I/we have read the [GoToSocial contribution guidelines](https://codeberg.org/superseriousbusiness/gotosocial/src/branch/main/CONTRIBUTING.md).
- [x] I/we have discussed the proposed changes already, either in an issue on the repository, or in the Matrix chat.
- [x] I/we have not leveraged AI to create the proposed changes.
- [x] I/we have performed a self-review of added code.
- [x] I/we have written code that is legible and maintainable by others.
- [x] I/we have commented the added code, particularly in hard-to-understand areas.
- [x] I/we have made any necessary changes to documentation.
- [x] I/we have added tests that cover new code.
- [x] I/we have run tests and they pass locally with the changes.
- [x] I/we have run `go fmt ./...` and `golangci-lint run`.

Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4164
Co-authored-by: Frederic Thevenet <thevenet.fred@free.fr>
Co-committed-by: Frederic Thevenet <thevenet.fred@free.fr>
---
 web/template/profile_about_user.tmpl | 12 ++++++------
 web/template/profile_fields.tmpl     |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/template/profile_about_user.tmpl b/web/template/profile_about_user.tmpl
index 7f3ce0e97..7b010a0ee 100644
--- a/web/template/profile_about_user.tmpl
+++ b/web/template/profile_about_user.tmpl
@@ -18,23 +18,23 @@
 */ -}}
 
 {{- with . }}
-<section class="about-user" role="region" aria-labelledby="about-header">
-    <div class="col-header">
+<section id="profile-about-user" class="about-user" role="region" aria-labelledby="about-header">
+    <div id="profile-col-header" class="col-header">
         <h3 id="about-header">About<span class="sr-only">&nbsp;{{- .account.Username -}}</span></h3>
     </div>
     {{- if .account.Fields }}
     {{- include "profile_fields.tmpl" . | indent 1 }}
     {{- end }}
-    <h4 class="sr-only">Bio</h4>
-    <div class="bio p-note">
+    <div id="profile-bio" class="bio p-note">
+        <h4 class="sr-only">Bio</h4>
         {{- if .account.Note }}
         {{ emojify .account.Emojis (noescape .account.Note) }}
         {{- else }}
         <p>This GoToSocial user hasn't written a bio yet!</p>
         {{- end }}
     </div>
-    <h4 class="sr-only">Stats</h4>
-    <dl class="accountstats">
+    <dl id="profile-stats" class="accountstats">
+        <h4 class="sr-only">Stats</h4>
         <div class="stats-item">
             <dt class="joineddt text-cutoff">Joined</dt>
             <dd class="joineddd text-cutoff"><time datetime="{{- .account.CreatedAt -}}">{{- .account.CreatedAt | timestampVague -}}</time></dd>
diff --git a/web/template/profile_fields.tmpl b/web/template/profile_fields.tmpl
index e9005d4c9..cd9e4eb6a 100644
--- a/web/template/profile_fields.tmpl
+++ b/web/template/profile_fields.tmpl
@@ -18,7 +18,7 @@
 */ -}}
 
 {{- with . }}
-<div class="fields">
+<div id="profile-fields" class="fields">
     <h4 class="sr-only">Fields</h4>
     <dl>
         {{- range .account.Fields }}