@thecb/components 11.0.1 → 11.0.2-beta.1

package/package.json

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

package/src/components/atoms/link/ExternalLink.d.ts

@@ -9,6 +9,7 @@ export interface ExternalLinkProps {
   weight?: string;
   extraStyles?: string;
   variant?: string;
+  containerTabIndex?: string;
   tabIndex?: string;
   dataQa?: string;
   ariaLabel?: string;

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(
   (
@@ -16,6 +17,7 @@ const ExternalLink = forwardRef(
       weight = FONT_WEIGHT_REGULAR,
       extraStyles = ``,
       variant = "primary",
+      containerTabIndex = "-1",
       tabIndex = "0",
       dataQa,
       ariaLabel,
@@ -30,27 +32,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={containerTabIndex} 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={tabIndex}
+          extrastyles={extraStyles}
+          rel={newTab ? "noopener" : ""}
+          data-qa={dataQa}
+          aria-label={ariaLabel}
+          ref={ref}
+        >
+          {safeChildren(children, <span />)}
+        </StyledExternalLink>
+      </Box>
     );
   }
 );

package/src/components/atoms/link/Link.stories.js

@@ -20,6 +20,7 @@ const meta = {
     fontWeight: undefined,
     fontSize: undefined,
     margin: undefined,
+    containerTabIndex: undefined,
     tabIndex: undefined,
     extraStyles: undefined,
     dataQa: undefined,
@@ -100,6 +101,13 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
+    containerTabIndex: {
+      description: "Override for tab index value for link's container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
     tabIndex: {
       description: "Override for tab index value for link",
       table: {

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}