@telus-uds/components-web 2.34.2 → 2.34.3

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # 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 Fri, 07 Jun 2024 22:36:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.34.3
+
+Fri, 07 Jun 2024 22:36:16 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/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/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/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/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.86.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.57.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.34.3"
 }

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/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