[B] Fix collect toggle button a11y

- Remove aria-hidden on button
- Always show a label, add or remove
- Remove lengthy label in favor of Add or Remove
- Remove separate screen reader status

Author: jen-castiron

client/src/config/app/locale/en-US/json/shared/actions.json

@@ -16,7 +16,6 @@
     "cancel_delete": "$t(actions.cancel) $t(actions.delete)",
     "clear_selection": "Clear Selection",
     "close": "Close",
-    "collect": "Add \"{{title}}\" to My Starred or Reading Group",
     "confirm": "Confirm",
     "confirm_delete": "$t(actions.confirm) $t(actions.delete)",
     "continue": "Continue",
@@ -84,7 +83,6 @@
     "submit": "Submit",
     "toggle_collecting": "Toggle collecting dialog for {{title}}",
     "toggle_to_state": "Toggle {{label}} to {{state}}",
-    "uncollect": "Remove \"{{title}}\" from My Starred or Reading Group",
     "unflag": "Unflag",
     "unmute": "Unmute",
     "update": "Update",

client/src/frontend/components/collecting/Toggle/Icons.js

@@ -4,7 +4,7 @@ import IconComposer from "global/components/utility/IconComposer";
 
 function Icons({ useOutline }) {
   return (
-    <div className="collecting-toggle__icons">
+    <div className="collecting-toggle__icons" aria-hidden="true">
       <IconComposer
         icon="MinusUnique"
         size={28}

client/src/frontend/components/collecting/Toggle/Text.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 
 function determineText(view, t) {
   switch (view) {
+    case "remove":
     case "remove-active":
       return {
         key: "remove",
@@ -15,6 +16,7 @@ function determineText(view, t) {
         key: "remove-confirm",
         text: t("messages.confirm")
       };
+    case "add":
     case "add-active":
       return {
         key: "add",

client/src/frontend/components/collecting/Toggle/index.js

@@ -6,7 +6,6 @@ import { collectingAPI, requests } from "api";
 import { useDispatch } from "react-redux";
 import { entityStoreActions } from "actions";
 import withReadingGroups from "hoc/withReadingGroups";
-import withScreenReaderStatus from "hoc/withScreenReaderStatus";
 import Dialog from "frontend/components/collecting/Dialog";
 import Text from "./Text";
 import Icons from "./Icons";
@@ -51,7 +50,6 @@ function CollectingToggle({
   onDialogOpen,
   onDialogClose,
   readingGroups: myReadingGroups,
-  setScreenReaderStatus,
   onUncollect,
   hiddenIfUncollected
 }) {
@@ -87,21 +85,6 @@ function CollectingToggle({
   const collectableTitle = normalizeTitle(collectable);
   const useOutlinedStarIcon = outlined && view === "add";
 
-  const screenReaderButtonText = () => {
-    if (hasReadingGroups)
-      return t("actions.toggle_collecting", { title: collectableTitle });
-    switch (view) {
-      case "add":
-      case "add-active":
-        return t("actions.collect", { title: collectableTitle });
-      case "remove":
-      case "remove-active":
-        return t("actions.uncollect", { title: collectableTitle });
-      default:
-        return "";
-    }
-  };
-
   const screenReaderButtonProps = () => {
     if (!hasReadingGroups) return {};
     return {
@@ -116,7 +99,6 @@ function CollectingToggle({
     dispatch(collectRequest);
     setHovered(false);
     setIsCollecting(true);
-    setScreenReaderStatus(t("messages.collected", { title: collectableTitle }));
   }
 
   function doRemove(collection = currentUser) {
@@ -127,16 +109,6 @@ function CollectingToggle({
     });
     setConfirmed(false);
     setHovered(false);
-    setScreenReaderStatus(
-      t("messages.uncollected", { title: collectableTitle })
-    );
-  }
-
-  function onSRClick(event) {
-    event.stopPropagation();
-    // show dialog if user belongs to any RGs
-    if (hasReadingGroups) return setDialogVisible(true);
-    collected ? doRemove() : doCollect();
   }
 
   function onClick(event) {
@@ -181,13 +153,6 @@ function CollectingToggle({
 
   return (
     <>
-      <button
-        className="sr-collecting-toggle screen-reader-text"
-        onClick={onSRClick}
-        {...screenReaderButtonProps()}
-      >
-        {screenReaderButtonText()}
-      </button>
       <button
         onClick={onClick}
         onMouseEnter={onEnter}
@@ -200,15 +165,13 @@ function CollectingToggle({
           "collecting-toggle--filled-always": !outlined,
           "collecting-toggle--toc-hidden": hiddenIfUncollected && !collected
         })}
-        aria-hidden="true"
-        tabIndex={-1}
+        {...screenReaderButtonProps()}
       >
         <div
           className={classNames({
             "collecting-toggle__inner": true,
             [`collecting-toggle__inner--${view}`]: true
           })}
-          aria-hidden="true"
         >
           <Icons useOutline={useOutlinedStarIcon} />
           <Text view={view} />
@@ -235,11 +198,10 @@ CollectingToggle.propTypes = {
   readingGroups: PropTypes.array,
   onDialogOpen: PropTypes.func,
   onDialogClose: PropTypes.func,
-  setScreenReaderStatus: PropTypes.func,
   onUncollect: PropTypes.func,
   inline: PropTypes.bool,
   outlined: PropTypes.bool,
   hiddenIfUncollected: PropTypes.bool
 };
 
-export default withReadingGroups(withScreenReaderStatus(CollectingToggle));
+export default withReadingGroups(CollectingToggle);