Improve accessibility (part 4) (#4408)

* fix(dropdown_menu): Keyboard navigation

* fix(icon_button): Add aria-pressed attribute

* fix(privacy_dropdown): Make accessible

* fix(emoji_picker_dropdown): Make accessible

* fix(icon_button): Support tabIndex

* fix(actions_modal): Remove icon from tab order

* fix(dropdown_menu): Add role=group

* fix(setting_toggle): Toggle via space key

* fix(dropdown_menu): Remove redundant handling of Space key

* fix(emoji_picker_dropdown): Remove redundant Space key handling

* fix(privacy_dropdown): Remove redundant Space key handling

* fix(status): Switch to article and add aria-posinset, aria-setsize

* fix(status_list): Use role=feed and pass more ARIA props to Status

* chore(eslint): jsx-a11y/role-supports-aria-props

1 files changed, 17 insertions, 5 deletions

diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js
index 8e9e6ab94..f62a75183 100644
--- a/app/javascript/mastodon/components/dropdown_menu.js
+++ b/app/javascript/mastodon/components/dropdown_menu.js
@@ -74,6 +74,18 @@ export default class DropdownMenu extends React.PureComponent {
 
   handleHide = () => this.setState({ expanded: false })
 
+  handleToggle = (e) => {
+    if (e.key === 'Enter') {
+      if (this.props.isUserTouching()) {
+        this.handleShow();
+      } else {
+        this.setState({ expanded: !this.state.expanded });
+      }
+    } else if (e.key === 'Escape') {
+      this.setState({ expanded: false });
+    }
+  }
+
   renderItem = (item, i) => {
     if (item === null) {
       return <li key={`sep-${i}`} className='dropdown__sep' />;
@@ -83,7 +95,7 @@ export default class DropdownMenu extends React.PureComponent {
 
     return (
       <li className='dropdown__content-list-item' key={`${text}-${i}`}>
-        <a href={href} target='_blank' rel='noopener' onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'>
+        <a href={href} target='_blank' rel='noopener' role='button' tabIndex='0' autoFocus={i === 0} onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'>
           {text}
         </a>
       </li>
@@ -107,7 +119,7 @@ export default class DropdownMenu extends React.PureComponent {
     }
 
     const dropdownItems = expanded && (
-      <ul className='dropdown__content-list'>
+      <ul role='group' className='dropdown__content-list' onClick={this.handleHide}>
         {items.map(this.renderItem)}
       </ul>
     );
@@ -115,14 +127,14 @@ export default class DropdownMenu extends React.PureComponent {
     // No need to render the actual dropdown if we use the modal. If we
     // don't render anything <Dropdow /> breaks, so we just put an empty div.
     const dropdownContent = !isUserTouching ? (
-      <DropdownContent className={directionClass}>
+      <DropdownContent className={directionClass} >
         {dropdownItems}
       </DropdownContent>
     ) : <div />;
 
     return (
-      <Dropdown ref={this.setRef} active={isUserTouching ? false : undefined} onShow={this.handleShow} onHide={this.handleHide}>
-        <DropdownTrigger className='icon-button' style={iconStyle} aria-label={ariaLabel}>
+      <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}>
           <i className={iconClassname} aria-hidden />
         </DropdownTrigger>