tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki 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}

5
app/javascript/mastodon/features/ui/components/column_header.js
View File

@ -8,7 +8,6 @@ export default class ColumnHeader extends React.PureComponent {
type: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func,
hideOnMobile: PropTypes.bool,
columnHeaderId: PropTypes.string,
};
@ -17,7 +16,7 @@ export default class ColumnHeader extends React.PureComponent {
}
render () {
const { type, active, hideOnMobile, columnHeaderId } = this.props;
const { type, active, columnHeaderId } = this.props;
let icon = '';
@ -26,7 +25,7 @@ export default class ColumnHeader extends React.PureComponent {
}
return (
<div role='button heading' tabIndex='0' className={`column-header ${active ? 'active' : ''} ${hideOnMobile ? 'hidden-on-mobile' : ''}`} onClick={this.handleClick} id={columnHeaderId || null}>
<div role='heading' tabIndex='0' className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick} id={columnHeaderId || null}>
{icon}
{type}
</div>

6
app/javascript/mastodon/features/ui/components/column_link.js
View File

@ -2,17 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import Link from 'react-router-dom/Link';
const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
const ColumnLink = ({ icon, text, to, href, method }) => {
if (href) {
return (
<a href={href} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}>
<a href={href} className='column-link' data-method={method}>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
{text}
</a>
);
} else {
return (
<Link to={to} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}>
<Link to={to} className='column-link'>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
{text}
</Link>

2
app/javascript/mastodon/features/ui/components/column_loading.js
View File

@ -6,7 +6,7 @@ import ColumnHeader from '../../../components/column_header';
const ColumnLoading = ({ title = '', icon = ' ' }) => (
<Column>
<ColumnHeader icon={icon} title={title} multiColumn={false} />
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} />
<div className='scrollable' />
</Column>
);