@thecb/components 11.11.3 → 11.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.11.3",
+  "version": "11.11.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/AutopayOnIcon.js

@@ -7,6 +7,7 @@ const AutopayOnIcon = ({ color = SEA_GREEN }) => (
     width="12"
     height="13"
     viewBox="0 0 12 13"
+    aria-hidden="true"
   >
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <path

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -98,12 +98,6 @@ const AutopayModalModule = ({
       : navigateToSettings,
     isLoading: deactivatingSchedule
   };
-  const modalLinkHoverFocus = `
-    outline: none;
-    cursor: pointer;
-    text-decoration: underline;
-    text-decoration-color: #317D4F;
-  `;
 
   const hoverStyles = "text-decoration: underline;";
   const activeStyles = "text-decoration: underline;";
@@ -144,15 +138,24 @@ const AutopayModalModule = ({
         return (
           <Box
             padding="0"
+            role="button"
+            tabIndex="0"
             onClick={
               onClick ||
               (() => {
                 toggleModal(true);
               })
             }
+            onKeyDown={
+              onKeyPress ||
+              (e => {
+                e.key === "Enter" && toggleModal(true);
+              })
+            }
             hoverStyles={hoverStyles}
             activeStyles={activeStyles}
-            extraStyles={"cursor: pointer;"}
+            extraStyles={"cursor: pointer; margin-bottom: 5px;"}
+            dataQa={`${shortPlan} On`}
           >
             <Cluster
               justify={isMobile ? "flex-start" : "flex-end"}
@@ -161,18 +164,8 @@ const AutopayModalModule = ({
               <AutopayOnIcon />
               <Text
                 variant="pS"
-                onClick={onClick || (() => toggleModal(true))}
-                onKeyPress={
-                  onKeyPress ||
-                  (e => {
-                    e.key === "Enter" && toggleModal(true);
-                  })
-                }
-                tabIndex="0"
-                dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
                 weight={FONT_WEIGHT_REGULAR}
-                hoverStyles={modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
                 disabled={disableActions}
               >