From 75c4ff35d287e85e52fa162ca3d293bcc8b50be0 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 17 Mar 2026 13:44:40 +0100
Subject: [PATCH] Improve accessibility of sign-up progress indicator (#38252)

---
 app/javascript/styles/mastodon/forms.scss | 47 +++++++++++++++--------
 app/views/auth/shared/_progress.html.haml | 25 ++++++++----
 config/locales/en-GB.yml                  |  1 +
 config/locales/en.yml                     |  1 +
 4 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index c25bdfc8206..98cbbf76594 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -1257,31 +1257,44 @@ code {
 }
 
 .progress-tracker {
+  --circle-size: 30px;
+
   display: flex;
   align-items: center;
   padding-bottom: 30px;
   margin-bottom: 30px;
 
   li {
-    flex: 0 0 auto;
     position: relative;
-  }
 
-  .separator {
-    height: 2px;
-    background: var(--color-border-primary);
-    flex: 1 1 auto;
+    --connector-color: var(--color-border-primary);
+    --connector-thickness: 2px;
 
     &.completed {
-      background: var(--color-text-brand);
+      --connector-color: var(--color-bg-brand-base);
+    }
+
+    &:not(:last-child) {
+      flex-grow: 1;
+
+      // Connector line between circles
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        inset-inline: var(--circle-size) 0;
+        background-color: var(--connector-color);
+        height: 2px;
+        top: calc((var(--circle-size) - var(--connector-thickness)) / 2);
+      }
     }
   }
 
   .circle {
     box-sizing: border-box;
     position: relative;
-    width: 30px;
-    height: 30px;
+    width: var(--circle-size);
+    height: var(--circle-size);
     border-radius: 50%;
     border: 2px solid var(--color-border-primary);
     flex: 0 0 auto;
@@ -1302,8 +1315,9 @@ code {
     padding-top: 10px;
     text-align: center;
     width: 100px;
-    left: 50%;
-    transform: translateX(-50%);
+
+    // Center-align the label with the circle
+    transform: translateX(-33.3333%);
   }
 
   li:first-child .label {
@@ -1320,15 +1334,15 @@ code {
     transform: none;
   }
 
-  .active .circle {
-    border-color: var(--color-text-brand);
+  [aria-current='step'] .circle {
+    border-color: var(--color-bg-brand-base);
 
     &::before {
       content: '';
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background: var(--color-text-brand);
+      background: var(--color-bg-brand-base);
       position: absolute;
       left: 50%;
       top: 50%;
@@ -1337,8 +1351,9 @@ code {
   }
 
   .completed .circle {
-    border-color: var(--color-text-brand);
-    background: var(--color-text-brand);
+    color: var(--color-text-on-brand-base);
+    background: var(--color-bg-brand-base);
+    border-color: var(--color-bg-brand-base);
   }
 }
 
diff --git a/app/views/auth/shared/_progress.html.haml b/app/views/auth/shared/_progress.html.haml
index 8fb33854194..9ee0abdf905 100644
--- a/app/views/auth/shared/_progress.html.haml
+++ b/app/views/auth/shared/_progress.html.haml
@@ -1,26 +1,35 @@
 - progress_index = { rules: 0, details: 1, confirm: 2, confirmed: 3, completed: 4 }[stage.to_sym]
 
-%ol.progress-tracker
-  %li{ class: progress_index.positive? ? 'completed' : 'active' }
+%ol.progress-tracker{ role: 'list', 'aria-label': t('auth.progress.list') }
+  %li{
+    class: progress_index.positive? ? 'completed' : nil,
+    'aria-current': progress_index.zero? ? 'step' : nil
+  }
     .circle
       - if progress_index.positive?
         = check_icon
     .label= t('auth.progress.rules')
-  %li.separator{ class: progress_index.positive? ? 'completed' : nil }
-  %li{ class: [progress_index > 1 && 'completed', progress_index == 1 && 'active'] }
+  %li{
+    class: progress_index > 1 && 'completed',
+    'aria-current': progress_index == 1 ? 'step' : nil
+  }
     .circle
       - if progress_index > 1
         = check_icon
     .label= t('auth.progress.details')
-  %li.separator{ class: progress_index > 1 ? 'completed' : nil }
-  %li{ class: [progress_index > 2 && 'completed', progress_index == 2 && 'active'] }
+  %li{
+    class: progress_index > 2 && 'completed',
+    'aria-current': progress_index == 2 ? 'step' : nil
+  }
     .circle
       - if progress_index > 2
         = check_icon
     .label= t('auth.progress.confirm')
   - if approved_registrations?
-    %li.separator{ class: progress_index > 2 ? 'completed' : nil }
-    %li{ class: [progress_index > 3 && 'completed', progress_index == 3 && 'active'] }
+    %li{
+      class: progress_index > 3 && 'completed',
+      'aria-current': progress_index == 3 ? 'step' : nil
+    }
       .circle
         - if progress_index > 3
           = check_icon
diff --git a/config/locales/en-GB.yml b/config/locales/en-GB.yml
index 815378fbdd6..108c17149ef 100644
--- a/config/locales/en-GB.yml
+++ b/config/locales/en-GB.yml
@@ -1279,6 +1279,7 @@ en-GB:
     progress:
       confirm: Confirm email
       details: Your details
+      list: Sign up progress
       review: Our review
       rules: Accept rules
     providers:
diff --git a/config/locales/en.yml b/config/locales/en.yml
index aeb0051a112..5db5384a475 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1279,6 +1279,7 @@ en:
     progress:
       confirm: Confirm email
       details: Your details
+      list: Sign up progress
       review: Our review
       rules: Accept rules
     providers: