@uncinc/uncinc-react-kitchen-sink 2.18.0 → 2.19.0

package/dist/components/AccessibleLinkDescription/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AccessibleLinkDescriptionProps {
+    id: string;
+}
+declare const AccessibleLinkDescription: React.FC<AccessibleLinkDescriptionProps>;
+export default AccessibleLinkDescription;

package/dist/components/AccessibleLinkDescription/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+var AccessibleLinkDescription = function AccessibleLinkDescription(_ref) {
+  var id = _ref.id;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "visually-hidden",
+    id: id
+  }, t(['atoms.accessible_link_description', 'Opens in a new tab']));
+};
+export default AccessibleLinkDescription;

package/dist/components/Button/index.js

@@ -6,9 +6,11 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { v4 as uuidv4 } from 'uuid';
 import gtm from '../../helpers/gtm';
 import { isExternalLink, isHashLink } from '../../helpers/link';
 import withMapping from '../../Context/withMapping';
+import AccessibleLinkDescription from '../AccessibleLinkDescription';
 import './style.scss';
 export var Button = function Button(_ref) {
   var href = _ref.href,
@@ -24,6 +26,7 @@ export var Button = function Button(_ref) {
     target = _ref.target,
     forwardRef = _ref.forwardRef,
     props = _objectWithoutProperties(_ref, _excluded);
+  var accessibleLinkDescriptionId = "accessible-link-description-".concat(uuidv4());
   var classes = classNames('Button', className, {
     'Button--primary': primary,
     'Button--inverted': inverted,
@@ -46,8 +49,7 @@ export var Button = function Button(_ref) {
       // eslint-disable-next-line react/button-has-type
       React.createElement("button", _extends({
         type: htmlType,
-        className: classes,
-        href: href
+        className: classes
       }, props, {
         ref: forwardRef,
         onClick: onClick
@@ -55,35 +57,44 @@ export var Button = function Button(_ref) {
     );
   }
   if (isExternalLink(href)) {
-    return /*#__PURE__*/React.createElement("a", _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
       className: classes,
       href: href,
       target: "_blank",
       rel: "noreferrer noopener"
     }, props, {
       ref: forwardRef,
-      onClick: onClick
-    }), children);
+      onClick: onClick,
+      "aria-describedby": accessibleLinkDescriptionId
+    }), children), /*#__PURE__*/React.createElement(AccessibleLinkDescription, {
+      id: accessibleLinkDescriptionId
+    }));
   }
   if (isHashLink(href)) {
-    return /*#__PURE__*/React.createElement("a", _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
       className: classes,
       href: href,
       target: target,
       rel: "noreferrer noopener"
     }, props, {
       ref: forwardRef,
-      onClick: onClick
-    }), children);
+      onClick: onClick,
+      "aria-describedby": target === '_blank' ? accessibleLinkDescriptionId : undefined
+    }), children), target === '_blank' && /*#__PURE__*/React.createElement(AccessibleLinkDescription, {
+      id: accessibleLinkDescriptionId
+    }));
   }
-  return /*#__PURE__*/React.createElement(Link, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Link, _extends({
     to: href,
     className: classes,
     target: target
   }, props, {
     ref: forwardRef,
-    onClick: onClick
-  }), children);
+    onClick: onClick,
+    "aria-describedby": target === '_blank' ? accessibleLinkDescriptionId : undefined
+  }), children), target === '_blank' && /*#__PURE__*/React.createElement(AccessibleLinkDescription, {
+    id: accessibleLinkDescriptionId
+  }));
 };
 Button.defaultProps = {
   primary: true,

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as Accordion } from "./components/Accordion";
 export { default as AccordionItem } from "./components/Accordion/AccordionItem";
 export { default as AccordionItemVariant } from "./components/Accordion/AccordionItemVariant";
 export { default as Button } from "./components/Button";
+export { default as AccessibleLinkDescription } from "./components/AccessibleLinkDescription";
 export { default as Hamburger } from "./components/Hamburger";
 export { default as Image } from "./components/Image";
 export { default as Icon } from "./components/Icon";

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as Accordion } from './components/Accordion';
 export { default as AccordionItem } from './components/Accordion/AccordionItem';
 export { default as AccordionItemVariant } from './components/Accordion/AccordionItemVariant';
 export { default as Button } from './components/Button';
+export { default as AccessibleLinkDescription } from './components/AccessibleLinkDescription';
 export { default as Hamburger } from './components/Hamburger';
 export { default as Image } from './components/Image';
 export { default as Icon } from './components/Icon';

package/dist/setupTests.js

@@ -16,4 +16,11 @@ jest.mock('react-i18next', function () {
       };
     }
   };
+});
+jest.mock('uuid', function () {
+  return {
+    v4: function v4() {
+      return '123e4567-e89b-12d3-a456-426614174000';
+    }
+  };
 });

package/dist/styles/assets/_base.scss

@@ -6,6 +6,18 @@
   display: none !important;
 }
 
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 html {
   font-size: 62.5%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",