@carbon/charts-vue 1.21.3 → 1.22.0

package/dist/index.mjs

@@ -11297,13 +11297,13 @@ let dt = class {
   getParent() {
     return this.parent;
   }
-  getComponentContainer(t = { withinChartClip: !1 }) {
+  getComponentContainer(t = { ariaLabel: null, isPresentational: !1, withinChartClip: !1 }) {
     if (this.type) {
       const n = b(this.model.getOptions(), "style", "prefix"), r = this.id ? `#${this.id}` : "", i = I.appendOrSelect(
         this.parent,
         `${this.renderType === Q.SVG ? "svg" : "div"}${r}.${le}--${n}--${this.type}`
       );
-      if (t.withinChartClip) {
+      if (t.ariaLabel && i.attr("aria-label", t.ariaLabel), t.isPresentational && i.attr("role", "presentation"), t.withinChartClip) {
         const a = this.model.get("chartClipId");
         if (a) {
           const s = D(`#${a}`).select("rect");
@@ -11861,7 +11861,9 @@ const Na = (e) => xu.sanitize(e, {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer().attr("role", "toolbar");
+    const n = this.getComponentContainer({
+      ariaLabel: "toolbar"
+    }).attr("role", "group");
     if (b(this.getOptions(), "data", "loading"))
       n.html(""), this.overflowMenu = null;
     else {
@@ -12242,46 +12244,47 @@ const Pv = class Bv extends dt {
     return this.parent.selectAll(`div.layout-child-${this._instanceID}`).filter((t) => b(t, "growth") === at.STRETCH).size();
   }
   render(t = !0) {
-    const n = this.parent, { width: r, height: i } = I.getHTMLElementSize(n.node()), a = this.configs.direction === At.ROW || this.configs.direction === At.ROW_REVERSE, s = b(this.model.getOptions(), "style", "prefix"), o = n.classed(
-      `${le}--${s}--layout-row`,
+    const n = this.model.getOptions(), r = this.parent, { width: i, height: a } = I.getHTMLElementSize(r.node()), s = this.configs.direction === At.ROW || this.configs.direction === At.ROW_REVERSE, o = b(this.model.getOptions(), "style", "prefix"), l = r.classed(
+      `${le}--${o}--layout-row`,
       this.configs.direction === At.ROW
     ).classed(
-      `${le}--${s}--layout-row-reverse`,
+      `${le}--${o}--layout-row-reverse`,
       this.configs.direction === At.ROW_REVERSE
     ).classed(
-      `${le}--${s}--layout-column`,
+      `${le}--${o}--layout-column`,
       this.configs.direction === At.COLUMN
     ).classed(
-      `${le}--${s}--layout-column-reverse`,
+      `${le}--${o}--layout-column-reverse`,
       this.configs.direction === At.COLUMN_REVERSE
     ).classed(
-      `${le}--${s}--layout-alignitems-center`,
+      `${le}--${o}--layout-alignitems-center`,
       this.configs.alignItems === Qr.CENTER
-    ).selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (c) => c.id);
-    o.enter().append("div").merge(n.selectAll(`div.layout-child-${this._instanceID}`)).attr("class", (c) => `layout-child layout-child-${this._instanceID} ${c.id}`).each(function(c) {
-      c.components.forEach((u) => {
-        const d = D(this), h = b(c, "renderType") === Q.SVG;
-        u.setParent(
-          h ? I.appendOrSelect(d, "svg.layout-svg-wrapper").attr("width", "100%").attr("height", "100%") : d
-        );
-        const p = b(c, "growth");
-        (p === at.PREFERRED || p === at.FIXED) && u.render(t);
+    ).selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (u) => u.id);
+    l.enter().append("div").merge(r.selectAll(`div.layout-child-${this._instanceID}`)).attr("class", (u) => `layout-child layout-child-${this._instanceID} ${u.id}`).each(function(u) {
+      u.components.forEach((d) => {
+        var h;
+        const p = D(this), f = b(u, "renderType") === Q.SVG;
+        d.setParent(
+          f ? I.appendOrSelect(p, "svg.layout-svg-wrapper").attr("width", "100%").attr("height", "100%") : p
+        ), f && !p.select("svg.layout-svg-wrapper").attr("aria-label") && p.select("svg.layout-svg-wrapper").attr("aria-label", ((h = n == null ? void 0 : n.accessibility) == null ? void 0 : h.svgAriaLabel) || (n == null ? void 0 : n.title));
+        const g = b(u, "growth");
+        (g === at.PREFERRED || g === at.FIXED) && d.render(t);
       });
-    }), n.selectAll(`div.layout-child-${this._instanceID}`).style("height", null).style("width", null).each(function(c) {
-      const u = b(c, "growth"), d = b(c, "renderType") === Q.SVG ? I.getSVGElementSize(D(this).select("svg.layout-svg-wrapper"), {
+    }), r.selectAll(`div.layout-child-${this._instanceID}`).style("height", null).style("width", null).each(function(u) {
+      const d = b(u, "growth"), h = b(u, "renderType") === Q.SVG ? I.getSVGElementSize(D(this).select("svg.layout-svg-wrapper"), {
         useBBox: !0
       }) : I.getHTMLElementSize(this);
-      if (u === at.PREFERRED) {
-        const h = a ? d.width : d.height, p = a ? r : i;
-        c.size = h / p * 100;
+      if (d === at.PREFERRED) {
+        const p = s ? h.width : h.height, f = s ? i : a;
+        u.size = p / f * 100;
       }
-    }), o.exit().remove(), this.children.filter((c) => b(c, "growth") === at.STRETCH).forEach((c) => {
-      c.size = (100 - +this.getPreferedAndFixedSizeSum()) / +this.getNumOfStretchChildren();
+    }), l.exit().remove(), this.children.filter((u) => b(u, "growth") === at.STRETCH).forEach((u) => {
+      u.size = (100 - +this.getPreferedAndFixedSizeSum()) / +this.getNumOfStretchChildren();
     });
-    const l = n.selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (c) => c.id);
-    a ? l.style("width", (c) => `${c.size / 100 * r}px`).style("height", "100%") : l.style("height", (c) => `${c.size / 100 * i}px`).style("width", "100%"), l.each(function(c) {
-      c.components.forEach((u) => {
-        b(c, "growth") === at.STRETCH && u.render(t);
+    const c = r.selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (u) => u.id);
+    s ? c.style("width", (u) => `${u.size / 100 * i}px`).style("height", "100%") : c.style("height", (u) => `${u.size / 100 * a}px`).style("width", "100%"), c.each(function(u) {
+      u.components.forEach((d) => {
+        b(u, "growth") === at.STRETCH && d.render(t);
       });
     });
   }
@@ -12313,7 +12316,9 @@ class $n extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !1) {
-    this.getComponentContainer().style("width", `${this.configs.size || td.default.size}px`).style("height", `${this.configs.size || td.default.size}px`).attr("opacity", 0);
+    this.getComponentContainer({
+      isPresentational: !0
+    }).style("width", `${this.configs.size || td.default.size}px`).style("height", `${this.configs.size || td.default.size}px`).attr("opacity", 0);
   }
 }
 var fD = {
@@ -14013,7 +14018,9 @@ const zv = class Ja extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.parent, r = this.getComponentContainer();
+    const n = this.parent, r = this.getComponentContainer({
+      isPresentational: !0
+    });
     if (!n) throw new Error("SVG was not defined");
     const i = I.appendOrSelect(
       n,
@@ -14078,7 +14085,9 @@ class kR extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer(), r = this.services.zoom.isZoomBarLoading(V.TOP), i = this.services.zoom.isZoomBarLocked(V.TOP), a = b(this.getOptions(), "zoomBar", V.TOP, "type"), s = b(this.getOptions(), "axes", V.BOTTOM, "highlights"), o = me.height[a], { width: l } = I.getSVGElementSize(this.parent, {
+    const n = this.getComponentContainer({
+      ariaLabel: "zoom bar"
+    }), r = this.services.zoom.isZoomBarLoading(V.TOP), i = this.services.zoom.isZoomBarLocked(V.TOP), a = b(this.getOptions(), "zoomBar", V.TOP, "type"), s = b(this.getOptions(), "axes", V.BOTTOM, "highlights"), o = me.height[a], { width: l } = I.getSVGElementSize(this.parent, {
       useAttrs: !0
     });
     if (l === 0)
@@ -14275,7 +14284,10 @@ class DR extends dt {
         });
       }
     });
-    const i = this.getComponentContainer({ withinChartClip: !0 }).selectAll("g.axis-thresholds").data(r, (c) => c.axisPosition);
+    const i = this.getComponentContainer({
+      ariaLabel: "threshold lines",
+      withinChartClip: !0
+    }).selectAll("g.axis-thresholds").data(r, (c) => c.axisPosition);
     i.exit().attr("opacity", 0).remove();
     const a = i.enter().append("g").merge(i);
     a.attr("class", (c) => `axis-thresholds ${c.axisPosition}`);
@@ -14415,7 +14427,10 @@ class RR extends dt {
         });
       }
     });
-    const i = this.getComponentContainer({ withinChartClip: !0 }).selectAll("g.axis-highlight").data(r, (c) => c.axisPosition);
+    const i = this.getComponentContainer({
+      ariaLabel: "highlight areas",
+      withinChartClip: !0
+    }).selectAll("g.axis-highlight").data(r, (c) => c.axisPosition);
     i.exit().attr("opacity", 0).remove();
     const a = i.enter().append("g").merge(i);
     a.attr("class", (c) => `axis-highlight ${c.axisPosition}`);
@@ -14932,7 +14947,7 @@ class tI extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer({ withinChartClip: !0 });
+    const n = this.getComponentContainer({ ariaLabel: "alluvial graphs", withinChartClip: !0 });
     n.html("");
     const { width: r, height: i } = I.getSVGElementSize(n, {
       useAttrs: !0
@@ -15258,7 +15273,10 @@ class _e extends dt {
   }
   drawBackdrop(t, n) {
     const r = this.parent, i = this.services.cartesianScales.getMainXScale(), a = this.services.cartesianScales.getMainYScale(), [s, o] = i.range(), [l, c] = a.range();
-    this.backdrop = I.appendOrSelect(r, "svg.chart-grid-backdrop");
+    this.backdrop = I.appendOrSelect(r, "svg.chart-grid-backdrop").attr(
+      "role",
+      "presentation"
+    );
     const u = I.appendOrSelect(
       this.backdrop,
       t || n ? "rect.chart-grid-backdrop.stroked" : "rect.chart-grid-backdrop"
@@ -15293,7 +15311,7 @@ class Yv extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this.getOptions();
+    const n = this.getComponentContainer({ ariaLabel: "area graphs", withinChartClip: !0 }), r = this.getOptions();
     let i = [0, 0];
     const { cartesianScales: a } = this.services, s = a.getOrientation(), o = bu().curve(this.services.curves.getD3Curve()).defined((E) => {
       const w = a.getRangeIdentifier();
@@ -15409,7 +15427,7 @@ class Ur extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), { cartesianScales: r, curves: i } = this.services, a = (p) => r.getDomainValue(p), s = (p) => r.getRangeValue(p), [o, l] = bn(
+    const n = this.getComponentContainer({ ariaLabel: "lines", withinChartClip: !0 }), { cartesianScales: r, curves: i } = this.services, a = (p) => r.getDomainValue(p), s = (p) => r.getRangeValue(p), [o, l] = bn(
       a,
       s,
       r.getOrientation()
@@ -15646,7 +15664,7 @@ class tn extends dt {
   render(t) {
     if (!(b(this.getOptions(), "points", "enabled") || b(this.getOptions(), "bubble", "enabled")))
       return;
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, { cartesianScales: a } = this.services;
+    const n = this.getComponentContainer({ ariaLabel: "scatter points", withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, { cartesianScales: a } = this.services;
     if (!a) throw new Error("Services cartesianScales are undefined.");
     const s = a.getDomainIdentifier(), o = n.selectAll("circle.dot").data(
       this.getScatterData(),
@@ -15809,7 +15827,9 @@ class Zv extends dt {
     }, r && (this.configs = r), this.margins = this.configs.margins;
   }
   render(t = !0) {
-    const { position: n } = this.configs, r = this.getOptions(), i = b(r, "axes", n, "visible"), a = this.getComponentContainer(), { width: s, height: o } = I.getSVGElementSize(a, {
+    const { position: n } = this.configs, r = this.getOptions(), i = b(r, "axes", n, "visible"), a = this.getComponentContainer({
+      ariaLabel: "axes"
+    }), { width: s, height: o } = I.getSVGElementSize(a, {
       useAttrs: !0
     }), l = I.appendOrSelect(a, `g.axis.${n}`);
     let c, u;
@@ -16065,7 +16085,9 @@ class nI extends Zv {
   }
   render(t = !0) {
     super.render(t), super.destroy();
-    const n = this.configs.position, r = this.getComponentContainer(), i = I.appendOrSelect(r, `g.axis.${n}`), a = this;
+    const n = this.configs.position, r = this.getComponentContainer({
+      ariaLabel: "axes"
+    }), i = I.appendOrSelect(r, `g.axis.${n}`), a = this;
     i.selectAll("g.tick").each(function(s, o) {
       const l = D(this);
       l.classed("tick-hover", !0).attr("tabindex", o === 0 ? 0 : -1);
@@ -16333,7 +16355,7 @@ class rI extends dt {
     super(...arguments), this.type = "boxplot", this.renderType = Q.SVG;
   }
   render(t) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, a = this.model.getDataGroupNames(), s = this.services.cartesianScales.getMainXScale(), o = this.services.cartesianScales.getMainYScale(), [l, c] = s.range(), [u, d] = o.range(), h = c - l, p = u - d;
+    const n = this.getComponentContainer({ ariaLabel: "box plots", withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, a = this.model.getDataGroupNames(), s = this.services.cartesianScales.getMainXScale(), o = this.services.cartesianScales.getMainYScale(), [l, c] = s.range(), [u, d] = o.range(), h = c - l, p = u - d;
     if (h === 0)
       return;
     const { cartesianScales: f } = this.services, g = f.getOrientation(), m = g === Ft.VERTICAL, [y, v] = bn(
@@ -16595,7 +16617,9 @@ class ei extends dt {
   render(t) {
     const n = this.services.cartesianScales.getRangeAxisPosition({
       groups: this.configs.groups
-    }), r = this.services.cartesianScales.getScaleByPosition(n), [i, a] = r.domain(), s = i > 0 && a < 0 || i < 0 && a > 0, o = this.getComponentContainer();
+    }), r = this.services.cartesianScales.getScaleByPosition(n), [i, a] = r.domain(), s = i > 0 && a < 0 || i < 0 && a > 0, o = this.getComponentContainer({
+      isPresentational: !0
+    });
     if (!s) {
       o.selectAll("line.domain").remove();
       return;
@@ -16693,7 +16717,7 @@ class aI extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const n = this.getOptions(), { groupMapsTo: r } = n.data, i = this.getComponentContainer({ withinChartClip: !0 }), a = this.model.getDisplayData(this.configs.groups), s = this.services.cartesianScales.getRangeScale(), o = this.services.cartesianScales.getRangeIdentifier(), [l, c] = s.range(), [, u] = s.domain(), d = () => {
+    const n = this.getOptions(), { groupMapsTo: r } = n.data, i = this.getComponentContainer({ ariaLabel: "bullet graphs", withinChartClip: !0 }), a = this.model.getDisplayData(this.configs.groups), s = this.services.cartesianScales.getRangeScale(), o = this.services.cartesianScales.getRangeIdentifier(), [l, c] = s.range(), [, u] = s.domain(), d = () => {
       const g = [];
       a.forEach((y) => {
         y.ranges ? y.ranges.forEach((v, x) => {
@@ -17131,7 +17155,9 @@ class Xv extends _u {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !1) {
-    const n = this.getOptions(), r = this.getComponentContainer(), { width: i } = I.getSVGElementSize(r, {
+    const n = this.getOptions(), r = this.getComponentContainer({
+      ariaLabel: "legend"
+    }), { width: i } = I.getSVGElementSize(r, {
       useAttrs: !0
     }), a = b(n, "color", "gradient", "colors"), s = b(n, this.chartType, "colorLegend", "type");
     let o = b(n, "color", "pairing", "option");
@@ -17206,7 +17232,9 @@ class mI extends ga {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !1) {
-    const n = b(this.model.getDisplayData(), 0), r = this.getOptions(), i = this.getComponentContainer(), { groupMapsTo: a } = r.data, s = r.locale.translations.meter.title;
+    const n = b(this.model.getDisplayData(), 0), r = this.getOptions(), i = this.getComponentContainer({
+      ariaLabel: "meter title"
+    }), { groupMapsTo: a } = r.data, s = r.locale.translations.meter.title;
     if (b(r, "meter", "proportional"))
       this.displayTotal(), this.displayBreakdownTitle();
     else {
@@ -17350,7 +17378,10 @@ class gI extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), { width: r, height: i } = I.getSVGElementSize(this.parent, {
+    const n = this.getComponentContainer({
+      ariaLabel: "circle packs",
+      withinChartClip: !0
+    }), { width: r, height: i } = I.getSVGElementSize(this.parent, {
       useAttrs: !0
     });
     if (r < 1 || i < 1)
@@ -17536,7 +17567,9 @@ class Kv extends dt {
     return Ct.innerRadius;
   }
   render(t = !0) {
-    const n = this, r = this.getComponentContainer(), i = this.getOptions(), { groupMapsTo: a } = i.data, { valueMapsTo: s } = i.pie;
+    const n = this, r = this.getComponentContainer({
+      ariaLabel: "pie graph"
+    }), i = this.getOptions(), { groupMapsTo: a } = i.data, { valueMapsTo: s } = i.pie;
     this.isRendering = !0;
     const o = this.model.getDisplayData().filter((L) => L[s] > 0), l = this.computeRadius();
     this.arc = na().innerRadius(this.getInnerRadius()).outerRadius(l), this.hoverArc = na().innerRadius(this.getInnerRadius()).outerRadius(l + Ct.hoverArc.outerRadiusOffset);
@@ -17694,10 +17727,17 @@ class yI extends Kv {
     super.render(t);
     const n = this;
     if (this.model.isDataEmpty()) {
-      this.getComponentContainer().select("g.center").remove();
+      this.getComponentContainer({
+        ariaLabel: "donut graph"
+      }).select("g.center").remove();
       return;
     }
-    const r = I.appendOrSelect(this.getComponentContainer(), "g.center"), i = this.getOptions(), a = this.computeRadius(), s = b(i, "donut", "center", "label");
+    const r = I.appendOrSelect(
+      this.getComponentContainer({
+        ariaLabel: "donut graph"
+      }),
+      "g.center"
+    ), i = this.getOptions(), a = this.computeRadius(), s = b(i, "donut", "center", "label");
     I.appendOrSelect(r, "text.donut-figure").attr("text-anchor", "middle").style("dominant-baseline", () => s === null || s === "" ? "central" : "initial").style("font-size", () => i.donut.center.numberFontSize(a)).transition().call(
       (o) => this.services.transitions.setupTransition({
         transition: o,
@@ -17773,7 +17813,9 @@ class bI extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer().attr("width", "100%").attr("height", "100%"), r = this.getOptions(), i = this.getValue(), a = this.getValueRatio(), s = this.getArcSize(), o = this.getStartAngle(), l = a * s, c = o + l, u = o + s, d = this.computeRadius(), h = this.getInnerRadius();
+    const n = this.getComponentContainer({
+      ariaLabel: "gauge graph"
+    }).attr("width", "100%").attr("height", "100%"), r = this.getOptions(), i = this.getValue(), a = this.getValueRatio(), s = this.getArcSize(), o = this.getStartAngle(), l = a * s, c = o + l, u = o + s, d = this.computeRadius(), h = this.getInnerRadius();
     this.backgroundArc = na().innerRadius(h).outerRadius(d).startAngle(c).endAngle(u), this.arc = na().innerRadius(h).outerRadius(d).startAngle(o).endAngle(c), I.appendOrSelect(n, "path.arc-background").attr("d", this.backgroundArc);
     const p = n.selectAll("path.arc-foreground").data([i]);
     p.enter().append("path").merge(p).attr(
@@ -17910,7 +17952,7 @@ class Qv extends Su {
   render(t) {
     const n = this.model.getDisplayData(this.configs.groups), r = this.getOptions(), { groupMapsTo: i } = r.data;
     this.setGroupScale();
-    const a = this.getComponentContainer({ withinChartClip: !0 }), s = Wi(
+    const a = this.getComponentContainer({ ariaLabel: "grouped bar graphs", withinChartClip: !0 }), s = Wi(
       n.map((u) => {
         const d = this.services.cartesianScales.getDomainIdentifier(u);
         return u[d] && typeof u[d].toString == "function" ? u[d].toString() : u[d];
@@ -18113,7 +18155,7 @@ class xI extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer({ withinChartClip: !0 });
+    const n = this.getComponentContainer({ ariaLabel: "heatmap", withinChartClip: !0 });
     n.lower();
     const { cartesianScales: r } = this.services;
     if (this.matrix = this.model.getMatrix(), n.html(""), b(this.getOptions(), "data", "loading"))
@@ -18249,7 +18291,9 @@ class _I extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const n = this.getComponentContainer(), r = this.model.getOptions(), { groupIdentifier: i } = r, { groupMapsTo: a } = r.data, s = this.model.getBinnedStackedData(), o = this.services.cartesianScales.getMainXScale(), l = n.selectAll("g.bars").data(s, (u) => mt(u, `0.${a}`));
+    const n = this.getComponentContainer({
+      ariaLabel: "histogram bars"
+    }), r = this.model.getOptions(), { groupIdentifier: i } = r, { groupMapsTo: a } = r.data, s = this.model.getBinnedStackedData(), o = this.services.cartesianScales.getMainXScale(), l = n.selectAll("g.bars").data(s, (u) => mt(u, `0.${a}`));
     l.exit().attr("opacity", 0).remove(), l.enter().append("g").classed("bars", !0).attr("role", ot.GROUP);
     const c = n.selectAll("g.bars").selectAll("path.bar").data((u) => u);
     c.exit().remove(), c.enter().append("path").merge(c).classed("bar", !0).attr(i, (u, d) => d).transition().call(
@@ -18348,7 +18392,7 @@ class EI extends tn {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this.model.getOptions(), { groupMapsTo: i } = r.data, { cartesianScales: a } = this.services, s = a.getMainXScale(), o = a.getMainYScale(), l = a.getDomainIdentifier(), c = (m) => a.getDomainValue(m), u = (m) => a.getRangeValue(m), d = a.getOrientation(), [h, p] = bn(
+    const n = this.getComponentContainer({ ariaLabel: "lines", withinChartClip: !0 }), r = this.model.getOptions(), { groupMapsTo: i } = r.data, { cartesianScales: a } = this.services, s = a.getMainXScale(), o = a.getMainYScale(), l = a.getDomainIdentifier(), c = (m) => a.getDomainValue(m), u = (m) => a.getRangeValue(m), d = a.getOrientation(), [h, p] = bn(
       c,
       u,
       d
@@ -18408,7 +18452,9 @@ class OI extends dt {
     }));
   }
   render(t = !0) {
-    const n = this, r = this.getComponentContainer(), i = this.getOptions(), a = b(i, "meter", "proportional"), s = this.model.getDisplayData(), o = this.model.getStatus(), { width: l } = I.getSVGElementSize(r, {
+    const n = this, r = this.getComponentContainer({
+      ariaLabel: "meter lines"
+    }), i = this.getOptions(), a = b(i, "meter", "proportional"), s = this.model.getDisplayData(), o = this.model.getStatus(), { width: l } = I.getSVGElementSize(r, {
       useAttrs: !0
     }), { groupMapsTo: c } = i.data;
     let u;
@@ -18543,7 +18589,9 @@ class SI extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const n = this.getComponentContainer(), { width: r, height: i } = I.getSVGElementSize(n, {
+    const n = this.getComponentContainer({
+      ariaLabel: "radar graph"
+    }), { width: r, height: i } = I.getSVGElementSize(n, {
       useAttrs: !0
     }), a = this.model.getData(), s = this.model.getGroupedData(), o = this.getOptions(), l = b(o, "data", "groupMapsTo"), c = b(o, "radar", "axes", "value"), { angle: u, value: d } = b(o, "radar", "axes"), { xLabelPadding: h, yLabelPadding: p, yTicksNumber: f, minRange: g, xAxisRectHeight: m } = Vn;
     this.uniqueKeys = Array.from(new Set(a.map((_) => _[u]))), this.uniqueGroups = Array.from(new Set(a.map((_) => _[l]))), this.fullDataNormalized = this.normalizeFlatData(a), this.groupedDataNormalized = this.normalizeGroupedData(s);
@@ -18863,7 +18911,10 @@ class Jv extends Su {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const n = this.getOptions(), { groupMapsTo: r } = n.data, i = this.getComponentContainer({ withinChartClip: !0 }), a = this.model.getDisplayData(this.configs.groups), s = this.services.cartesianScales.getOrientation(), o = i.selectAll("path.bar").data(a, (l) => l[r]);
+    const n = this.getOptions(), { groupMapsTo: r } = n.data, i = this.getComponentContainer({
+      ariaLabel: "bar graphs",
+      withinChartClip: !0
+    }), a = this.model.getDisplayData(this.configs.groups), s = this.services.cartesianScales.getOrientation(), o = i.selectAll("path.bar").data(a, (l) => l[r]);
     o.exit().attr("opacity", 0).remove(), o.enter().append("path").attr("opacity", 0).merge(o).classed("bar", !0).attr("width", this.getBarWidth.bind(this)).transition().call(
       (l) => this.services.transitions.setupTransition({
         transition: l,
@@ -18988,7 +19039,10 @@ class t0 extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this, i = this.getOptions(), { groupMapsTo: a } = i.data, s = Object.keys(i.axes).some((p) => i.axes[p].percentage), o = this.model.getStackedData({
+    const n = this.getComponentContainer({
+      ariaLabel: "stacked area graphs",
+      withinChartClip: !0
+    }), r = this, i = this.getOptions(), { groupMapsTo: a } = i.data, s = Object.keys(i.axes).some((p) => i.axes[p].percentage), o = this.model.getStackedData({
       percentage: s,
       groups: this.configs.groups
     }), l = b(o, 0, 0), c = this.services.cartesianScales.getDomainAxisPosition({ datum: l }), u = this.services.cartesianScales.getRangeAxisPosition({ datum: l }), d = this.services.cartesianScales.getScaleByPosition(u), h = n.selectAll("path.area").data(o, (p) => b(p, 0, a));
@@ -19037,7 +19091,7 @@ class e0 extends Su {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, a = this.model.getStackedData({
+    const n = this.getComponentContainer({ ariaLabel: "stacked bar graphs", withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, a = this.model.getStackedData({
       groups: this.configs.groups,
       divergent: !0
     }), s = this.model.getActiveDataGroupNames(), o = n.selectAll("g.bars").data(a, (c) => b(c, 0, i));
@@ -19151,7 +19205,7 @@ class n0 extends tn {
   render(t) {
     if (!b(this.getOptions(), "points", "enabled"))
       return;
-    const n = this.getComponentContainer({ withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, a = Object.keys(r.axes).some((u) => r.axes[u].percentage), s = this.model.getStackedData({
+    const n = this.getComponentContainer({ ariaLabel: "scatter points", withinChartClip: !0 }), r = this.getOptions(), { groupMapsTo: i } = r.data, a = Object.keys(r.axes).some((u) => r.axes[u].percentage), s = this.model.getStackedData({
       groups: this.configs.groups,
       percentage: a
     }), o = n.selectAll("g.dots").data(s, (u) => b(u, 0, i));
@@ -19214,7 +19268,9 @@ class TI extends dt {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const n = this.getComponentContainer();
+    const n = this.getComponentContainer({
+      ariaLabel: "tree diagram"
+    });
     n.html("");
     const { width: r, height: i } = I.getSVGElementSize(this.parent, {
       useAttrs: !0
@@ -19487,7 +19543,9 @@ class e3 extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const n = this.getComponentContainer();
+    const n = this.getComponentContainer({
+      ariaLabel: "treemap"
+    });
     this.model.getData();
     const r = this.model.getDisplayData(), i = this.model.getOptions(), a = b(window, "location"), { width: s, height: o } = I.getSVGElementSize(n, {
       useAttrs: !0
@@ -19909,7 +19967,9 @@ class O3 extends dt {
     t.addEventListener(S.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(S.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const n = this, r = this.getComponentContainer().attr("width", "100%").attr("height", "100%"), i = this.model.getDisplayData(), a = this.getFontSizeScale(i), s = this.getOptions(), { fontSizeMapsTo: o, wordMapsTo: l } = s.wordCloud, { groupMapsTo: c } = s.data, { width: u, height: d } = I.getSVGElementSize(r, {
+    const n = this, r = this.getComponentContainer({
+      ariaLabel: "word cloud"
+    }).attr("width", "100%").attr("height", "100%"), i = this.model.getDisplayData(), a = this.getFontSizeScale(i), s = this.getOptions(), { fontSizeMapsTo: o, wordMapsTo: l } = s.wordCloud, { groupMapsTo: c } = s.data, { width: u, height: d } = I.getSVGElementSize(r, {
       useAttrs: !0
     });
     if (u === 0 || d === 0)
@@ -20104,7 +20164,7 @@ class w3 extends S3 {
   render(t = !0) {
     super.render();
     const n = this.model.getCombinedData();
-    this.getComponentContainer({ withinChartClip: !0 }).select("g.geo").selectAll("path").classed("border", !0).attr("class", (r) => this.model.getColorClassName({
+    this.getComponentContainer({ ariaLabel: "map", withinChartClip: !0 }).select("g.geo").selectAll("path").classed("border", !0).attr("class", (r) => this.model.getColorClassName({
       value: n[r.properties.NAME].value,
       originalClassName: "border"
     })), this.addCountryAreaEventListener();