@thecb/components 11.0.1-beta.0 → 11.0.2-beta.0

package/package.json

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

package/src/components/atoms/link/ExternalLink.js

@@ -5,6 +5,7 @@ import { createThemeValues } from "../../../util/themeUtils";
 import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
+import { Box } from "../layouts";
 
 const ExternalLink = forwardRef(
   (
@@ -30,27 +31,39 @@ const ExternalLink = forwardRef(
       "Link",
       variant
     );
+    const handleKeyDown = event => {
+      // This is to address an issue on Safari where the link's tab order and Enter key were not being recognized
+      if (event.key === "Enter" || event.keyCode === 13) {
+        if (newTab) {
+          window.open(href, "_blank");
+        } else {
+          window.location.href = href;
+        }
+      }
+    };
 
     return (
-      <StyledExternalLink
-        href={href}
-        target={newTab ? "_blank" : ""}
-        color={themeValues.externalLinkColor}
-        size={size}
-        lineheight={lineHeight}
-        weight={weight}
-        hovercolor={themeValues.hoverColor}
-        activeColor={themeValues.activeColor}
-        fontFamily={themeValues.fontFamily}
-        tabIndex={tabIndex}
-        extrastyles={extraStyles}
-        rel={newTab ? "noopener" : ""}
-        data-qa={dataQa}
-        aria-label={ariaLabel}
-        ref={ref}
-      >
-        {safeChildren(children, <span />)}
-      </StyledExternalLink>
+      <Box padding="0" tabIndex={tabIndex} onKeyDown={handleKeyDown}>
+        <StyledExternalLink
+          href={href}
+          target={newTab ? "_blank" : ""}
+          color={themeValues.externalLinkColor}
+          size={size}
+          lineheight={lineHeight}
+          weight={weight}
+          hovercolor={themeValues.hoverColor}
+          activeColor={themeValues.activeColor}
+          fontFamily={themeValues.fontFamily}
+          tabIndex="-1"
+          extrastyles={extraStyles}
+          rel={newTab ? "noopener" : ""}
+          data-qa={dataQa}
+          aria-label={ariaLabel}
+          ref={ref}
+        >
+          {safeChildren(children, <span />)}
+        </StyledExternalLink>
+      </Box>
     );
   }
 );

package/src/components/molecules/modal/ModalControlV1.js

@@ -206,6 +206,7 @@ const Modal = ({
                         ) : (
                           <Box padding="0.5rem">
                             <ButtonWithAction
+                              tabIndex="0"
                               action={hideModal}
                               variant="primary"
                               text={closeButtonText}