treehouse
/
mastodon
20
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Fix column headers accessibility 

Port 08e4c78e78 to glitch-soc.

SCSS fix inspired by 69f13e7bca.
remotes/1698178055505214576/signup-info-prompt
Thibaut Girka 2018-03-16 17:19:38 +01:00
parent 06fc278e4c
commit abf7c5b850
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, 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}>
<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}
{ notifCleaning ? ( { notifCleaning ? (

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

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