asonix/mastodon
1
1
Fork 1
Code Issues Pull requests Projects Releases Wiki 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}
style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
data-id={id}
tabIndex={0}
tabIndex={-1}
>
{children && cloneElement(children, { hidden: true })}
</article>
@ -122,7 +122,7 @@ export default class IntersectionObserverArticle extends Component {
}
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 })}
</article>
);

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

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