mirror of
https://github.com/lunaisnotaboy/mastodon.git
synced 2024-09-02 08:23:30 +00:00
Merge remote-tracking branch 'remotes/origin/fix-column-headers-accessibility'
This commit is contained in:
commit
0210e59759
|
@ -23,7 +23,6 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
icon: PropTypes.string.isRequired,
|
||||
active: PropTypes.bool,
|
||||
multiColumn: PropTypes.bool,
|
||||
focusable: PropTypes.bool,
|
||||
showBackButton: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
pinned: PropTypes.bool,
|
||||
|
@ -32,10 +31,6 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
focusable: true,
|
||||
}
|
||||
|
||||
state = {
|
||||
collapsed: true,
|
||||
animating: false,
|
||||
|
@ -68,7 +63,7 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props;
|
||||
const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props;
|
||||
const { collapsed, animating } = this.state;
|
||||
|
||||
const wrapperClassName = classNames('column-header__wrapper', {
|
||||
|
@ -135,11 +130,13 @@ export default class ColumnHeader extends React.PureComponent {
|
|||
|
||||
return (
|
||||
<div className={wrapperClassName}>
|
||||
<h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
|
||||
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
|
||||
<span className='column-header__title'>
|
||||
{title}
|
||||
</span>
|
||||
<h1 className={buttonClassName}>
|
||||
<button onClick={this.handleTitleClick}>
|
||||
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
|
||||
<span className='column-header__title'>
|
||||
{title}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div className='column-header__buttons'>
|
||||
{backButton}
|
||||
|
|
|
@ -2350,6 +2350,19 @@
|
|||
position: relative;
|
||||
z-index: 2;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
& > button {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
|
||||
|
|
Loading…
Reference in a new issue