Fix focus and hover styles in web UI (#26125)
parent
bb8b1b7c25
commit
5a5d8a9757
|
@ -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,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;
|
||||
|
|
Loading…
Reference in New Issue