fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-16 07:06:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
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

19
app/javascript/mastodon/components/column_header.js
View file

@ -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}

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

@ -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);