@telus-uds/components-base 3.29.0 → 3.29.1

package/lib/cjs/StackView/StackWrapBox.js

@@ -50,6 +50,7 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -76,7 +77,8 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const content = (0, _getStackedContent.default)(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -112,6 +114,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: _propTypes.default.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/cjs/StackView/StackWrapGap.js

@@ -35,6 +35,7 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -54,7 +55,8 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const content = (0, _getStackedContent.default)(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,

package/lib/cjs/StackView/getStackedContent.js

@@ -10,8 +10,7 @@ var _Divider = _interopRequireDefault(require("../Divider"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -43,7 +42,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -55,15 +55,24 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.default, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/(0, _react.createElement)(_Box.default, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/_react.default.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/cjs/Tabs/Tabs.js

@@ -15,8 +15,7 @@ var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
 var _TabsDropdown = _interopRequireDefault(require("./TabsDropdown"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);

package/lib/cjs/Tooltip/Tooltip.native.js

@@ -213,7 +213,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
       focus: focused
     };
   };
-  const onTooltipLayout = _ref10 => {
+  const onTooltipLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -221,7 +221,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: _Platform.default.select({

package/lib/cjs/index.js

@@ -816,6 +816,5 @@ Object.keys(_utils).forEach(function (key) {
   });
 });
 var _Portal = _interopRequireDefault(require("./Portal"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/index.js

@@ -280,6 +280,5 @@ var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 var _useVariants = _interopRequireDefault(require("./useVariants"));
 var _isTouchDevice = _interopRequireDefault(require("./isTouchDevice"));
 var _resolveContentMaxWidth = _interopRequireDefault(require("./resolveContentMaxWidth"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/esm/ActionCard/ActionCard.js

@@ -153,11 +153,11 @@ const selectActionIconStyles = _ref9 => {
     marginTop: actionIconMarginTop
   };
 };
-const selectActionIconProps = _ref10 => {
+const selectActionIconProps = _ref0 => {
   let {
     actionIcon,
     actionIconColor
-  } = _ref10;
+  } = _ref0;
   return {
     icon: actionIcon,
     tokens: {
@@ -186,7 +186,7 @@ const ACTION_ICON_ANIMATION_DURATION = 100;
  *   </ActionCard>
  * )
  */
-const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const ActionCard = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
   let {
     icon,
     title,
@@ -197,7 +197,7 @@ const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref11;
+  } = _ref1;
   const themeTokens = useThemeTokens('ActionCard', tokens, variant);
   const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
   const {

package/lib/esm/Button/ButtonBase.js

@@ -218,27 +218,27 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
     default: {}
   });
 };
-const selectButtonStyles = _ref10 => {
+const selectButtonStyles = _ref0 => {
   let {
     textAlign
-  } = _ref10;
+  } = _ref0;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref11 => {
+const selectItemIconTokens = _ref1 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref11;
+  } = _ref1;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     id,
     href,
@@ -254,7 +254,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     iconProps,
     heightFull = true,
     ...rawRest
-  } = _ref12;
+  } = _ref10;
   const {
     themeOptions
   } = useTheme();
@@ -282,8 +282,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
       focused: false
     };
     const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
-    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
-      let [vp, viewportTokens] = _ref13;
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref11) => {
+      let [vp, viewportTokens] = _ref11;
       const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
       acc[vp] = {
         ...staticStyles.row,

package/lib/esm/Carousel/Carousel.js

@@ -761,7 +761,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref10 => {
+  const onHeroContainerLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -771,7 +771,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -780,17 +780,17 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref11 => {
+  const onPreviousNextNavigationButtonLayout = _ref1 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref11;
+    } = _ref1;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const onRootContainerLayout = _ref12 => {
+  const onRootContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -800,7 +800,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref12;
+    } = _ref10;
     return setRootContainerLayout(prevState => ({
       ...prevState,
       x,

package/lib/esm/InputSupports/InputSupports.js

@@ -65,8 +65,7 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation,
-      accessibilityDescribedBy: feedbackId
+      validation: feedbackValidation
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/esm/InputSupports/useInputSupports.js

@@ -25,9 +25,7 @@ const useInputSupports = _ref => {
     accessibilityLabel: label,
     accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
     // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
-    // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
+    accessibilityDescribedBy: joinDefined([hint && hintId, feedback && feedbackId || undefined, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
     accessibilityInvalid: hasValidationError
   };
   return {

package/lib/esm/Modal/Modal.js

@@ -239,7 +239,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: isBackdropClickable && handleClose,
+        onPress: isBackdropClickable ? handleClose : undefined,
         children: /*#__PURE__*/_jsx(View, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })

package/lib/esm/QuickLinks/QuickLinks.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { getTokensPropType, variantProp } from '../utils';
+import { tagsToRoles } from '../utils/a11y/semantics';
 import List from '../List';
 import StackWrap from '../StackView/StackWrap';
 import QuickLinksCard from './QuickLinksCard';
@@ -35,6 +37,10 @@ const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = useThemeTokens('QuickLinks', tokens, variant, {
     viewport
   });
+  const itemAccessibilityRole = Platform.select({
+    web: ['ul', 'ol'].includes(tag) ? tagsToRoles.li : undefined,
+    default: undefined
+  });
   const content = list && /*#__PURE__*/_jsx(List, {
     ref: ref,
     tokens: listTokens,
@@ -49,6 +55,7 @@ const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       justifyContent: stackJustify
     },
     tag: tag,
+    itemAccessibilityRole: itemAccessibilityRole,
     ...rest,
     children: children
   });

package/lib/esm/StackView/StackWrapBox.js

@@ -43,6 +43,7 @@ const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = useViewport();
@@ -69,7 +70,8 @@ const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const content = getStackedContent(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -105,6 +107,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: PropTypes.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/esm/StackView/StackWrapGap.js

@@ -28,6 +28,7 @@ const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = useViewport();
@@ -47,7 +48,8 @@ const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const content = getStackedContent(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/esm/StackView/getStackedContent.js

@@ -36,7 +36,8 @@ const getStackedContent = (children, _ref) => {
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -48,15 +49,24 @@ const getStackedContent = (children, _ref) => {
   const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    _createElement(Box, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/_createElement(Box, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/React.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/esm/Tooltip/Tooltip.native.js

@@ -206,7 +206,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
       focus: focused
     };
   };
-  const onTooltipLayout = _ref10 => {
+  const onTooltipLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -214,7 +214,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.29.0",
+  "version": "3.29.1",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.29.0",
+  "version": "3.29.1",
   "types": "types/index.d.ts"
 }

package/src/InputSupports/InputSupports.jsx

@@ -66,12 +66,7 @@ const InputSupports = React.forwardRef(
           />
         )}
         {typeof children === 'function'
-          ? children({
-              inputId,
-              ...a11yProps,
-              validation: feedbackValidation,
-              accessibilityDescribedBy: feedbackId
-            })
+          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
           : children}
         {feedback || maxCharsReachedErrorMessage ? (
           <Feedback

package/src/InputSupports/useInputSupports.js

@@ -31,8 +31,8 @@ const useInputSupports = ({
         : undefined
     ]), // native only -> replaced with describedBy on web
     accessibilityDescribedBy: joinDefined([
-      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
       hint && hintId,
+      (feedback && feedbackId) || undefined,
       charactersCount
         ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount)
         : undefined

package/src/Modal/Modal.jsx

@@ -262,7 +262,7 @@ const Modal = React.forwardRef(
           </View>
           {/* when a modal becomes open its first focusable element is being automatically focused */}
           {/* and we prefer the close button over backdrop */}
-          <TouchableWithoutFeedback onPress={isBackdropClickable && handleClose}>
+          <TouchableWithoutFeedback onPress={isBackdropClickable ? handleClose : undefined}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
         </ScrollView>

package/src/QuickLinks/QuickLinks.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { getTokensPropType, variantProp } from '../utils'
+import { tagsToRoles } from '../utils/a11y/semantics'
 
 import List from '../List'
 import StackWrap from '../StackView/StackWrap'
@@ -27,6 +29,11 @@ const QuickLinks = React.forwardRef(
       }
     )
 
+    const itemAccessibilityRole = Platform.select({
+      web: ['ul', 'ol'].includes(tag) ? tagsToRoles.li : undefined,
+      default: undefined
+    })
+
     const content = (list && (
       <List ref={ref} tokens={listTokens} showDivider={dividers} tag={tag} {...rest}>
         {children}
@@ -37,6 +44,7 @@ const QuickLinks = React.forwardRef(
         gap={stackGap}
         tokens={{ justifyContent: stackJustify }}
         tag={tag}
+        itemAccessibilityRole={itemAccessibilityRole}
         {...rest}
       >
         {children}

package/src/StackView/StackWrapBox.jsx

@@ -58,6 +58,7 @@ const StackWrapBox = React.forwardRef(
       variant,
       tag,
       accessibilityRole,
+      itemAccessibilityRole,
       ...rest
     },
     ref
@@ -76,7 +77,12 @@ const StackWrapBox = React.forwardRef(
     const gapSize = useSpacingScale(gap)
     const offsetStyle = { [offsetSides[direction]]: -1 * gapSize }
     const boxProps = { [gapSides[direction]]: gap, [spaceSides[direction]]: space }
-    const content = getStackedContent(children, { direction, space: 0, box: boxProps })
+    const content = getStackedContent(children, {
+      direction,
+      space: 0,
+      box: boxProps,
+      itemAccessibilityRole
+    })
 
     return (
       <View
@@ -119,6 +125,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: PropTypes.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/src/StackView/StackWrapGap.jsx

@@ -37,6 +37,7 @@ const StackWrapGap = React.forwardRef(
       children,
       tag,
       accessibilityRole,
+      itemAccessibilityRole,
       ...rest
     },
     ref
@@ -54,7 +55,7 @@ const StackWrapGap = React.forwardRef(
     const size = useSpacingScale(space)
     const gapStyle = { gap: size }
 
-    const content = getStackedContent(children, { direction, space: 0 })
+    const content = getStackedContent(children, { direction, space: 0, itemAccessibilityRole })
 
     return (
       <View