diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-07-26 13:46:53 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-26 13:46:53 +0200 |
commit | 6a6a62f13fd7846ba032543635580980b74ea14c (patch) | |
tree | efa99e337d4510f1c552d722d97295cb600c2cc3 /app/javascript/mastodon/features/ui/components/column.js | |
parent | aa8fa71df6c57297ea859d3deca5794612d4d281 (diff) |
Improve accessibility (part 2) (#4377)
* fix(column_header): Invalid ARIA role * fix(column): Remove hidden nodes from the DOM * refactor(column_link): Remove unused property hideOnMobile * fix(column_header): Use aria-pressed * fix(column_header): Make collapsed content not focusable, add focusable property * fix(column_loading): Make header non-focusable * fix(column_settings): Use role to group the toggles
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/column.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/column.js | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js index ce1dca171..2d46264a2 100644 --- a/app/javascript/mastodon/features/ui/components/column.js +++ b/app/javascript/mastodon/features/ui/components/column.js @@ -3,6 +3,7 @@ import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; import scrollTop from '../../../scroll'; +import { isMobile } from '../../../is_mobile'; export default class Column extends React.PureComponent { @@ -37,13 +38,12 @@ export default class Column extends React.PureComponent { render () { const { heading, icon, children, active, hideHeadingOnMobile } = this.props; - let columnHeaderId = null; - let header = ''; + const showHeading = !hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)); - if (heading) { - columnHeaderId = heading.replace(/ /g, '-'); - header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId} />; - } + const columnHeaderId = showHeading && heading.replace(/ /g, '-'); + const header = showHeading && ( + <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} columnHeaderId={columnHeaderId} /> + ); return ( <div ref={this.setRef} |