diff options
Diffstat (limited to 'app/javascript/mastodon/components/column_header.js')
-rw-r--r-- | app/javascript/mastodon/components/column_header.js | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 89e2f9189..d3256fbec 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -21,6 +21,7 @@ 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, @@ -29,6 +30,10 @@ export default class ColumnHeader extends React.PureComponent { onClick: PropTypes.func, }; + static defaultProps = { + focusable: true, + } + state = { collapsed: true, animating: false, @@ -61,7 +66,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props; + const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -123,12 +128,12 @@ export default class ColumnHeader extends React.PureComponent { } if (children || multiColumn) { - collapseButton = <button className={collapsibleButtonClassName} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>; + collapseButton = <button className={collapsibleButtonClassName} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>; } return ( <div className={wrapperClassName}> - <div role='button heading' tabIndex='0' className={buttonClassName} onClick={this.handleTitleClick}> + <div role='heading' tabIndex={focusable && '0'} className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}> <i className={`fa fa-fw fa-${icon} column-header__icon`} /> {title} @@ -138,7 +143,7 @@ export default class ColumnHeader extends React.PureComponent { </div> </div> - <div className={collapsibleClassName} onTransitionEnd={this.handleTransitionEnd}> + <div className={collapsibleClassName} tabIndex={collapsed && -1} onTransitionEnd={this.handleTransitionEnd}> <div className='column-header__collapsible-inner'> {(!collapsed || animating) && collapsedContent} </div> |