@telus-uds/components-web 2.34.2 → 2.35.0

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 28 May 2024 14:52:42 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Jun 2024 16:19:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.35.0
+
+Mon, 24 Jun 2024 16:19:29 GMT
+
+### Minor changes
+
+- `ActionCard`: make interactive card render body function (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.87.0
+- Bump @telus-uds/system-theme-tokens to v2.58.0
+
+### Patches
+
+- `DatePicker`: fix focus life cycle (guillermo.peitzner@telus.com)
+- List: misalignment issue fixed when the text was too long and the container has display: 'flex' (35577399+JoshHC@users.noreply.github.com)
+
+## 2.34.3
+
+Fri, 07 Jun 2024 22:42:09 GMT
+
+### Patches
+
+- Fixes for Footnote accesibility (Mauricio.BatresMontejo@telus.com)
+- `Footnote`: fix hydration errors (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.86.0
+- Bump @telus-uds/system-theme-tokens to v2.57.0
+
 ## 2.34.2
 
-Tue, 28 May 2024 14:52:42 GMT
+Tue, 28 May 2024 11:16:51 GMT
 
 ### Patches
 

package/lib/Card/Card.js

@@ -110,7 +110,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
-      children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
       tokens: {
@@ -185,7 +185,7 @@ Card.propTypes = {
    * Object to set interactive card's properties
    */
   interactiveCard: _propTypes.default.shape({
-    body: _propTypes.default.node,
+    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _componentsBase.getTokensPropType)('Card'),
     variant: _componentsBase.variantProp.propType
   })

package/lib/DatePicker/DatePicker.js

@@ -119,6 +119,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const [inputDate, setInputDate] = _react.default.useState(date instanceof _moment.default ? date : undefined);
   const [inputText, setInputText] = _react.default.useState(date instanceof _moment.default ? date.format(dateFormat) : '');
   const textInputRef = _react.default.useRef();
+  const prevButtonRef = _react.default.useRef();
   const [datePickerPosition, setDatePickerPosition] = _react.default.useState({
     left: 0,
     top: 0
@@ -159,6 +160,19 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
+  _react.default.useEffect(() => {
+    let timeoutId;
+    if (prevButtonRef.current && isFocused) {
+      timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [isFocused]);
+  _react.default.useEffect(() => {
+    if (inputText !== '' && inputDate !== undefined) {
+      var _textInputRef$current;
+      textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
+    }
+  }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
     let {
       focused
@@ -169,7 +183,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsClickedInside(false);
   };
   const handleFocus = event => {
-    if (event.target.tagName === 'INPUT' && !disabled) {
+    if (event.target.tagName === 'INPUT' && !disabled && inputDate === undefined && inputText === '') {
       setIsFocused(true);
     }
   };
@@ -265,7 +279,8 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       variant: {
         size: 'small'
       },
-      testID: prevTestID
+      testID: prevTestID,
+      ref: prevButtonRef
     });
   };
   const renderNextButton = _ref6 => {

package/lib/Footnote/Footnote.js

@@ -308,7 +308,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const headerRef = _react.default.useRef(null);
   const bodyRef = _react.default.useRef(null);
   const contentRef = _react.default.useRef(null);
-  const headingRef = _react.default.useRef(null);
+  const closeButtonRef = _react.default.useRef(null);
   const [data, setData] = _react.default.useState({
     content: null,
     number: null
@@ -329,8 +329,14 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     onClose(event, options);
   }, [onClose]);
 
-  // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
-  const handleClose = _react.default.useCallback(event => {
+  /**
+   * When listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
+   * When the event type is a 'keydonw' and the event key is a 'Tab', using a 'querySelectorAll we obtain all
+   * the interactive elements within the footnote, we order and save the first and the last,
+   * if the footnote is active the focus will be inside the footnote until it is closed,
+   * if there are no interactive elements the focus will remain inside the close button.
+   */
+  const manageFootnoteFocusAndClose = _react.default.useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
@@ -340,6 +346,17 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         closeFootnote(event, {
           returnFocus: true
         });
+      } else if (event.key === 'Tab') {
+        const focusableElements = Array.from(footnoteRef.current.querySelectorAll('*')).filter(_utils.isElementFocusable);
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey && document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        } else if (!event.shiftKey && document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
       }
     } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current = footnoteRef.current) !== null && _footnoteRef$current !== void 0 && _footnoteRef$current.contains(event.target)) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
@@ -356,8 +373,8 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     setBodyHeight(oldHeight);
   };
   const focusHeading = () => {
-    if (Boolean(content) && isVisible && headingRef && headingRef.current !== null) {
-      headingRef.current.focus();
+    if (Boolean(content) && isVisible && closeButtonRef && closeButtonRef.current !== null) {
+      closeButtonRef.current.focus();
     }
   };
   const handleStyledFootnoteTransitionEnd = event => {
@@ -410,24 +427,24 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   _react.default.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
-      document.addEventListener('mousedown', handleClose);
-      window.addEventListener('click', handleClose);
-      window.addEventListener('keydown', handleClose);
-      window.addEventListener('touchstart', handleClose);
+      document.addEventListener('mousedown', manageFootnoteFocusAndClose);
+      window.addEventListener('click', manageFootnoteFocusAndClose);
+      window.addEventListener('keydown', manageFootnoteFocusAndClose);
+      window.addEventListener('touchstart', manageFootnoteFocusAndClose);
       window.addEventListener('touchmove', preventDefault, {
         passive: false
       });
     }
     return () => {
       if (isOpen) {
-        document.removeEventListener('mousedown', handleClose);
-        window.removeEventListener('click', handleClose);
-        window.removeEventListener('keydown', handleClose);
-        window.removeEventListener('touchstart', handleClose);
+        document.removeEventListener('mousedown', manageFootnoteFocusAndClose);
+        window.removeEventListener('click', manageFootnoteFocusAndClose);
+        window.removeEventListener('keydown', manageFootnoteFocusAndClose);
+        window.removeEventListener('touchstart', manageFootnoteFocusAndClose);
         window.removeEventListener('touchmove', preventDefault);
       }
     };
-  }, [handleClose, isOpen]);
+  }, [manageFootnoteFocusAndClose, isOpen]);
 
   // Set data if opening a new footnote
   _react.default.useEffect(() => {
@@ -517,7 +534,6 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             ref: headerRef,
             viewport: viewport,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
-              ref: headingRef,
               footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
               footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
@@ -533,6 +549,7 @@ const Footnote = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+                ref: closeButtonRef,
                 closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
                 closeButtonHeight: `${closeButtonHeight}px`,

package/lib/baseExports.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "A11yText", {
     return _componentsBase.A11yText;
   }
 });
+Object.defineProperty(exports, "ActionCard", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ActionCard;
+  }
+});
 Object.defineProperty(exports, "ActivityIndicator", {
   enumerable: true,
   get: function () {

package/lib/utils/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "htmlAttrs", {
     return _componentsBase.htmlAttrs;
   }
 });
+Object.defineProperty(exports, "isElementFocusable", {
+  enumerable: true,
+  get: function () {
+    return _isElementFocusable.default;
+  }
+});
 Object.defineProperty(exports, "media", {
   enumerable: true,
   get: function () {
@@ -63,6 +69,7 @@ var _transforms = require("./transforms");
 var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
 var _media = _interopRequireDefault(require("./media"));
 var _ssr = _interopRequireDefault(require("./ssr"));
+var _isElementFocusable = _interopRequireDefault(require("./isElementFocusable"));
 var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
 var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/isElementFocusable.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Returns focusable elements inside of the Footnote
+ */
+const isElementFocusable = element => {
+  const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`;
+  return element.matches(focusableElements) && !element.hasAttribute('disabled') && !element.matches('[tabindex="-1"]');
+};
+var _default = isElementFocusable;
+exports.default = _default;

package/lib-module/Card/Card.js

@@ -103,7 +103,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
-      children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {
@@ -178,7 +178,7 @@ Card.propTypes = {
    * Object to set interactive card's properties
    */
   interactiveCard: PropTypes.shape({
-    body: PropTypes.node,
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     variant: variantProp.propType
   })

package/lib-module/DatePicker/DatePicker.js

@@ -114,6 +114,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = React.useState(date instanceof moment ? date.format(dateFormat) : '');
   const textInputRef = React.useRef();
+  const prevButtonRef = React.useRef();
   const [datePickerPosition, setDatePickerPosition] = React.useState({
     left: 0,
     top: 0
@@ -154,6 +155,19 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
+  React.useEffect(() => {
+    let timeoutId;
+    if (prevButtonRef.current && isFocused) {
+      timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [isFocused]);
+  React.useEffect(() => {
+    if (inputText !== '' && inputDate !== undefined) {
+      var _textInputRef$current;
+      textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
+    }
+  }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
     let {
       focused
@@ -164,7 +178,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsClickedInside(false);
   };
   const handleFocus = event => {
-    if (event.target.tagName === 'INPUT' && !disabled) {
+    if (event.target.tagName === 'INPUT' && !disabled && inputDate === undefined && inputText === '') {
       setIsFocused(true);
     }
   };
@@ -260,7 +274,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       variant: {
         size: 'small'
       },
-      testID: prevTestID
+      testID: prevTestID,
+      ref: prevButtonRef
     });
   };
   const renderNextButton = _ref6 => {

package/lib-module/Footnote/Footnote.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { createGlobalStyle } from 'styled-components';
 import { Icon, Portal, selectSystemProps, Typography, useCopy, useTheme, useResponsiveProp, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import OrderedListBase from '../OrderedList/OrderedListBase';
-import { htmlAttrs, media, renderStructuredContent } from '../utils';
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -300,7 +300,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   const headerRef = React.useRef(null);
   const bodyRef = React.useRef(null);
   const contentRef = React.useRef(null);
-  const headingRef = React.useRef(null);
+  const closeButtonRef = React.useRef(null);
   const [data, setData] = React.useState({
     content: null,
     number: null
@@ -321,8 +321,14 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClose(event, options);
   }, [onClose]);
 
-  // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
-  const handleClose = React.useCallback(event => {
+  /**
+   * When listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
+   * When the event type is a 'keydonw' and the event key is a 'Tab', using a 'querySelectorAll we obtain all
+   * the interactive elements within the footnote, we order and save the first and the last,
+   * if the footnote is active the focus will be inside the footnote until it is closed,
+   * if there are no interactive elements the focus will remain inside the close button.
+   */
+  const manageFootnoteFocusAndClose = React.useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
     if (!isVisible) {
       return;
@@ -332,6 +338,17 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
         closeFootnote(event, {
           returnFocus: true
         });
+      } else if (event.key === 'Tab') {
+        const focusableElements = Array.from(footnoteRef.current.querySelectorAll('*')).filter(isElementFocusable);
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey && document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        } else if (!event.shiftKey && document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
       }
     } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current = footnoteRef.current) !== null && _footnoteRef$current !== void 0 && _footnoteRef$current.contains(event.target)) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
       closeFootnote(event, {
@@ -348,8 +365,8 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
     setBodyHeight(oldHeight);
   };
   const focusHeading = () => {
-    if (Boolean(content) && isVisible && headingRef && headingRef.current !== null) {
-      headingRef.current.focus();
+    if (Boolean(content) && isVisible && closeButtonRef && closeButtonRef.current !== null) {
+      closeButtonRef.current.focus();
     }
   };
   const handleStyledFootnoteTransitionEnd = event => {
@@ -402,24 +419,24 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
-      document.addEventListener('mousedown', handleClose);
-      window.addEventListener('click', handleClose);
-      window.addEventListener('keydown', handleClose);
-      window.addEventListener('touchstart', handleClose);
+      document.addEventListener('mousedown', manageFootnoteFocusAndClose);
+      window.addEventListener('click', manageFootnoteFocusAndClose);
+      window.addEventListener('keydown', manageFootnoteFocusAndClose);
+      window.addEventListener('touchstart', manageFootnoteFocusAndClose);
       window.addEventListener('touchmove', preventDefault, {
         passive: false
       });
     }
     return () => {
       if (isOpen) {
-        document.removeEventListener('mousedown', handleClose);
-        window.removeEventListener('click', handleClose);
-        window.removeEventListener('keydown', handleClose);
-        window.removeEventListener('touchstart', handleClose);
+        document.removeEventListener('mousedown', manageFootnoteFocusAndClose);
+        window.removeEventListener('click', manageFootnoteFocusAndClose);
+        window.removeEventListener('keydown', manageFootnoteFocusAndClose);
+        window.removeEventListener('touchstart', manageFootnoteFocusAndClose);
         window.removeEventListener('touchmove', preventDefault);
       }
     };
-  }, [handleClose, isOpen]);
+  }, [manageFootnoteFocusAndClose, isOpen]);
 
   // Set data if opening a new footnote
   React.useEffect(() => {
@@ -509,7 +526,6 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
             ref: headerRef,
             viewport: viewport,
             children: /*#__PURE__*/_jsxs(StyledHeader, {
-              ref: headingRef,
               footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
               footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
@@ -525,6 +541,7 @@ const Footnote = /*#__PURE__*/React.forwardRef((props, ref) => {
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/_jsx(CloseButton, {
+                ref: closeButtonRef,
                 closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
                 closeButtonHeight: `${closeButtonHeight}px`,

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/lib-module/utils/index.js

@@ -4,6 +4,7 @@ import { transformGradient } from './transforms';
 import useTypographyTheme from './useTypographyTheme';
 import media from './media';
 import ssrStyles from './ssr';
+import isElementFocusable from './isElementFocusable';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
-export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, useOverlaidPosition };
+export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition };

package/lib-module/utils/isElementFocusable.js

@@ -0,0 +1,8 @@
+/**
+ * Returns focusable elements inside of the Footnote
+ */
+const isElementFocusable = element => {
+  const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`;
+  return element.matches(focusableElements) && !element.hasAttribute('disabled') && !element.matches('[tabindex="-1"]');
+};
+export default isElementFocusable;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.85.1",
+    "@telus-uds/components-base": "1.87.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.56.0",
+    "@telus-uds/system-theme-tokens": "^2.58.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.34.2"
+  "version": "2.35.0"
 }

package/src/Card/Card.jsx

@@ -116,7 +116,9 @@ const Card = React.forwardRef(
             onPress={onPress}
             {...selectProps(rest)}
           >
-            {interactiveCard?.body}
+            {typeof interactiveCard?.body === 'function'
+              ? interactiveCard.body()
+              : interactiveCard.body}
           </PressableCardBase>
         ) : null}
         {children || fullBleedContentPosition !== 'none' ? (
@@ -197,7 +199,7 @@ Card.propTypes = {
    * Object to set interactive card's properties
    */
   interactiveCard: PropTypes.shape({
-    body: PropTypes.node,
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     variant: variantProp.propType
   })

package/src/DatePicker/DatePicker.jsx

@@ -109,6 +109,7 @@ const DatePicker = React.forwardRef(
       date instanceof moment ? date.format(dateFormat) : ''
     )
     const textInputRef = React.useRef()
+    const prevButtonRef = React.useRef()
     const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
 
     useSafeLayoutEffect(() => {
@@ -130,6 +131,7 @@ const DatePicker = React.forwardRef(
     const [isFocused, setIsFocused] = React.useState(false)
     const [isClickedInside, setIsClickedInside] = React.useState(false)
     const getCopy = useCopy({ dictionary, copy })
+
     React.useEffect(() => {
       /**
        * `date` could be passed as `null` to reset the value so explicitly
@@ -140,6 +142,23 @@ const DatePicker = React.forwardRef(
         setInputText(date instanceof moment ? date.format(dateFormat) : '')
       }
     }, [date, inputDate])
+
+    React.useEffect(() => {
+      let timeoutId
+
+      if (prevButtonRef.current && isFocused) {
+        timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100)
+      }
+
+      return () => clearTimeout(timeoutId)
+    }, [isFocused])
+
+    React.useEffect(() => {
+      if (inputText !== '' && inputDate !== undefined) {
+        textInputRef?.current?.focus()
+      }
+    }, [inputDate, inputText])
+
     const onFocusChange = ({ focused }) => {
       if (!isClickedInside) {
         setIsFocused(focused)
@@ -147,7 +166,12 @@ const DatePicker = React.forwardRef(
       setIsClickedInside(false)
     }
     const handleFocus = (event) => {
-      if (event.target.tagName === 'INPUT' && !disabled) {
+      if (
+        event.target.tagName === 'INPUT' &&
+        !disabled &&
+        inputDate === undefined &&
+        inputText === ''
+      ) {
         setIsFocused(true)
       }
     }
@@ -248,6 +272,7 @@ const DatePicker = React.forwardRef(
         icon={previousIcon}
         variant={{ size: 'small' }}
         testID={prevTestID}
+        ref={prevButtonRef}
       />
     )
     const renderNextButton = ({ onClick }) => (

package/src/Footnote/Footnote.jsx

@@ -15,7 +15,7 @@ import {
 } from '@telus-uds/components-base'
 
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import { htmlAttrs, media, renderStructuredContent } from '../utils'
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils'
 import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -263,7 +263,7 @@ const Footnote = React.forwardRef((props, ref) => {
   const headerRef = React.useRef(null)
   const bodyRef = React.useRef(null)
   const contentRef = React.useRef(null)
-  const headingRef = React.useRef(null)
+  const closeButtonRef = React.useRef(null)
   const [data, setData] = React.useState({ content: null, number: null })
   const [headerHeight, setHeaderHeight] = React.useState('auto')
   const [bodyHeight, setBodyHeight] = React.useState('auto')
@@ -283,8 +283,14 @@ const Footnote = React.forwardRef((props, ref) => {
     [onClose]
   )
 
-  // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
-  const handleClose = React.useCallback(
+  /**
+   * When listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
+   * When the event type is a 'keydonw' and the event key is a 'Tab', using a 'querySelectorAll we obtain all
+   * the interactive elements within the footnote, we order and save the first and the last,
+   * if the footnote is active the focus will be inside the footnote until it is closed,
+   * if there are no interactive elements the focus will remain inside the close button.
+   */
+  const manageFootnoteFocusAndClose = React.useCallback(
     (event) => {
       if (!isVisible) {
         return
@@ -293,6 +299,20 @@ const Footnote = React.forwardRef((props, ref) => {
       if (event.type === 'keydown') {
         if (event.key === 'Escape' || event.key === 27) {
           closeFootnote(event, { returnFocus: true })
+        } else if (event.key === 'Tab') {
+          const focusableElements = Array.from(footnoteRef.current.querySelectorAll('*')).filter(
+            isElementFocusable
+          )
+          const firstElement = focusableElements[0]
+          const lastElement = focusableElements[focusableElements.length - 1]
+
+          if (event.shiftKey && document.activeElement === firstElement) {
+            event.preventDefault()
+            lastElement.focus()
+          } else if (!event.shiftKey && document.activeElement === lastElement) {
+            event.preventDefault()
+            firstElement.focus()
+          }
         }
       } else if (
         (event.type === 'click' || event.type === 'mousedown') &&
@@ -321,8 +341,8 @@ const Footnote = React.forwardRef((props, ref) => {
   }
 
   const focusHeading = () => {
-    if (Boolean(content) && isVisible && headingRef && headingRef.current !== null) {
-      headingRef.current.focus()
+    if (Boolean(content) && isVisible && closeButtonRef && closeButtonRef.current !== null) {
+      closeButtonRef.current.focus()
     }
   }
 
@@ -376,22 +396,22 @@ const Footnote = React.forwardRef((props, ref) => {
   React.useEffect(() => {
     if (isOpen) {
       setIsVisible(true)
-      document.addEventListener('mousedown', handleClose)
-      window.addEventListener('click', handleClose)
-      window.addEventListener('keydown', handleClose)
-      window.addEventListener('touchstart', handleClose)
+      document.addEventListener('mousedown', manageFootnoteFocusAndClose)
+      window.addEventListener('click', manageFootnoteFocusAndClose)
+      window.addEventListener('keydown', manageFootnoteFocusAndClose)
+      window.addEventListener('touchstart', manageFootnoteFocusAndClose)
       window.addEventListener('touchmove', preventDefault, { passive: false })
     }
     return () => {
       if (isOpen) {
-        document.removeEventListener('mousedown', handleClose)
-        window.removeEventListener('click', handleClose)
-        window.removeEventListener('keydown', handleClose)
-        window.removeEventListener('touchstart', handleClose)
+        document.removeEventListener('mousedown', manageFootnoteFocusAndClose)
+        window.removeEventListener('click', manageFootnoteFocusAndClose)
+        window.removeEventListener('keydown', manageFootnoteFocusAndClose)
+        window.removeEventListener('touchstart', manageFootnoteFocusAndClose)
         window.removeEventListener('touchmove', preventDefault)
       }
     }
-  }, [handleClose, isOpen])
+  }, [manageFootnoteFocusAndClose, isOpen])
 
   // Set data if opening a new footnote
   React.useEffect(() => {
@@ -496,7 +516,6 @@ const Footnote = React.forwardRef((props, ref) => {
           <ContentContainer maxWidth={maxWidth}>
             <StyledFootnoteHeader ref={headerRef} viewport={viewport}>
               <StyledHeader
-                ref={headingRef}
                 footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}
                 footnoteHeaderPaddingRight={footnoteHeaderPaddingRight}
                 footnoteHeaderPaddingTop={footnoteHeaderPaddingTop}
@@ -513,6 +532,7 @@ const Footnote = React.forwardRef((props, ref) => {
                   {getCopy('heading')}
                 </Typography>
                 <CloseButton
+                  ref={closeButtonRef}
                   closeButtonBorder={`${closeButtonBorderSize} solid ${closeButtonBorderColor}`}
                   closeButtonWidth={`${closeButtonWidth}px`}
                   closeButtonHeight={`${closeButtonHeight}px`}

package/src/baseExports.js

@@ -5,6 +5,7 @@ export {
   /**
    * Most base components should be re-exported as-is.
    */
+  ActionCard,
   A11yText,
   ActivityIndicator,
   Autocomplete,

package/src/utils/index.js

@@ -4,6 +4,7 @@ import { transformGradient } from './transforms'
 import useTypographyTheme from './useTypographyTheme'
 import media from './media'
 import ssrStyles from './ssr'
+import isElementFocusable from './isElementFocusable'
 import renderStructuredContent from './renderStructuredContent'
 import useOverlaidPosition from './useOverlaidPosition'
 
@@ -16,5 +17,6 @@ export {
   media,
   renderStructuredContent,
   ssrStyles,
+  isElementFocusable,
   useOverlaidPosition
 }

package/src/utils/isElementFocusable.js

@@ -0,0 +1,13 @@
+/**
+ * Returns focusable elements inside of the Footnote
+ */
+const isElementFocusable = (element) => {
+  const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`
+  return (
+    element.matches(focusableElements) &&
+    !element.hasAttribute('disabled') &&
+    !element.matches('[tabindex="-1"]')
+  )
+}
+
+export default isElementFocusable