Merge remote-tracking branch 'remotes/origin/fix-column-headers-accessibility'
This commit is contained in:
commit
430f9c37ea
2 changed files with 21 additions and 11 deletions
|
@ -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}>
|
||||||
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
|
<button onClick={this.handleTitleClick}>
|
||||||
<span className='column-header__title'>
|
<i className={`fa fa-fw fa-${icon} column-header__icon`} />
|
||||||
{title}
|
<span className='column-header__title'>
|
||||||
</span>
|
{title}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div className='column-header__buttons'>
|
<div className='column-header__buttons'>
|
||||||
{backButton}
|
{backButton}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue