[Glitch] Fix column headers accessibility
Portc6d5ea8695
to glitch-soc. SCSS fix inspired by4cf5144099
.
This commit is contained in:
parent
64f74da493
commit
8c190e6235
2 changed files with 9 additions and 14 deletions
|
@ -28,7 +28,6 @@ export default class ColumnHeader extends React.PureComponent {
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
localSettings : ImmutablePropTypes.map,
|
localSettings : ImmutablePropTypes.map,
|
||||||
multiColumn: PropTypes.bool,
|
multiColumn: PropTypes.bool,
|
||||||
focusable: PropTypes.bool,
|
|
||||||
showBackButton: PropTypes.bool,
|
showBackButton: PropTypes.bool,
|
||||||
notifCleaning: PropTypes.bool, // true only for the notification column
|
notifCleaning: PropTypes.bool, // true only for the notification column
|
||||||
notifCleaningActive: PropTypes.bool,
|
notifCleaningActive: PropTypes.bool,
|
||||||
|
@ -41,10 +40,6 @@ export default class ColumnHeader extends React.PureComponent {
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
focusable: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
collapsed: true,
|
collapsed: true,
|
||||||
animating: false,
|
animating: false,
|
||||||
|
@ -91,7 +86,7 @@ export default class ColumnHeader extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
|
const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
|
||||||
const { collapsed, animating, animatingNCD } = this.state;
|
const { collapsed, animating, animatingNCD } = this.state;
|
||||||
|
|
||||||
let title = this.props.title;
|
let title = this.props.title;
|
||||||
|
@ -172,11 +167,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}
|
||||||
{ notifCleaning ? (
|
{ notifCleaning ? (
|
||||||
|
|
|
@ -243,7 +243,6 @@
|
||||||
.column-header {
|
.column-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 15px;
|
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -255,7 +254,7 @@
|
||||||
& > button {
|
& > button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 15px 0 15px 15px;
|
padding: 15px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
|
@ -303,7 +302,6 @@
|
||||||
.column-header__buttons {
|
.column-header__buttons {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: -15px;
|
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue