@splunk/react-ui 4.28.1 → 4.29.0

package/CHANGELOG.md

@@ -1,6 +1,27 @@
 Change Log
 ============
 
+4.29.0 - April 2, 2024
+----------
+Bug Fixes:
+* Removable `Chip` screen reader announcement has been improved (SUI-5948).
+* `ComboBox` no longer incorrectly sets the `aria-activedescendant` attribute when closed (SUI-6108).
+* `Multiselect` no longer announces incorrect available actions to screen readers (SUI-6009).
+
+Docs: 
+`MessageBar` examples updated to demonstrate method for labelling the component to meet WAI-ARIA specification (SUI-5941).
+
+Deprecations:
+* `WaitSpinner`'s `children` prop has been deprecated and will be removed in the next major version (SUI-6081).
+
+4.28.2 - March 22, 2024
+----------
+Bug Fixes:
+* `Table.Row` no longer ignores provided `style` properties (SUI-6156).
+
+Typescript:
+* `WaitSpinner`'s `screenReaderText` type includes `null` now (SUI-6081).
+
 4.28.1 - March 21, 2024
 ----------
 Bug Fixes:

package/Chip.js

@@ -61,7 +61,7 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ V
+        default: () => /* reexport */ G
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
@@ -82,39 +82,44 @@
     const d = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/color"
     const f = require("@splunk/ui-utils/color");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const v = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const v = require("@splunk/themes");
+    const b = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const g = require("@splunk/react-ui/ScreenReaderContent");
+    var m =  e.n(g);
     // CONCATENATED MODULE: external "styled-components"
-    const b = require("styled-components");
-    var g =  e.n(b);
+    const h = require("styled-components");
+    var C =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const m = require("@splunk/react-ui/Clickable");
-    var h =  e.n(m);
+    const y = require("@splunk/react-ui/Clickable");
+    var x =  e.n(y);
     // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
-    var C = g().div.withConfig({
+    var $ = C().div.withConfig({
         displayName: "ChipStyles__StyledBasic",
         componentId: "sc-1sd3tsh-0"
-    })([ "", ";background-color:", ";border:1px solid transparent;flex:0 1 auto;max-width:calc(100% - 3px);border-radius:2px;", ";", " ", " ", "" ], v.mixins.reset("inline-flex"), (0, 
-    v.pickVariant)("$appearance", {
+    })([ "", ";background-color:", ";border:1px solid transparent;flex:0 1 auto;max-width:calc(100% - 3px);border-radius:2px;", ";", " ", " ", "" ], b.mixins.reset("inline-flex"), (0, 
+    b.pickVariant)("$appearance", {
         default: {
             enterprise: {
-                dark: v.variables.gray45,
-                light: v.variables.gray92
+                dark: b.variables.gray45,
+                light: b.variables.gray92
             },
-            prisma: v.variables.neutral100
+            prisma: b.variables.neutral100
         },
         info: {
-            enterprise: v.variables.infoColorL30
+            enterprise: b.variables.infoColorL30
         },
         success: {
-            enterprise: v.variables.successColorL30
+            enterprise: b.variables.successColorL30
         },
         warning: {
-            enterprise: v.variables.warningColorL30
+            enterprise: b.variables.warningColorL30
         },
         error: {
-            enterprise: v.variables.errorColorL30,
-            prisma: v.variables.accentColorNegative
+            enterprise: b.variables.errorColorL30,
+            prisma: b.variables.accentColorNegative
         },
         outline: {
             prisma: "transparent"
@@ -125,196 +130,196 @@
         }
     }), (function(e) {
         var r = e.$appearance;
-        return r === "outline" && (0, b.css)([ "border-color:", ";" ], v.variables.interactiveColorBorder);
-    }), (0, v.pick)({
-        enterprise: (0, b.css)([ "color:", ";line-height:", ";margin:0 2px 2px 0;" ], v.variables.textGray, v.variables.lineHeight),
-        prisma: (0, b.css)([ "color:", ";line-height:16px;margin:1px;" ], (function(e) {
+        return r === "outline" && (0, h.css)([ "border-color:", ";" ], b.variables.interactiveColorBorder);
+    }), (0, b.pick)({
+        enterprise: (0, h.css)([ "color:", ";line-height:", ";margin:0 2px 2px 0;" ], b.variables.textGray, b.variables.lineHeight),
+        prisma: (0, h.css)([ "color:", ";line-height:16px;margin:1px;" ], (function(e) {
             var r = e.$appearance;
-            return r === "error" ? v.variables.contentColorInverted : v.variables.contentColorDefault;
+            return r === "error" ? b.variables.contentColorInverted : b.variables.contentColorDefault;
         }))
-    }), (0, v.pick)({
+    }), (0, b.pick)({
         enterprise: {
-            comfortable: (0, b.css)([ "height:calc(", " - 6px);padding:4px 7px;" ], v.variables.inputHeight),
-            compact: (0, b.css)([ "height:calc(", " - 6px);padding:2px 4px;" ], v.variables.inputHeight)
+            comfortable: (0, h.css)([ "height:calc(", " - 6px);padding:4px 7px;" ], b.variables.inputHeight),
+            compact: (0, h.css)([ "height:calc(", " - 6px);padding:2px 4px;" ], b.variables.inputHeight)
         },
         prisma: {
-            comfortable: (0, b.css)([ "height:calc(", " - 8px);padding:7px 7px;font-size:", ";" ], v.variables.inputHeight, v.variables.fontSizeSmall),
-            compact: (0, b.css)([ "height:calc(", " - 8px);padding:3px 7px;font-size:", ";" ], v.variables.inputHeight, v.variables.fontSizeSmall)
+            comfortable: (0, h.css)([ "height:calc(", " - 8px);padding:7px 7px;font-size:", ";" ], b.variables.inputHeight, b.variables.fontSizeSmall),
+            compact: (0, h.css)([ "height:calc(", " - 8px);padding:3px 7px;font-size:", ";" ], b.variables.inputHeight, b.variables.fontSizeSmall)
         }
     }), (function(e) {
         var r = e.$disabled;
-        return r && (0, b.css)([ "background-color:", ";" ], (0, v.pickVariant)("$appearance", {
+        return r && (0, h.css)([ "background-color:", ";" ], (0, b.pickVariant)("$appearance", {
             default: {
                 enterprise: {
                     dark: "rgba(0, 0, 0, 0.15)",
                     light: "rgba(0, 0, 0, 0.05)"
                 },
-                prisma: v.variables.interactiveColorBackgroundDisabled
+                prisma: b.variables.interactiveColorBackgroundDisabled
             },
             info: {
-                enterprise: v.mixins.colorWithAlpha(v.variables.infoColorL10, .3)
+                enterprise: b.mixins.colorWithAlpha(b.variables.infoColorL10, .3)
             },
             success: {
-                enterprise: v.mixins.colorWithAlpha(v.variables.successColorL10, .3)
+                enterprise: b.mixins.colorWithAlpha(b.variables.successColorL10, .3)
             },
             warning: {
-                enterprise: v.mixins.colorWithAlpha(v.variables.warningColorL10, .3)
+                enterprise: b.mixins.colorWithAlpha(b.variables.warningColorL10, .3)
             },
             error: {
-                enterprise: v.mixins.colorWithAlpha(v.variables.errorColorL10, .3),
-                prisma: v.variables.interactiveColorBackgroundDisabled
+                enterprise: b.mixins.colorWithAlpha(b.variables.errorColorL10, .3),
+                prisma: b.variables.interactiveColorBackgroundDisabled
             },
             outline: {
-                prisma: v.variables.interactiveColorBackgroundDisabled
+                prisma: b.variables.interactiveColorBackgroundDisabled
             },
             custom: {
                 enterprise: {
                     dark: "rgba(0, 0, 0, 0.15)",
                     light: "rgba(0, 0, 0, 0.05)"
                 },
-                prisma: v.variables.interactiveColorBackgroundDisabled
+                prisma: b.variables.interactiveColorBackgroundDisabled
             }
         }));
     }));
-    var y = g()(C).withConfig({
+    var k = C()($).withConfig({
         displayName: "ChipStyles__Styled",
         componentId: "sc-1sd3tsh-1"
     })([ "align-items:center;" ]);
-    var x = g().div.withConfig({
+    var S = C().div.withConfig({
         displayName: "ChipStyles__StyledInner",
         componentId: "sc-1sd3tsh-2"
-    })([ "", ";" ], (0, v.pick)({
-        enterprise: (0, b.css)([ "display:flex;max-width:100%;" ]),
-        prisma: (0, b.css)([ "display:grid;max-width:100%;height:16px;column-gap:", ";", ";" ], (0, 
-        v.pick)({
+    })([ "", ";" ], (0, b.pick)({
+        enterprise: (0, h.css)([ "display:flex;max-width:100%;" ]),
+        prisma: (0, h.css)([ "display:grid;max-width:100%;height:16px;column-gap:", ";", ";" ], (0, 
+        b.pick)({
             prisma: {
-                compact: v.variables.spacingXSmall,
-                comfortable: v.variables.spacingSmall
+                compact: b.variables.spacingXSmall,
+                comfortable: b.variables.spacingSmall
             }
         }), (function(e) {
             var r = e.$icon, a = e.$removable;
-            var o = (0, b.css)([ "grid-template-columns:1fr;" ]);
+            var o = (0, h.css)([ "grid-template-columns:1fr;" ]);
             if (r && a) {
-                o = (0, b.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
+                o = (0, h.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
             } else if (r) {
-                o = (0, b.css)([ "grid-template-columns:0fr 1fr;" ]);
+                o = (0, h.css)([ "grid-template-columns:0fr 1fr;" ]);
             } else if (a) {
-                o = (0, b.css)([ "grid-template-columns:1fr 0fr;" ]);
+                o = (0, h.css)([ "grid-template-columns:1fr 0fr;" ]);
             }
             return o;
         }))
     }));
-    var $ = g().div.withConfig({
+    var w = C().div.withConfig({
         displayName: "ChipStyles__StyledIcon",
         componentId: "sc-1sd3tsh-3"
-    })([ "", ";margin-right:", ";color:", ";" ], (0, v.pick)({
+    })([ "", ";margin-right:", ";color:", ";" ], (0, b.pick)({
         prisma: {
-            compact: (0, b.css)([ "font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}" ]),
-            comfortable: (0, b.css)([ "font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}" ])
+            compact: (0, h.css)([ "font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}" ]),
+            comfortable: (0, h.css)([ "font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}" ])
         },
-        enterprise: (0, b.css)([ "flex:0 0 auto;" ])
-    }), (0, v.pick)({
+        enterprise: (0, h.css)([ "flex:0 0 auto;" ])
+    }), (0, b.pick)({
         enterprise: "3px"
-    }), (0, v.pickVariant)("$disabled", {
-        true: v.variables.contentColorDisabled,
+    }), (0, b.pickVariant)("$disabled", {
+        true: b.variables.contentColorDisabled,
         false: {
             enterprise: function e(r) {
                 var a = r.$foregroundColor;
-                return a || v.variables.contentColorDefault;
+                return a || b.variables.contentColorDefault;
             },
             prisma: function e(r) {
                 var a = r.$foregroundColor, o = r.$appearance;
-                return a || (o === "error" ? v.variables.contentColorInverted : v.variables.contentColorDefault);
+                return a || (o === "error" ? b.variables.contentColorInverted : b.variables.contentColorDefault);
             }
         }
     }));
-    var k = g().div.withConfig({
+    var O = C().div.withConfig({
         displayName: "ChipStyles__StyledLabel",
         componentId: "sc-1sd3tsh-4"
-    })([ "", " ", ";color:", ";" ], v.mixins.ellipsis(), (0, v.pick)({
-        enterprise: (0, b.css)([ "flex:0 1 auto;" ])
-    }), (0, v.pickVariant)("$disabled", {
-        true: v.variables.contentColorDisabled,
+    })([ "", " ", ";color:", ";" ], b.mixins.ellipsis(), (0, b.pick)({
+        enterprise: (0, h.css)([ "flex:0 1 auto;" ])
+    }), (0, b.pickVariant)("$disabled", {
+        true: b.variables.contentColorDisabled,
         false: {
             enterprise: function e(r) {
                 var a = r.$appearance, o = r.$foregroundColor;
-                return o || (a === "default" || a === "outline" ? v.variables.contentColorDefault : v.variables.gray30);
+                return o || (a === "default" || a === "outline" ? b.variables.contentColorDefault : b.variables.gray30);
             },
             prisma: function e(r) {
                 var a = r.$appearance, o = r.$foregroundColor;
-                return o || (a === "error" ? v.variables.contentColorInverted : v.variables.contentColorActive);
+                return o || (a === "error" ? b.variables.contentColorInverted : b.variables.contentColorActive);
             }
         }
     }));
-    var S = g().span.withConfig({
+    var R = C().span.withConfig({
         displayName: "ChipStyles__StyledRemove",
         componentId: "sc-1sd3tsh-5"
-    })([ "", ";" ], (0, v.pick)({
-        enterprise: (0, b.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";" ], v.variables.spacingQuarter, (0, 
-        v.pick)({
+    })([ "", ";" ], (0, b.pick)({
+        enterprise: (0, h.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";" ], b.variables.spacingQuarter, (0, 
+        b.pick)({
             compact: "9px",
             comfortable: "10.5px"
-        }), (0, v.pickVariant)("$disabled", {
-            true: v.variables.contentColorDisabled,
+        }), (0, b.pickVariant)("$disabled", {
+            true: b.variables.contentColorDisabled,
             false: {
                 enterprise: function e(r) {
                     var a = r.$foregroundColor, o = r.$appearance;
-                    return a || (o === "default" || o === "outline" ? v.variables.textGray : v.variables.gray30);
+                    return a || (o === "default" || o === "outline" ? b.variables.textGray : b.variables.gray30);
                 }
             }
         })),
-        prisma: (0, b.css)([ "font-size:", ";display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";" ], (0, 
-        v.pick)({
+        prisma: (0, h.css)([ "font-size:", ";display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";" ], (0, 
+        b.pick)({
             compact: "9px",
             comfortable: "10.5px"
         }), (function(e) {
             var r = e.$disabled, a = e.$foregroundColor;
-            return r ? v.variables.contentColorDisabled : a || "inherit";
+            return r ? b.variables.contentColorDisabled : a || "inherit";
         }))
     }));
-    var w = g()(C.withComponent(h())).withConfig({
+    var _ = C()($.withComponent(x())).withConfig({
         displayName: "ChipStyles__StyledClickable",
         componentId: "sc-1sd3tsh-6"
     })([ "flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";" ], (0, 
-    v.pick)({
-        enterprise: (0, b.css)([ "box-shadow:", ";color:", ";" ], v.variables.focusShadow, v.variables.linkColor),
-        prisma: (0, b.css)([ "color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}" ], v.variables.contentColorActive, 
+    b.pick)({
+        enterprise: (0, h.css)([ "box-shadow:", ";color:", ";" ], b.variables.focusShadow, b.variables.linkColor),
+        prisma: (0, h.css)([ "color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}" ], b.variables.contentColorActive, 
         /* sc-sel */
-        S, v.variables.interactiveColorOverlayHover, v.variables.focusColor)
-    }), (0, v.pick)({
-        enterprise: (0, b.css)([ "background-color:", ";", "{color:", ";}" ], (0, v.pickVariant)("$appearance", {
+        R, b.variables.interactiveColorOverlayHover, b.variables.focusColor)
+    }), (0, b.pick)({
+        enterprise: (0, h.css)([ "background-color:", ";", "{color:", ";}" ], (0, b.pickVariant)("$appearance", {
             default: {
-                dark: v.variables.gray30,
-                light: v.variables.gray96
+                dark: b.variables.gray30,
+                light: b.variables.gray96
             },
-            info: v.variables.infoColorL20,
-            success: v.variables.successColorL20,
-            warning: v.variables.warningColorL20,
-            error: v.variables.errorColorL20,
+            info: b.variables.infoColorL20,
+            success: b.variables.successColorL20,
+            warning: b.variables.warningColorL20,
+            error: b.variables.errorColorL20,
             custom: {
-                dark: v.variables.gray30,
-                light: v.variables.gray96
+                dark: b.variables.gray30,
+                light: b.variables.gray96
             }
         }), 
         /* sc-sel */
-        S, (function(e) {
+        R, (function(e) {
             var r = e.$foregroundColor;
-            return r || v.variables.linkColor;
+            return r || b.variables.linkColor;
         })),
-        prisma: (0, b.css)([ "color:", ";", "{background-color:", ";", ";}" ], v.variables.contentColorActive, 
+        prisma: (0, h.css)([ "color:", ";", "{background-color:", ";", ";}" ], b.variables.contentColorActive, 
         /* sc-sel */
-        S, v.variables.interactiveColorOverlayHover, (function(e) {
+        R, b.variables.interactiveColorOverlayHover, (function(e) {
             var r = e.$appearance;
-            return r === "error" && (0, b.css)([ "color:", ";" ], v.variables.contentColorInverted);
+            return r === "error" && (0, h.css)([ "color:", ";" ], b.variables.contentColorInverted);
         }))
-    }), (0, v.pick)({
-        prisma: (0, b.css)([ "&:not([disabled]):active ", "{background-color:", ";}" ], 
+    }), (0, b.pick)({
+        prisma: (0, h.css)([ "&:not([disabled]):active ", "{background-color:", ";}" ], 
         /* sc-sel */
-        S, v.variables.interactiveColorOverlayActive)
+        R, b.variables.interactiveColorOverlayActive)
     }));
     // CONCATENATED MODULE: ./src/Chip/Chip.tsx
-    function O() {
-        O = Object.assign || function(e) {
+    function j() {
+        j = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var o in a) {
@@ -325,30 +330,30 @@
             }
             return e;
         };
-        return O.apply(this, arguments);
+        return j.apply(this, arguments);
     }
-    function _(e, r) {
-        return q(e) || E(e, r) || j(e, r) || R();
+    function q(e, r) {
+        return L(e) || D(e, r) || I(e, r) || E();
     }
-    function R() {
+    function E() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function j(e, r) {
+    function I(e, r) {
         if (!e) return;
-        if (typeof e === "string") return I(e, r);
+        if (typeof e === "string") return A(e, r);
         var a = Object.prototype.toString.call(e).slice(8, -1);
         if (a === "Object" && e.constructor) a = e.constructor.name;
         if (a === "Map" || a === "Set") return Array.from(e);
-        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return I(e, r);
+        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return A(e, r);
     }
-    function I(e, r) {
+    function A(e, r) {
         if (r == null || r > e.length) r = e.length;
         for (var a = 0, o = new Array(r); a < r; a++) {
             o[a] = e[a];
         }
         return o;
     }
-    function E(e, r) {
+    function D(e, r) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var a = [];
         var o = true;
@@ -371,12 +376,12 @@
         }
         return a;
     }
-    function q(e) {
+    function L(e) {
         if (Array.isArray(e)) return e;
     }
-    function A(e, r) {
+    function z(e, r) {
         if (e == null) return {};
-        var a = D(e, r);
+        var a = N(e, r);
         var o, n;
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -389,7 +394,7 @@
         }
         return a;
     }
-    function D(e, r) {
+    function N(e, r) {
         if (e == null) return {};
         var a = {};
         var o = Object.keys(e);
@@ -401,7 +406,7 @@
         }
         return a;
     }
-    var L = {
+    var P = {
         appearance: l().oneOf([ "info", "success", "warning", "error", "outline" ]),
         backgroundColor: l().string,
         children: l().node.isRequired,
@@ -413,14 +418,14 @@
         /** Includes this value in `onRequestRemove` callbacks. */
         value: l().any
     };
-    var z = {
+    var T = {
         disabled: false
     };
-    function N(e) {
+    function H(e) {
         return !!e.onRequestRemove;
     }
-    function P(e) {
-        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, t = e.icon, i = A(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
+    function B(e) {
+        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, t = e.icon, i = z(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
  // Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
                 var l = n && (0, f.isCSSColor)(n) ? n : undefined;
         var s = a && (0, f.isCSSColor)(a) ? a : undefined;
@@ -434,83 +439,87 @@
         };
         return [ c, i ];
     }
-    function T(e) {
-        var r = P(e), n = _(r, 2), i = n[0], l = n[1];
-        var s = i.$appearance, p = i.$foregroundColor, f = i.disabled, b = i.icon, g = A(i, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var m = l.children, h = l.elementRef, C = l.onRequestRemove, y = l.value, R = A(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
-        var j = (0, v.useSplunkTheme)(), I = j.isEnterprise;
-        var E = (0, a.useCallback)((function(e) {
-            C(e, {
-                value: y
+    function V(e) {
+        var r = B(e), n = q(r, 2), i = n[0], l = n[1];
+        var s = i.$appearance, p = i.$foregroundColor, f = i.disabled, g = i.icon, h = z(i, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var C = l.children, y = l.elementRef, x = l.onRequestRemove, $ = l.value, k = z(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
+        var E = (0, b.useSplunkTheme)(), I = E.isEnterprise;
+        var A = typeof C === "string";
+        var D = A ? (0, v.sprintf)((0, d._)("Remove %(children)s"), {
+            children: C
+        }) : (0, d._)("Remove");
+        var L = (0, a.useCallback)((function(e) {
+            x(e, {
+                value: $
             });
-        }), [ C, y ]);
+        }), [ x, $ ]);
         
-        return o().createElement(w, O({
+        return o().createElement(_, j({
             $appearance: s,
             $disabled: f,
             $foregroundColor: p,
-            "data-test-value": y,
+            "data-test-value": $,
             disabled: f,
-            elementRef: h,
-            onClick: E
-        }, g, t()(R, Object.keys(L))),  o().createElement(x, {
-            $icon: !!b,
+            elementRef: y,
+            onClick: L
+        }, h, t()(k, Object.keys(P))),  o().createElement(S, {
+            $icon: !!g,
             $removable: true
-        }, b &&  o().createElement($, {
+        },  o().createElement(m(), null, D), g &&  o().createElement(w, {
             $appearance: s,
             $disabled: f,
             $foregroundColor: p
-        }, b),  o().createElement(k, {
+        }, g),  o().createElement(O, {
             "data-test": "label",
+            "aria-hidden": A ? true : undefined,
             $appearance: s,
             $disabled: f,
             $foregroundColor: p
-        }, m),  o().createElement(S, {
+        }, C),  o().createElement(R, {
             $appearance: s,
             $disabled: f,
             $foregroundColor: p
         }, I ?  o().createElement(u(), {
             "data-test": "cross",
             hideDefaultTooltip: true,
-            screenReaderText: (0, d._)("Remove"),
+            screenReaderText: null,
             size: .85
         }) :  o().createElement(c(), {
-            "aria-label": (0, d._)("Remove"),
             "data-test": "cross",
             height: "20px",
             width: "20px"
         }))));
     }
-    function H(e) {
-        var r = P(e), a = _(r, 2), n = a[0], i = a[1];
-        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, p = n.icon, u = A(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var d = i.children, f = i.elementRef, v = A(i, [ "children", "elementRef" ]);
+    function M(e) {
+        var r = B(e), a = q(r, 2), n = a[0], i = a[1];
+        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, p = n.icon, u = z(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var d = i.children, f = i.elementRef, v = z(i, [ "children", "elementRef" ]);
         
-        return o().createElement(y, O({
+        return o().createElement(k, j({
             $appearance: l,
             $disabled: c,
             ref: f
-        }, u, t()(v, Object.keys(L))),  o().createElement(x, {
+        }, u, t()(v, Object.keys(P))),  o().createElement(S, {
             $icon: !!p,
             $removable: false
-        }, p &&  o().createElement($, {
+        }, p &&  o().createElement(w, {
             $appearance: l,
             $disabled: c,
             $foregroundColor: s
-        }, p),  o().createElement(k, {
+        }, p),  o().createElement(O, {
             "data-test": "label",
             $appearance: l,
             $disabled: c,
             $foregroundColor: s
         }, d)));
     }
-    function B(e) {
+    function W(e) {
         // @docs-props-type ChipPropsBase
-        return N(e) ?  o().createElement(T, e) :  o().createElement(H, e);
+        return H(e) ?  o().createElement(V, e) :  o().createElement(M, e);
     }
-    B.propTypes = L;
-    B.defaultProps = z;
-    /* harmony default export */    const V = B;
+    W.propTypes = P;
+    W.defaultProps = T;
+    /* harmony default export */    const G = W;
     // CONCATENATED MODULE: ./src/Chip/index.ts
     module.exports = r;
     /******/})();

package/ComboBox.js

@@ -907,7 +907,7 @@
                     elementRef: this.handleAnchorMount,
                     role: "combobox",
                     value: l,
-                    "aria-activedescendant": this.activeItemId,
+                    "aria-activedescendant": this.state.open ? this.activeItemId : undefined,
                     "aria-expanded": i,
                     "aria-haspopup": true,
                     "aria-label": (0, O._)("Value input"),