Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Improve accessibility (part 2) (#4377)

Browse source 
* 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
This commit is contained in:
Sorin Davidoi 2017-07-26 13:46:53 +02:00 • committed by Eugen Rochko
parent aa8fa71df6
commit 6a6a62f13f
7 changed files with 53 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/javascript/mastodon/features/ui/components/column.js
View file

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