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