[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

@@ -18,23 +18,23 @@
 */ -}}
 
 {{- with . }}
-<section class="about-user" role="region" aria-labelledby="about-header">
+<section id="profile-about-user" class="about-user" role="region" aria-labelledby="about-header">
-    <div class="col-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 id="profile-bio" class="bio p-note">
-    <div 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 id="profile-stats" class="accountstats">
-    <dl 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>

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 }}