Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 11:11:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility of sign-up progress indicator (#38252)

Browse Source
This commit is contained in:
diondiondion
2026-03-17 13:44:40 +01:00
committed by GitHub
parent 5f36c482d2
commit 75c4ff35d2
4 changed files with 50 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/styles/mastodon/forms.scss
View File

@@ -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);
}
}