cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Improve aria support - Columns and Navigation Drawer Icons (#2299) 

* feat(aria): Add aria-labels to underlabelled tab nav items

The drawer tabs which control primary navigation are only labelled by a title which is not available to many screenreaders. Add an aria-label attribute to each link to improve readability with screenreaders. Organize link attributes so link target is first followed by classname.
Issue #1349

* feat(aria): Replace abstract aria role of section with region

Abstract aria roles such as section should not be used in content. Use non-abstract 'region' aria role instead. That role expects an aria-labelledby attribute with an id. Pass an ID to the column header. Remove the aria-label attribute on the ColumnHeader because the same value is output in plaintext as its child.
Issue #1349

* fix(aria): Remove aria-controls attribute until solution is found

Columns do not have wrappers, so these icons can't point to a column wrapper which it controls. Instead these icons function as triggers to show or hide individual columns.
#1349

* fix(typo): Remove type of aria-labelledby instead of aria-label
This commit is contained in:
Stephen Burgess 2017-04-22 10:30:35 -05:00 committed by Eugen
parent a1174a6d7e
commit 4cfc155560
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/components/features/compose/index.jsx
View File

@ -40,11 +40,11 @@ class Compose extends React.PureComponent {
if (withHeader) { if (withHeader) {
header = ( header = (
<div className='drawer__header'> <div className='drawer__header'>
<Link title={intl.formatMessage(messages.start)} className='drawer__tab' to='/getting-started'><i className='fa fa-fw fa-asterisk' /></Link> <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><i className='fa fa-fw fa-asterisk' /></Link>
<Link title={intl.formatMessage(messages.community)} className='drawer__tab' to='/timelines/public/local'><i className='fa fa-fw fa-users' /></Link> <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><i className='fa fa-fw fa-users' /></Link>
<Link title={intl.formatMessage(messages.public)} className='drawer__tab' to='/timelines/public'><i className='fa fa-fw fa-globe' /></Link> <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i className='fa fa-fw fa-globe' /></Link>
<a title={intl.formatMessage(messages.preferences)} className='drawer__tab' href='/settings/preferences'><i className='fa fa-fw fa-cog' /></a> <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i className='fa fa-fw fa-cog' /></a>
<a title={intl.formatMessage(messages.logout)} className='drawer__tab' href='/auth/sign_out' data-method='delete'><i className='fa fa-fw fa-sign-out' /></a> <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i className='fa fa-fw fa-sign-out' /></a>
</div> </div>
); );
} }

7
app/assets/javascripts/components/features/ui/components/column.jsx
View File

@ -54,14 +54,15 @@ class Column extends React.PureComponent {
render () { render () {
const { heading, icon, children, active, hideHeadingOnMobile } = this.props; const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
let columnHeaderId = null
let header = ''; let header = '';
if (heading) { if (heading) {
header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} />; columnHeaderId = heading.replace(/ /g, '-')
header = <ColumnHeader icon={icon} active={active} type={heading} onClick={this.handleHeaderClick} hideOnMobile={hideHeadingOnMobile} columnHeaderId={columnHeaderId}/>;
} }
return ( return (
<div role='section' aria-label={heading} className='column' onWheel={this.handleWheel}> <div role='region' aria-labelledby={columnHeaderId} className='column' onWheel={this.handleWheel}>
{header} {header}
{children} {children}
</div> </div>

7
app/assets/javascripts/components/features/ui/components/column_header.jsx
View File

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