@telus-uds/components-base 3.28.2 → 3.29.1

package/lib/esm/Link/MobileIconTextContent.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon, { iconComponentPropTypes } from '../Icon/Icon';
+import { spacingProps } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MobileIconTextContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = React.useState(0);
+  const latestTranslateYRef = React.useRef(0);
+  const layoutsRef = React.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = React.useCallback(() => {
+    const {
+      container,
+      text,
+      icon
+    } = layoutsRef.current;
+    if (!container || !icon || !icon.height) return;
+    const targetY = text ? text.y + text.height / 2 : container.height / 2;
+    const iconY = icon.y + icon.height / 2;
+    const nextTranslateY = Math.round((targetY - iconY) * 100) / 100;
+    if (!Number.isFinite(nextTranslateY)) return;
+    if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return;
+    latestTranslateYRef.current = nextTranslateY;
+    setTranslateY(nextTranslateY);
+  }, []);
+  const handleContainerLayout = React.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = React.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = React.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/_jsx(Icon, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/_jsx(View, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/_jsxs(Text, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/_jsx(Text, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/_jsx(View, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/_jsx(View, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+};
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});
+export default MobileIconTextContent;

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/TabBar/TabBar.js

@@ -51,6 +51,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
@@ -62,6 +63,7 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
@@ -76,6 +78,8 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
       children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
         label: item.label,
         href: item.href,
@@ -84,7 +88,6 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -109,7 +112,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 };
 const styles = StyleSheet.create({
   tabBar: {

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.28.2",
+  "version": "3.29.1",
   "types": "types/index.d.ts"
 }

package/package.json

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

package/src/Card/CardBase.jsx

@@ -59,9 +59,21 @@ const setBackgroundImage = ({
         case 'left-center':
           backgroundPosition = 'left center'
           break
+        case 'left-start':
+          backgroundPosition = 'left top'
+          break
+        case 'left-end':
+          backgroundPosition = 'left bottom'
+          break
         case 'right-center':
           backgroundPosition = 'right center'
           break
+        case 'right-start':
+          backgroundPosition = 'right top'
+          break
+        case 'right-end':
+          backgroundPosition = 'right bottom'
+          break
         default:
           backgroundPosition = 'center center'
       }

package/src/ColourToggle/ColourBubble.jsx

@@ -5,6 +5,7 @@ import { View, Pressable, Platform } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
+import Tooltip from '../Tooltip'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -52,14 +53,14 @@ const selectBorderBubbleTokens = ({
 })
 
 const ColourBubble = React.forwardRef(
-  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
+  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress, showTooltip }, ref) => {
     const defaultTokens = tokens({ selected: isSelected })
 
     const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
 
     const themeTokens = React.useMemo(() => tokens(), [tokens])
 
-    return (
+    const pressable = (
       <Pressable
         style={(state) => [
           selectGeneralBubbleTokens(resolveColourBubbleTokens(state)),
@@ -76,6 +77,16 @@ const ColourBubble = React.forwardRef(
         <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
       </Pressable>
     )
+
+    if (showTooltip) {
+      return (
+        <Tooltip content={colourName} activateOnHover>
+          {pressable}
+        </Tooltip>
+      )
+    }
+
+    return pressable
   }
 )
 ColourBubble.displayName = 'ColourBubble'
@@ -106,7 +117,11 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: PropTypes.bool
 }
 
 export default ColourBubble

package/src/ColourToggle/ColourToggle.jsx

@@ -11,7 +11,7 @@ import ColourBubble from './ColourBubble'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const ColourToggle = React.forwardRef(
-  ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
+  ({ tokens, variant, defaultColourId, items, onChange, showTooltips, ...rest }, ref) => {
     const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
     const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
 
@@ -40,6 +40,7 @@ const ColourToggle = React.forwardRef(
                 colourHexCode={colourHexCode}
                 colourName={colourName}
                 onPress={handleChangeColour}
+                showTooltip={showTooltips}
               />
             )
           })}
@@ -77,7 +78,11 @@ ColourToggle.propTypes = {
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: PropTypes.bool
 }
 
 export default ColourToggle

package/src/ExpandCollapse/Control.jsx

@@ -54,10 +54,11 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
-function selectTextContainerStyles({ textLine }) {
+function selectTextContainerStyles({ textLine, controlAlign }) {
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && { alignItems: controlAlign })
   }
 }
 
@@ -70,7 +71,16 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = React.forwardRef(
   (
-    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    {
+      onPress,
+      isExpanded,
+      children,
+      tokens,
+      controlAlign,
+      accessibilityRole = 'button',
+      variant,
+      ...rest
+    },
     ref
   ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
@@ -110,7 +120,13 @@ const ExpandCollapseControl = React.forwardRef(
                 </View>
               )}
               <View
-                style={[selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+                style={[
+                  selectTextContainerStyles({
+                    ...themeTokens,
+                    ...(controlAlign && { controlAlign })
+                  }),
+                  staticStyles.bubblePointerEvents
+                ]}
               >
                 {typeof children === 'function'
                   ? children(getControlState(pressableState))
@@ -144,6 +160,10 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: PropTypes.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */

package/src/ExpandCollapse/Panel.jsx

@@ -90,6 +90,7 @@ const ExpandCollapsePanel = React.forwardRef(
       onPress,
       control,
       controlTokens,
+      controlAlign,
       children,
       tokens,
       variant,
@@ -174,6 +175,7 @@ const ExpandCollapsePanel = React.forwardRef(
             {...selectedProps}
             isExpanded={isExpanded}
             tokens={controlTokens}
+            controlAlign={controlAlign}
             variant={variant}
             onPress={handleControlPress}
             ref={controlRef}
@@ -284,6 +286,10 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -7,9 +7,24 @@ import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
 
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 const ExpandCollapseMini = React.forwardRef(
   (
-    { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
+    {
+      children,
+      onToggle = () => {},
+      tokens = {},
+      nativeID,
+      initialOpen = false,
+      dataSet,
+      align,
+      ...rest
+    },
     ref
   ) => {
     const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
@@ -40,10 +55,11 @@ const ExpandCollapseMini = React.forwardRef(
               textLine: tokens.textLine ?? 'none',
               backgroundColor: 'transparent'
             }}
+            controlAlign={align && alignMap[align]}
             // TODO refactor
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => (
-              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+              <ExpandCollapseMiniControl pressableState={pressableState} align={align} {...rest} />
             )}
             controlRef={ref}
             nativeID={nativeID}
@@ -87,7 +103,11 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
 
 export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -7,6 +7,12 @@ import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
 const presentationOnly = {
@@ -24,6 +30,7 @@ const ExpandCollapseMiniControl = React.forwardRef(
       iconPosition = 'right',
       tokens,
       variant = {},
+      align,
       ...rest
     },
     ref
@@ -96,7 +103,8 @@ const ExpandCollapseMiniControl = React.forwardRef(
           ...getTokens(linkState),
           iconSize,
           blockFontSize: fontSize,
-          blockLineHeight: lineHeight
+          blockLineHeight: lineHeight,
+          ...(align && { alignSelf: alignSelfMap[align] })
         })}
         ref={ref}
         {...presentationOnly}
@@ -132,7 +140,11 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
 
 export default ExpandCollapseMiniControl

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