Improve accessibility (part 6) (#4435)

* fix(status_action_bar): Use aria-pressed for reblog and favourite button

* fix(column_back_button): Keyboard accessible

* fix(status_content): Make focusable and accessible

* fix(dropdown_menu): Use aria-expanded instead of aria-pressed

* fix(emoji_picker_dropdown): Use aria-expanded instead of aria-hidden

* feat(icon_button): Add aria-expanded

* fix(privacy_dropdown): Use aria-expanded instead of aria-hidden

app/javascript/mastodon/components/column_back_button.js

@@ -8,14 +8,16 @@ export default class ColumnBackButton extends React.PureComponent {
     router: PropTypes.object,
   };
 
-  handleClick = () => {
+  handleClick = (e) => {
+    if (!e.key || e.key === 'Enter') {
       if (window.history && window.history.length === 1) this.context.router.history.push('/');
       else this.context.router.history.goBack();
     }
+  }
 
   render () {
     return (
-      <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
+      <div role='button' tabIndex='0' onClick={this.handleClick} onKeyDown={this.handleClick} className='column-back-button'>
         <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </div>

app/javascript/mastodon/components/dropdown_menu.js

@@ -134,7 +134,7 @@ export default class DropdownMenu extends React.PureComponent {
 
     return (
       <Dropdown ref={this.setRef} active={isUserTouching ? false : expanded} onShow={this.handleShow} onHide={this.handleHide}>
-        <DropdownTrigger className='icon-button' style={iconStyle} role='button' aria-pressed={expanded} onKeyDown={this.handleToggle} tabIndex='0' aria-label={ariaLabel}>
+        <DropdownTrigger className='icon-button' style={iconStyle} role='button' aria-expanded={expanded} onKeyDown={this.handleToggle} tabIndex='0' aria-label={ariaLabel}>
           <i className={iconClassname} aria-hidden />
         </DropdownTrigger>
 

app/javascript/mastodon/components/icon_button.js

@@ -13,6 +13,7 @@ export default class IconButton extends React.PureComponent {
     size: PropTypes.number,
     active: PropTypes.bool,
     pressed: PropTypes.bool,
+    expanded: PropTypes.bool,
     style: PropTypes.object,
     activeStyle: PropTypes.object,
     disabled: PropTypes.bool,
@@ -77,6 +78,7 @@ export default class IconButton extends React.PureComponent {
           <button
             aria-label={this.props.title}
             aria-pressed={this.props.pressed}
+            aria-expanded={this.props.expanded}
             title={this.props.title}
             className={classes.join(' ')}
             onClick={this.handleClick}

app/javascript/mastodon/components/status_action_bar.js

@@ -151,8 +151,8 @@ export default class StatusActionBar extends ImmutablePureComponent {
     return (
       <div className='status__action-bar'>
         <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
-        <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
-        <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+        <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
         {shareButton}
 
         <div className='status__action-bar-dropdown'>

app/javascript/mastodon/components/status_content.js

@@ -146,7 +146,7 @@ export default class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <div className={classNames} ref={this.setRef} tabIndex='0' aria-label={status.get('search_index')} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}
@@ -162,6 +162,8 @@ export default class StatusContent extends React.PureComponent {
       return (
         <div
           ref={this.setRef}
+          tabIndex='0'
+          aria-label={status.get('search_index')}
           className={classNames}
           style={directionStyle}
           onMouseDown={this.handleMouseDown}
@@ -172,6 +174,8 @@ export default class StatusContent extends React.PureComponent {
     } else {
       return (
         <div
+          tabIndex='0'
+          aria-label={status.get('search_index')}
           ref={this.setRef}
           className='status__content'
           style={directionStyle}

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

@@ -124,7 +124,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
 
     return (
       <Dropdown ref={this.setRef} className='emoji-picker__dropdown' active={active && !loading} onShow={this.onShowDropdown} onHide={this.onHideDropdown}>
-        <DropdownTrigger className='emoji-button' title={title} aria-label={title} aria-pressed={active} role='button' onKeyDown={this.onToggle} tabIndex={0} >
+        <DropdownTrigger className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onKeyDown={this.onToggle} tabIndex={0} >
           <img
             className={`emojione ${active && loading ? 'pulse-loading' : ''}`}
             alt='🙂'

app/javascript/mastodon/features/compose/components/privacy_dropdown.js

@@ -109,7 +109,7 @@ export default class PrivacyDropdown extends React.PureComponent {
 
     return (
       <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
-        <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} pressed={open} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div>
+        <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} expanded={open} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div>
         <div className='privacy-dropdown__dropdown'>
           {open && this.options.map(item =>
             <div role='button' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleClick} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>