me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Glitch] Fix column headers accessibility

Browse source 
Port c6d5ea8695 to glitch-soc.

SCSS fix inspired by 4cf5144099.
This commit is contained in:
Thibaut Girka 2018-03-16 17:19:38 +01:00
parent 64f74da493
commit 8c190e6235
2 changed files with 9 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/flavours/glitch/components/column_header.js
View file

@ -28,7 +28,6 @@ export default class ColumnHeader extends React.PureComponent {
active: PropTypes.bool,
localSettings : ImmutablePropTypes.map,
multiColumn: PropTypes.bool,
focusable: PropTypes.bool,
showBackButton: PropTypes.bool,
notifCleaning: PropTypes.bool, // true only for the notification column
notifCleaningActive: PropTypes.bool,
@ -41,10 +40,6 @@ export default class ColumnHeader extends React.PureComponent {
intl: PropTypes.object.isRequired,
};
static defaultProps = {
focusable: true,
}
state = {
collapsed: true,
animating: false,
@ -91,7 +86,7 @@ export default class ColumnHeader extends React.PureComponent {
}
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;
let title = this.props.title;
@ -172,11 +167,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}
{ notifCleaning ? (

4
app/javascript/flavours/glitch/styles/components/columns.scss
View file

@ -243,7 +243,6 @@
.column-header {
display: flex;
font-size: 16px;
padding: 15px;
background: lighten($ui-base-color, 4%);
flex: 0 0 auto;
cursor: pointer;
@ -255,7 +254,7 @@
& > button {
margin: 0;
border: none;
padding: 15px 0 15px 15px;
padding: 15px;
color: inherit;
background: transparent;
font: inherit;
@ -303,7 +302,6 @@
.column-header__buttons {
height: 48px;
display: flex;
margin: -15px;
margin-left: 0;
}