From b4fd9afa627439c7f0664e362e2d79c62cb2d552 Mon Sep 17 00:00:00 2001
From: Besser Sehen Landshut <hallo@bessersehen.la>
Date: Mon, 24 Aug 2026 17:12:54 +0200
Subject: [PATCH 1/2] fix(ui): give the question list a heading hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The list heading and every entry in it were both `h5`:

    <h5 className="fs-5 text-nowrap mb-3 mb-md-0">   ← "All Questions"
    <h5 className="text-wrap text-break">            ← every question title

Same level, so nothing tells a screen reader which of them names the page and
which are its entries. Jumping by heading walks a flat list where a structure
was meant. And `/questions` — the busiest page of the forum — had no `h1` at
all; `grep "<h1" ui/src` finds exactly one across the whole interface, on the
question detail page.

- The list heading is `h1` where it names the page (`source === "questions"`,
  the only place with no other heading above it) and `h2` everywhere else.
- Entries drop to `h3`, one level below.
- The two pages that embed the list and titled themselves `h3` — tag detail
  and linked questions — become `h1`.

`fs-5` and `fs-3` carry the sizes the tags had before, so nothing changes on
screen. Verified with prettier, eslint and tsc.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/src/components/QuestionList/index.tsx | 24 +++++++++++++++++-------
 ui/src/pages/Questions/Linked/index.tsx  |  2 +-
 ui/src/pages/Tags/Detail/index.tsx       |  4 ++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/QuestionList/index.tsx b/ui/src/components/QuestionList/index.tsx
index 3d770dbe5..7106dba23 100644
--- a/ui/src/components/QuestionList/index.tsx
+++ b/ui/src/components/QuestionList/index.tsx
@@ -100,13 +100,21 @@ const QuestionList: FC<Props> = ({
   return (
     <div>
       <div className="mb-3 d-flex flex-wrap justify-content-between">
-        <h5 className="fs-5 text-nowrap mb-3 mb-md-0">
-          {source === 'questions'
-            ? t('all_questions')
-            : source === 'linked'
+        {/* `h1` where this heading is the page's own — the question list at
+            /questions has no other. Everywhere else the page brings its own
+            `h1` and this one sits below it. `fs-5` keeps the size it had as
+            an `h5`. */}
+        {source === 'questions' ? (
+          <h1 className="fs-5 text-nowrap mb-3 mb-md-0">
+            {t('all_questions')}
+          </h1>
+        ) : (
+          <h2 className="fs-5 text-nowrap mb-3 mb-md-0">
+            {source === 'linked'
               ? t('x_posts', { count })
               : t('x_questions', { count })}
-        </h5>
+          </h2>
+        )}
         <div className="d-flex flex-wrap">
           <QueryGroup
             data={orderKeys}
@@ -167,7 +175,9 @@ const QuestionList: FC<Props> = ({
                       className="text-secondary ms-1 flex-shrink-0"
                     />
                   </div>
-                  <h5 className="text-wrap text-break">
+                  {/* One level below the list's own heading, not the same
+                      one it used to share with it. `fs-5` keeps the size. */}
+                  <h3 className="fs-5 text-wrap text-break">
                     <NavLink
                       className="link-dark d-block"
                       onClick={(e) => e.stopPropagation()}
@@ -175,7 +185,7 @@ const QuestionList: FC<Props> = ({
                       {li.title}
                       {li.status === 2 ? ` [${t('closed')}]` : ''}
                     </NavLink>
-                  </h5>
+                  </h3>
                   {viewType === 'card' && (
                     <div className="text-truncate-2 mb-2">
                       <NavLink
diff --git a/ui/src/pages/Questions/Linked/index.tsx b/ui/src/pages/Questions/Linked/index.tsx
index bf8465faf..b558745f8 100644
--- a/ui/src/pages/Questions/Linked/index.tsx
+++ b/ui/src/pages/Questions/Linked/index.tsx
@@ -81,7 +81,7 @@ const LinkedQuestions: FC = () => {
   return (
     <Row className="pt-4 mb-5">
       <Col className="page-main flex-auto">
-        <h3 className="mb-3">{t('title')}</h3>
+        <h1 className="fs-3 mb-3">{t('title')}</h1>
         <div className="mb-5">
           {t('description')}&nbsp;
           <a href={`/questions/${qid}`}>{questionTitle}</a>
diff --git a/ui/src/pages/Tags/Detail/index.tsx b/ui/src/pages/Tags/Detail/index.tsx
index 62ff5dd45..585a52777 100644
--- a/ui/src/pages/Tags/Detail/index.tsx
+++ b/ui/src/pages/Tags/Detail/index.tsx
@@ -134,14 +134,14 @@ const Index: FC = () => {
           </div>
         ) : (
           <div className="tag-box mb-5">
-            <h3 className="mb-3">
+            <h1 className="fs-3 mb-3">
               <Link
                 to={pathFactory.tagLanding(tagInfo.slug_name)}
                 replace
                 className="link-dark">
                 {tagInfo.display_name}
               </Link>
-            </h3>
+            </h1>
 
             <div
               className="text-break"

From 5c0af61634ef0fe1efcad95abfae615e2939162e Mon Sep 17 00:00:00 2001
From: Besser Sehen Landshut <hallo@bessersehen.la>
Date: Mon, 24 Aug 2026 19:12:42 +0200
Subject: [PATCH 2/2] fix(ui): give the tag, user and badge pages an h1 as well
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three more pages carry their title as `h3` and have no `h1` at all. The groups
below them jump further than one level — `h6` on the user page, `h5` on the
badge page — so they become `h2`.

`fs-3`, `fs-6` and `fs-5` carry the sizes the old tags had, so nothing changes
on screen.

Still without any heading, and therefore not in here: the settings pages and
the search results. Those need wording and an i18n key, which is a different
kind of decision than renaming a tag.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Badges/index.tsx | 4 ++--
 ui/src/pages/Tags/index.tsx   | 2 +-
 ui/src/pages/Users/index.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Badges/index.tsx b/ui/src/pages/Badges/index.tsx
index 9ca6d9a05..22ecb7dca 100644
--- a/ui/src/pages/Badges/index.tsx
+++ b/ui/src/pages/Badges/index.tsx
@@ -35,11 +35,11 @@ const Index = () => {
 
   return (
     <div className="pt-4 mb-5">
-      <h3 className="mb-4">{t('title')}</h3>
+      <h1 className="fs-3 mb-4">{t('title')}</h1>
       {badgesList?.map((item) => {
         return (
           <div key={item.group_name} className="mb-4">
-            <h5 className="mb-4">{item.group_name}</h5>
+            <h2 className="fs-5 mb-4">{item.group_name}</h2>
             <Row>
               {item.badges?.map((badge) => {
                 return (
diff --git a/ui/src/pages/Tags/index.tsx b/ui/src/pages/Tags/index.tsx
index b3e22fff5..0af4a1c46 100644
--- a/ui/src/pages/Tags/index.tsx
+++ b/ui/src/pages/Tags/index.tsx
@@ -81,7 +81,7 @@ const Tags = () => {
   return (
     <Row className="py-4 mb-4">
       <Col xxl={12}>
-        <h3 className="mb-4">{t('title')}</h3>
+        <h1 className="fs-3 mb-4">{t('title')}</h1>
         <div className="d-block d-sm-flex justify-content-between align-items-center flex-wrap">
           <Stack direction="horizontal" gap={3} className="mb-3 mb-sm-0">
             <Form>
diff --git a/ui/src/pages/Users/index.tsx b/ui/src/pages/Users/index.tsx
index 9382af7a0..431b72ebf 100644
--- a/ui/src/pages/Users/index.tsx
+++ b/ui/src/pages/Users/index.tsx
@@ -43,7 +43,7 @@ const Users = () => {
   return (
     <Row className="py-4 mb-4 d-flex justify-content-center">
       <Col xxl={12}>
-        <h3 className="mb-4">{t('title')}</h3>
+        <h1 className="fs-3 mb-4">{t('title')}</h1>
       </Col>
 
       <Col xxl={12}>
@@ -55,7 +55,7 @@ const Users = () => {
             <Fragment key={key}>
               <Row className="mb-4">
                 <Col>
-                  <h6 className="mb-0">{t(key)}</h6>
+                  <h2 className="fs-6 mb-0">{t(key)}</h2>
                 </Col>
               </Row>
               <Row className={index === keys.length - 1 ? '' : 'mb-4'}>