sforkowany z mirror/soapbox
Merge branch 'a11y' into 'develop'
a11y: Improve keyboard navigation, add some hover/focus styles See merge request soapbox-pub/soapbox-fe!826strip-front-mentions
commit
6e7ef333b8
|
@ -11,6 +11,10 @@ export default class Column extends React.PureComponent {
|
|||
label: PropTypes.string,
|
||||
};
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, label, children, transparent, ...rest } = this.props;
|
||||
|
||||
|
@ -20,6 +24,7 @@ export default class Column extends React.PureComponent {
|
|||
aria-label={label}
|
||||
className={classNames('column', className, { 'column--transparent': transparent })}
|
||||
{...rest}
|
||||
ref={this.setRef}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -22,7 +22,7 @@ const mapStateToProps = state => {
|
|||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
export default @connect(mapStateToProps, null, null, { forwardRef: true })
|
||||
class ScrollableList extends PureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
|
|
|
@ -149,6 +149,10 @@ class SidebarMenu extends ImmutablePureComponent {
|
|||
if (accountChanged || otherAccountsChanged) {
|
||||
this.fetchOwnAccounts();
|
||||
}
|
||||
|
||||
if (this.props.sidebarOpen && !prevProps.sidebarOpen) {
|
||||
document.querySelector('.sidebar-menu__close').focus();
|
||||
}
|
||||
}
|
||||
|
||||
renderAccount = account => {
|
||||
|
|
|
@ -174,7 +174,7 @@ class Notification extends ImmutablePureComponent {
|
|||
|
||||
renderMention(notification) {
|
||||
return (
|
||||
<div className='notification notification-mention' tabIndex='0'>
|
||||
<div className='notification notification-mention focusable-within' tabIndex='0'>
|
||||
<StatusContainer
|
||||
id={notification.getIn(['status', 'id'])}
|
||||
withDismiss
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
@ -425,10 +425,10 @@ class Status extends ImmutablePureComponent {
|
|||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size - 1, true);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
let index = ImmutableList(ancestorsIds).indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
index = ImmutableList(descendantsIds).indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index, true);
|
||||
} else {
|
||||
this._selectChild(index - 1, true);
|
||||
|
@ -442,10 +442,10 @@ class Status extends ImmutablePureComponent {
|
|||
if (id === status.get('id')) {
|
||||
this._selectChild(ancestorsIds.size + 1, false);
|
||||
} else {
|
||||
let index = ancestorsIds.indexOf(id);
|
||||
let index = ImmutableList(ancestorsIds).indexOf(id);
|
||||
|
||||
if (index === -1) {
|
||||
index = descendantsIds.indexOf(id);
|
||||
index = ImmutableList(descendantsIds).indexOf(id);
|
||||
this._selectChild(ancestorsIds.size + index + 2, false);
|
||||
} else {
|
||||
this._selectChild(index + 1, false);
|
||||
|
|
|
@ -202,7 +202,8 @@
|
|||
padding: 7px;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
@ -472,15 +472,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
|
||||
.focusable:focus,
|
||||
.focusable-within:focus-within {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
|
||||
|
||||
.status.status-direct {
|
||||
&.muted {
|
||||
background: transparent;
|
||||
}
|
||||
.status.status-direct {
|
||||
&.muted {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -173,7 +173,8 @@
|
|||
clear: both;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--brand-color--faint);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -158,6 +158,11 @@
|
|||
opacity: 0.6;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 7px;
|
||||
width: 26px;
|
||||
|
|
Ładowanie…
Reference in New Issue