@luscii-healthtech/web-ui 58.0.1 → 58.1.0

package/dist/index.development.js

@@ -6738,9 +6738,14 @@ const ticksContainerStyle = {
 const RangeCoverageComponent = (_a) => {
   var { sections, start, end, highlightedRange, ticks = [], tickFormatter, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "highlightedRange", "ticks", "tickFormatter", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
   const { tooltipContent } = slots !== null && slots !== void 0 ? slots : {};
+  const idPrefix = React.useId();
   if (hasSectionOverlaps(sections)) {
     return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
   }
+  const legendIdByLabel = new Map((legendSwatches !== null && legendSwatches !== void 0 ? legendSwatches : []).map((swatch, index) => [
+    swatch.label,
+    `${idPrefix}-legend-${index}`
+  ]));
   const segments = calculateSegments({ sections, start, end });
   const highlightPosition = highlightedRange ? calculateHighlightPosition({ highlightedRange, start, end }) : null;
   return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", "aria-hidden": title ? void 0 : true, children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
@@ -6749,18 +6754,19 @@ const RangeCoverageComponent = (_a) => {
       colorB: swatch.color[1],
       startOffset: -6
     }) : swatch.color;
-    return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
+    return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { id: legendIdByLabel.get(swatch.label), role: "img", "aria-label": swatch.label, style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
   }) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
     var _a2, _b;
     const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
     const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
     const segmentStyle = Object.assign({ flexBasis: `calc(${segment.widthPercent}% - 1px)`, flexGrow: 0, flexShrink: 0, marginRight: "1px" }, getSegmentStyle(segment.color));
     const ariaLabel = `${segment.originalSection.from} - ${segment.originalSection.to}`;
+    const legendId = segment.originalSection.legendLabel ? legendIdByLabel.get(segment.originalSection.legendLabel) : void 0;
     if (!renderedTooltipContent && !onSectionFocus) {
-      return jsxRuntime.jsx("div", { style: segmentStyle, "aria-label": ariaLabel }, ariaLabel);
+      return jsxRuntime.jsx("div", { style: segmentStyle, role: "img", "aria-label": ariaLabel, "aria-describedby": legendId }, ariaLabel);
     }
     if (!renderedTooltipContent) {
-      return jsxRuntime.jsx("button", { style: segmentStyle, "aria-label": ariaLabel, onFocus: () => {
+      return jsxRuntime.jsx("button", { style: segmentStyle, "aria-label": ariaLabel, "aria-describedby": legendId, onFocus: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
       }, onBlur: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
@@ -6772,7 +6778,7 @@ const RangeCoverageComponent = (_a) => {
     }
     return (
       // Sections cannot overlap, so from-to should be unique
-      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b !== void 0 ? _b : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, style: segmentStyle, onFocus: () => {
+      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b !== void 0 ? _b : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, "aria-describedby": legendId, style: segmentStyle, onFocus: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
       }, onBlur: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
@@ -6785,7 +6791,7 @@ const RangeCoverageComponent = (_a) => {
         maxWidth: 600
       }, children: jsxRuntime.jsx(Card, { border: true, elevation: "medium", width: "full", children: renderedTooltipContent }) })] }, ariaLabel)
     );
-  }) }) }), highlightPosition && jsxRuntime.jsx("div", { "aria-hidden": "true", style: getHighlightStyle(highlightPosition) })] }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
+  }) }) }), highlightPosition && highlightedRange && jsxRuntime.jsx("div", { role: "img", "aria-label": highlightedRange.label ? `${highlightedRange.label} (${highlightedRange.from} - ${highlightedRange.to})` : `${highlightedRange.from} - ${highlightedRange.to}`, style: getHighlightStyle(highlightPosition) })] }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
     const totalRange = Math.abs(end - start);
     const isDescending = start > end;
     const position = isDescending ? (start - tick) / totalRange * 100 : (tick - start) / totalRange * 100;