Merge remote-tracking branch 'glitch/master' into production

4 files changed, 41 insertions, 34 deletions

diff --git a/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js b/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js
index 7ee28e304..1915b62d5 100644
--- a/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js
+++ b/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js
@@ -51,7 +51,7 @@ class Option extends React.PureComponent {
           <input
             type='text'
             placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
-            maxlength={pollLimits.max_option_chars}
+            maxLength={pollLimits.max_option_chars}
             value={title}
             onChange={this.handleOptionTitleChange}
           />
diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js
index a78117971..d963039dc 100644
--- a/app/javascript/flavours/glitch/features/emoji_picker/index.js
+++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js
@@ -129,6 +129,7 @@ class ModifierPickerMenu extends React.PureComponent {
     active: PropTypes.bool,
     onSelect: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
+    modifier: PropTypes.number,
   };
 
   handleClick = e => {
@@ -165,20 +166,36 @@ class ModifierPickerMenu extends React.PureComponent {
 
   setRef = c => {
     this.node = c;
+    if (this.node) {
+      this.node.querySelector('li:first-child button').focus(); // focus the first element when opened
+    }
   }
 
   render () {
-    const { active } = this.props;
+    const { active, modifier } = this.props;
 
     return (
-      <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
-        <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
-        <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
-      </div>
+      <ul
+        className='emoji-picker-dropdown__modifiers__menu'
+        style={{ display: active ? 'block' : 'none' }}
+        role='menuitem'
+        ref={this.setRef}
+      >
+        {[1, 2, 3, 4, 5, 6].map(i => (
+          <li
+            onClick={this.handleClick}
+            role='menuitemradio'
+            aria-checked={i === (modifier || 1)}
+            data-index={i}
+            key={i}
+          >
+            <Emoji
+              emoji='fist' set='twitter' size={22} sheetSize={32} skin={i}
+              backgroundImageFn={backgroundImageFn}
+            />
+          </li>
+        ))}
+      </ul>
     );
   }
 
@@ -210,10 +227,22 @@ class ModifierPicker extends React.PureComponent {
   render () {
     const { active, modifier } = this.props;
 
+    function setRef(ref) {
+      if (!ref) {
+        return;
+      }
+      // TODO: It would be nice if we could pass props directly to emoji-mart's buttons.
+      const button = ref.querySelector('button');
+      button.setAttribute('aria-haspopup', 'true');
+      button.setAttribute('aria-expanded', active);
+    }
+
     return (
       <div className='emoji-picker-dropdown__modifiers'>
-        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
-        <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
+        <div ref={setRef}>
+          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
+        </div>
+        <ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} />
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js
index 17f064713..4fbd504ef 100644
--- a/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { expandHashtagTimeline } from 'flavours/glitch/actions/timelines';
-import { connectHashtagStream } from 'flavours/glitch/actions/streaming';
 import Masonry from 'react-masonry-infinite';
 import { List as ImmutableList } from 'immutable';
 import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container';
@@ -31,14 +30,6 @@ class HashtagTimeline extends React.PureComponent {
     const { dispatch, hashtag } = this.props;
 
     dispatch(expandHashtagTimeline(hashtag));
-    this.disconnect = dispatch(connectHashtagStream(hashtag, hashtag));
-  }
-
-  componentWillUnmount () {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
   }
 
   handleLoadMore = () => {
diff --git a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js
index 5e2b3fc6d..5f8a369ff 100644
--- a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
-import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming';
 import Masonry from 'react-masonry-infinite';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container';
@@ -42,24 +41,12 @@ class PublicTimeline extends React.PureComponent {
     }
   }
 
-  componentWillUnmount () {
-    this._disconnect();
-  }
-
   _connect () {
     const { dispatch, local } = this.props;
 
     dispatch(local ? expandCommunityTimeline() : expandPublicTimeline());
-    this.disconnect = dispatch(local ? connectCommunityStream() : connectPublicStream());
   }
  
-  _disconnect () {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
   handleLoadMore = () => {
     const { dispatch, statusIds, local } = this.props;
     const maxId = statusIds.last();