From 3365d8aa5502e6a8b03212116ea4d8998e5b0873 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Mon, 26 Feb 2018 10:24:04 -0500
Subject: [PATCH] Fix issues with asset panel buttons

---
 src/components/action-menu/action-menu.jsx | 10 +++++++++-
 src/components/asset-panel/selector.jsx    |  2 +-
 src/containers/costume-tab.jsx             |  8 +++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx
index 750a0ea3e..dfefb5c51 100644
--- a/src/components/action-menu/action-menu.jsx
+++ b/src/components/action-menu/action-menu.jsx
@@ -27,7 +27,12 @@ class ActionMenu extends React.Component {
             this.closeTimeoutId = null;
         }, CLOSE_DELAY);
     }
-    handleToggleOpenState () {
+    handleToggleOpenState (e) {
+        if (!this.state.isOpen) {
+            e.stopPropagation(); // For touch start, to prevent clicking primary button
+        }
+
+        // Mouse enter back in after timeout was started prevents it from closing.
         if (this.closeTimeoutId) {
             clearTimeout(this.closeTimeoutId);
             this.closeTimeoutId = null;
@@ -69,8 +74,10 @@ class ActionMenu extends React.Component {
                 })}
                 onMouseEnter={this.handleToggleOpenState}
                 onMouseLeave={this.handleClosePopover}
+                onTouchStart={this.handleToggleOpenState}
             >
                 <button
+                    aria-label={mainTitle}
                     className={classNames(styles.button, styles.mainButton)}
                     data-for={mainTooltipId}
                     data-tip={mainTitle}
@@ -96,6 +103,7 @@ class ActionMenu extends React.Component {
                             return (
                                 <div key={tooltipId}>
                                     <button
+                                        aria-label={title}
                                         className={classNames(styles.button, styles.moreButton, {
                                             [styles.comingSoon]: isComingSoon
                                         })}
diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx
index 471e9d942..f2ab58cae 100644
--- a/src/components/asset-panel/selector.jsx
+++ b/src/components/asset-panel/selector.jsx
@@ -21,7 +21,7 @@ const Selector = props => {
 
     if (buttons.length > 0) {
         const {img, title, onClick} = buttons[0];
-        const moreButtons = buttons.slice(0);
+        const moreButtons = buttons.slice(1);
         newButtonSection = (
             <Box className={styles.newButtons}>
                 <ActionMenu
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 4ccc9f820..9621cfba0 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -28,6 +28,11 @@ import costumeLibraryContent from '../lib/libraries/costumes.json';
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 
 const messages = defineMessages({
+    addLibraryBackdropMsg: {
+        defaultMessage: 'Library',
+        description: 'Button to add a backdrop in the editor tab',
+        id: 'gui.costumeTab.addBackdrop'
+    },
     addLibraryCostumeMsg: {
         defaultMessage: 'Library',
         description: 'Button to add a costume in the editor tab',
@@ -177,6 +182,7 @@ class CostumeTab extends React.Component {
             return null;
         }
 
+        const addLibraryMessage = target.isStage ? messages.addLibraryBackdropMsg : messages.addLibraryCostumeMsg;
         const addSurpriseFunc = target.isStage ? this.handleSurpriseBackdrop : this.handleSurpriseCostume;
         const addLibraryFunc = target.isStage ? onNewLibraryBackdropClick : onNewLibraryCostumeClick;
         const addLibraryIcon = target.isStage ? addLibraryBackdropIcon : addLibraryCostumeIcon;
@@ -185,7 +191,7 @@ class CostumeTab extends React.Component {
             <AssetPanel
                 buttons={[
                     {
-                        title: intl.formatMessage(messages.addLibraryCostumeMsg),
+                        title: intl.formatMessage(addLibraryMessage),
                         img: addLibraryIcon,
                         onClick: addLibraryFunc
                     },