Fix issues with asset panel buttons

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
                                         })}

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

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
                     },