Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-09-11 13:15:53 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Allow scrolling alt text popover with keyboard & improved media focus outlines (#38033)

Browse Source
This commit is contained in:
diondiondion
2026-03-03 11:27:46 +01:00
committed by GitHub
parent 74b3b6c798
commit 396d9dd12a
3 changed files with 109 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/javascript/styles/mastodon/components.scss
View File

@@ -285,6 +285,7 @@
--default-bg-color: transparent;
--hover-icon-color: var(--color-text-primary);
--hover-bg-color: var(--color-bg-brand-softer);
--focus-outline-color: var(--color-text-brand);
display: inline-flex;
color: var(--default-icon-color);
@@ -313,7 +314,7 @@
}
&:focus-visible {
outline: 2px solid var(--color-text-brand);
outline: 2px solid var(--focus-outline-color);
}
&.disabled {
@@ -5016,6 +5017,13 @@ a.status-card {
background-color: rgb(from var(--color-bg-media-base) r g b / 90%);
}
}
&:focus-visible {
.spoiler-button__overlay__label {
outline: 2px solid var(--color-text-on-media);
outline-offset: -4px;
}
}
}
}
@@ -7077,6 +7085,13 @@ a.status-card {
font-size: 14px;
font-weight: 700;
line-height: 20px;
&:focus-visible {
outline: none;
box-shadow:
inset 0 0 0 2px var(--color-text-on-media),
0 0 0 2px var(--color-bg-media);
}
}
}
@@ -7106,6 +7121,13 @@ a.status-card {
cursor: pointer;
pointer-events: auto;
&:focus-visible {
outline: none;
box-shadow:
inset 0 0 0 2px var(--color-text-on-media),
0 0 0 2px var(--color-bg-media);
}
&--non-interactive {
pointer-events: none;
}
@@ -7130,6 +7152,16 @@ a.status-card {
overflow-y: auto;
z-index: 10;
&:focus-visible {
box-shadow:
var(--dropdown-shadow),
inset 0 0 0 2px var(--color-text-on-media);
// Extend background color for better visibility of the
// inset box-shadow "outline"
outline: 2px solid var(--color-bg-media);
}
&--solid {
color: var(--color-text-primary);
background: var(--color-bg-primary);
@@ -7370,6 +7402,7 @@ a.status-card {
color: var(--color-text-primary);
position: relative;
z-index: -1;
border-radius: inherit;
&,
img {
@@ -7380,6 +7413,23 @@ a.status-card {
img {
object-fit: cover;
}
&:focus {
outline: none;
border-radius: inherit;
}
// Double focus outline for better visibility on photos
&:focus-visible::after {
content: '';
position: absolute;
inset: 2px;
z-index: 1;
border-radius: inherit;
border: 2px solid var(--color-text-on-inverted);
outline: 2px solid var(--color-bg-inverted);
pointer-events: none;
}
}
.media-gallery__preview {