specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

Fix focus and hover styles in web UI (#26125)

Browse source
This commit is contained in:
Eugen Rochko 2023-07-23 17:55:13 +02:00 committed by GitHub
parent 67016dd29d
commit cfd50f30bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/mastodon/components/intersection_observer_article.jsx
View file

@ -114,7 +114,7 @@ export default class IntersectionObserverArticle extends Component {
aria-setsize={listLength} aria-setsize={listLength}
style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }} style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
data-id={id} data-id={id}
tabIndex={0} tabIndex={-1}
> >
{children && cloneElement(children, { hidden: true })} {children && cloneElement(children, { hidden: true })}
</article> </article>
@ -122,7 +122,7 @@ export default class IntersectionObserverArticle extends Component {
} }
return ( return (
<article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={0}> <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={-1}>
{children && cloneElement(children, { hidden: false })} {children && cloneElement(children, { hidden: false })}
</article> </article>
); );

74
app/javascript/styles/mastodon/components.scss
View file

@ -74,7 +74,7 @@
background-color: $ui-button-focus-background-color; background-color: $ui-button-focus-background-color;
} }
&:focus { &:focus-visible {
outline: $ui-button-icon-focus-outline; outline: $ui-button-icon-focus-outline;
} }
@ -191,8 +191,6 @@
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
transition: all 100ms ease-out;
transition-property: background-color, color;
text-decoration: none; text-decoration: none;
a { a {
@ -203,11 +201,11 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($action-button-color, 20%); color: lighten($action-button-color, 7%);
background-color: $ui-button-icon-hover-background-color; background-color: rgba($action-button-color, 0.15);
} }
&:focus { &:focus-visible {
outline: $ui-button-icon-focus-outline; outline: $ui-button-icon-focus-outline;
} }
@ -224,10 +222,10 @@
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: $ui-button-icon-hover-background-color; background-color: rgba($lighter-text-color, 0.15);
} }
&:focus { &:focus-visible {
outline: $ui-button-icon-focus-outline; outline: $ui-button-icon-focus-outline;
} }
@ -239,6 +237,13 @@
&.active { &.active {
color: $highlight-text-color; color: $highlight-text-color;
&:hover,
&:active,
&:focus {
color: $highlight-text-color;
background-color: transparent;
}
&.disabled { &.disabled {
color: lighten($highlight-text-color, 13%); color: lighten($highlight-text-color, 13%);
} }
@ -283,19 +288,15 @@
font-size: 11px; font-size: 11px;
padding: 0 3px; padding: 0 3px;
line-height: 27px; line-height: 27px;
transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: $ui-button-icon-hover-background-color; background-color: rgba($lighter-text-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
} }
&:focus { &:focus-visible {
outline: $ui-button-icon-focus-outline; outline: $ui-button-icon-focus-outline;
} }
@ -307,6 +308,13 @@
&.active { &.active {
color: $highlight-text-color; color: $highlight-text-color;
&:hover,
&:active,
&:focus {
color: $highlight-text-color;
background-color: transparent;
}
} }
} }
@ -1975,7 +1983,7 @@ a.account__display-name {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
&:focus { &:focus-visible {
outline: 1px dotted; outline: 1px dotted;
} }
} }
@ -3838,7 +3846,6 @@ a.status-card.compact:hover {
position: relative; position: relative;
z-index: 2; z-index: 2;
outline: 0; outline: 0;
overflow: hidden;
& > button { & > button {
margin: 0; margin: 0;
@ -3853,6 +3860,10 @@ a.status-card.compact:hover {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
flex: 1; flex: 1;
&:focus-visible {
outline: $ui-button-icon-focus-outline;
}
} }
& > .column-header__back-button { & > .column-header__back-button {
@ -3893,10 +3904,18 @@ a.status-card.compact:hover {
font-size: 16px; font-size: 16px;
padding: 0 15px; padding: 0 15px;
&:last-child {
border-start-end-radius: 4px;
}
&:hover { &:hover {
color: lighten($darker-text-color, 4%); color: lighten($darker-text-color, 4%);
} }
&:focus-visible {
outline: $ui-button-icon-focus-outline;
}
&.active { &.active {
color: $primary-text-color; color: $primary-text-color;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
@ -4542,7 +4561,7 @@ a.status-card.compact:hover {
.emoji-picker-dropdown__menu { .emoji-picker-dropdown__menu {
background: $simple-background-color; background: $simple-background-color;
position: relative; position: relative;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); box-shadow: var(--dropdown-shadow);
border-radius: 4px; border-radius: 4px;
margin-top: 5px; margin-top: 5px;
z-index: 2; z-index: 2;
@ -4720,7 +4739,7 @@ a.status-card.compact:hover {
} }
} }
&:focus { &:focus-visible {
img { img {
outline: $ui-button-icon-focus-outline; outline: $ui-button-icon-focus-outline;
} }
@ -4734,7 +4753,7 @@ a.status-card.compact:hover {
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
background: $simple-background-color; background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: var(--dropdown-shadow);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
@ -4811,19 +4830,6 @@ a.status-card.compact:hover {
.privacy-dropdown__value { .privacy-dropdown__value {
background: $simple-background-color; background: $simple-background-color;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
.icon-button {
transition: none;
}
&.active {
background: $ui-highlight-color;
.icon-button {
color: $primary-text-color;
}
}
} }
&.top .privacy-dropdown__value { &.top .privacy-dropdown__value {
@ -4832,14 +4838,14 @@ a.status-card.compact:hover {
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
display: block; display: block;
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); box-shadow: var(--dropdown-shadow);
} }
} }
.language-dropdown { .language-dropdown {
&__dropdown { &__dropdown {
background: $simple-background-color; background: $simple-background-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: var(--dropdown-shadow);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;