commit: 43a29a9d0ff97bf99add56fc5b4acb39971d0fe5 parent: 0dd71af5fab7d2bef59a6e9d467b2742476aee00 Author: Lindsey Bieda <LindseyB@users.noreply.github.com> Date: Thu, 27 Apr 2017 06:01:36 -0400 Add aria-label to icon driven dropdown menus (#2516)Diffstat:
3 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/app/assets/javascripts/components/components/dropdown_menu.jsx b/app/assets/javascripts/components/components/dropdown_menu.jsx @@ -43,13 +43,13 @@ class DropdownMenu extends React.PureComponent { } render () { - const { icon, items, size, direction } = this.props; + const { icon, items, size, direction, ariaLabel } = this.props; const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right"; return ( <Dropdown ref={this.setRef}> - <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}> - <i className={ `fa fa-fw fa-${icon} dropdown__icon` } /> + <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}> + <i className={ `fa fa-fw fa-${icon} dropdown__icon` } aria-hidden={true} /> </DropdownTrigger> <DropdownContent className={directionClass}> @@ -67,7 +67,12 @@ DropdownMenu.propTypes = { icon: PropTypes.string.isRequired, items: PropTypes.array.isRequired, size: PropTypes.number.isRequired, - direction: PropTypes.string + direction: PropTypes.string, + ariaLabel: PropTypes.string +}; + +DropdownMenu.defaultProps = { + ariaLabel: "Menu" }; export default DropdownMenu; diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx @@ -108,7 +108,7 @@ class StatusActionBar extends React.PureComponent { <div className='status__action-bar-button-wrapper'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} className='star-icon' /></div> <div className='status__action-bar-dropdown'> - <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" /> + <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" ariaLabel="More"/> </div> </div> ); diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -75,7 +75,7 @@ class ActionBar extends React.PureComponent { <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div> <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> <div className='detailed-status__button'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div> - <div className='detailed-status__button'><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div> + <div className='detailed-status__button'><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" ariaLabel="More" /></div> </div> ); }