monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'remotes/origin/fix-column-headers-accessibility'

This commit is contained in:
David Yip 2018-01-12 20:10:58 -06:00
parent 4773481a90 ac686d5a5d
commit 0210e59759
No known key found for this signature in database
GPG Key ID: 7DA0036508FCC0CC
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/mastodon/components/column_header.js
View File

@ -23,7 +23,6 @@ export default class ColumnHeader extends React.PureComponent {
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
active: PropTypes.bool, active: PropTypes.bool,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
focusable: PropTypes.bool,
showBackButton: PropTypes.bool, showBackButton: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
pinned: PropTypes.bool, pinned: PropTypes.bool,
@ -32,10 +31,6 @@ export default class ColumnHeader extends React.PureComponent {
onClick: PropTypes.func, onClick: PropTypes.func,
}; };
static defaultProps = {
focusable: true,
}
state = { state = {
collapsed: true, collapsed: true,
animating: false, animating: false,
@ -68,7 +63,7 @@ export default class ColumnHeader extends React.PureComponent {
} }
render () { 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 { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', { const wrapperClassName = classNames('column-header__wrapper', {
@ -135,11 +130,13 @@ export default class ColumnHeader extends React.PureComponent {
return ( return (
<div className={wrapperClassName}> <div className={wrapperClassName}>
<h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}> <h1 className={buttonClassName}>
<button onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} /> <i className={`fa fa-fw fa-${icon} column-header__icon`} />
<span className='column-header__title'> <span className='column-header__title'>
{title} {title}
</span> </span>
</button>
<div className='column-header__buttons'> <div className='column-header__buttons'>
{backButton} {backButton}

13
app/javascript/styles/mastodon/components.scss
View File

@ -2350,6 +2350,19 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
outline: 0; 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 { &.active {
box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);