Add aria-label to icon driven dropdown menus (mastodon#2516)

roadlabs · Apr 27, 2017 · 43a29a9 · 43a29a9
1 parent 0dd71af
commit 43a29a9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 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>
     );
   }