@carbon/charts 1.21.3 → 1.22.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.22.0 (2024-09-16)
+
+### Features
+
+- **a11y:** add aria-label to <svg> elements
+  ([#1892](https://github.com/carbon-design-system/carbon-charts/issues/1892))
+  ([65d40e5](https://github.com/carbon-design-system/carbon-charts/commit/65d40e5397336bc9f42f6f008017eebe7bc36c00))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.21.4 (2024-09-16)
+
+**Note:** Version bump only for package @carbon/charts
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## 1.21.3 (2024-09-11)
 
 ### Bug Fixes

package/dist/{choropleth-CeqRIFeN.mjs → choropleth-0DsmaWsP.mjs}

@@ -2737,13 +2737,13 @@ class ot {
   getParent() {
     return this.parent;
   }
-  getComponentContainer(t = { withinChartClip: !1 }) {
+  getComponentContainer(t = { ariaLabel: null, isPresentational: !1, withinChartClip: !1 }) {
     if (this.type) {
       const e = T(this.model.getOptions(), "style", "prefix"), n = this.id ? `#${this.id}` : "", i = _.appendOrSelect(
         this.parent,
         `${this.renderType === st.SVG ? "svg" : "div"}${n}.${qt}--${e}--${this.type}`
       );
-      if (t.withinChartClip) {
+      if (t.ariaLabel && i.attr("aria-label", t.ariaLabel), t.isPresentational && i.attr("role", "presentation"), t.withinChartClip) {
         const r = this.model.get("chartClipId");
         if (r) {
           const o = R(`#${r}`).select("rect");
@@ -3311,7 +3311,9 @@ const Qn = (s) => Er.sanitize(s, {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer().attr("role", "toolbar");
+    const e = this.getComponentContainer({
+      ariaLabel: "toolbar"
+    }).attr("role", "group");
     if (T(this.getOptions(), "data", "loading"))
       e.html(""), this.overflowMenu = null;
     else {
@@ -3692,46 +3694,47 @@ const Cs = class Cs extends ot {
     return this.parent.selectAll(`div.layout-child-${this._instanceID}`).filter((e) => T(e, "growth") === Se.STRETCH).size();
   }
   render(t = !0) {
-    const e = this.parent, { width: n, height: i } = _.getHTMLElementSize(e.node()), r = this.configs.direction === Be.ROW || this.configs.direction === Be.ROW_REVERSE, a = T(this.model.getOptions(), "style", "prefix"), o = e.classed(
-      `${qt}--${a}--layout-row`,
+    const e = this.model.getOptions(), n = this.parent, { width: i, height: r } = _.getHTMLElementSize(n.node()), a = this.configs.direction === Be.ROW || this.configs.direction === Be.ROW_REVERSE, o = T(this.model.getOptions(), "style", "prefix"), c = n.classed(
+      `${qt}--${o}--layout-row`,
       this.configs.direction === Be.ROW
     ).classed(
-      `${qt}--${a}--layout-row-reverse`,
+      `${qt}--${o}--layout-row-reverse`,
       this.configs.direction === Be.ROW_REVERSE
     ).classed(
-      `${qt}--${a}--layout-column`,
+      `${qt}--${o}--layout-column`,
       this.configs.direction === Be.COLUMN
     ).classed(
-      `${qt}--${a}--layout-column-reverse`,
+      `${qt}--${o}--layout-column-reverse`,
       this.configs.direction === Be.COLUMN_REVERSE
     ).classed(
-      `${qt}--${a}--layout-alignitems-center`,
+      `${qt}--${o}--layout-alignitems-center`,
       this.configs.alignItems === tc.CENTER
-    ).selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (h) => h.id);
-    o.enter().append("div").merge(e.selectAll(`div.layout-child-${this._instanceID}`)).attr("class", (h) => `layout-child layout-child-${this._instanceID} ${h.id}`).each(function(h) {
-      h.components.forEach((d) => {
-        const u = R(this), f = T(h, "renderType") === st.SVG;
-        d.setParent(
-          f ? _.appendOrSelect(u, "svg.layout-svg-wrapper").attr("width", "100%").attr("height", "100%") : u
-        );
-        const g = T(h, "growth");
-        (g === Se.PREFERRED || g === Se.FIXED) && d.render(t);
-      });
-    }), e.selectAll(`div.layout-child-${this._instanceID}`).style("height", null).style("width", null).each(function(h) {
-      const d = T(h, "growth"), p = T(h, "renderType") === st.SVG ? _.getSVGElementSize(R(this).select("svg.layout-svg-wrapper"), {
+    ).selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (d) => d.id);
+    c.enter().append("div").merge(n.selectAll(`div.layout-child-${this._instanceID}`)).attr("class", (d) => `layout-child layout-child-${this._instanceID} ${d.id}`).each(function(d) {
+      d.components.forEach((u) => {
+        var E;
+        const p = R(this), g = T(d, "renderType") === st.SVG;
+        u.setParent(
+          g ? _.appendOrSelect(p, "svg.layout-svg-wrapper").attr("width", "100%").attr("height", "100%") : p
+        ), g && !p.select("svg.layout-svg-wrapper").attr("aria-label") && p.select("svg.layout-svg-wrapper").attr("aria-label", ((E = e == null ? void 0 : e.accessibility) == null ? void 0 : E.svgAriaLabel) || (e == null ? void 0 : e.title));
+        const m = T(d, "growth");
+        (m === Se.PREFERRED || m === Se.FIXED) && u.render(t);
+      });
+    }), n.selectAll(`div.layout-child-${this._instanceID}`).style("height", null).style("width", null).each(function(d) {
+      const u = T(d, "growth"), f = T(d, "renderType") === st.SVG ? _.getSVGElementSize(R(this).select("svg.layout-svg-wrapper"), {
         useBBox: !0
       }) : _.getHTMLElementSize(this);
-      if (d === Se.PREFERRED) {
-        const f = r ? p.width : p.height, g = r ? n : i;
-        h.size = f / g * 100;
+      if (u === Se.PREFERRED) {
+        const g = a ? f.width : f.height, m = a ? i : r;
+        d.size = g / m * 100;
       }
-    }), o.exit().remove(), this.children.filter((h) => T(h, "growth") === Se.STRETCH).forEach((h) => {
-      h.size = (100 - +this.getPreferedAndFixedSizeSum()) / +this.getNumOfStretchChildren();
+    }), c.exit().remove(), this.children.filter((d) => T(d, "growth") === Se.STRETCH).forEach((d) => {
+      d.size = (100 - +this.getPreferedAndFixedSizeSum()) / +this.getNumOfStretchChildren();
     });
-    const l = e.selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (h) => h.id);
-    r ? l.style("width", (h) => `${h.size / 100 * n}px`).style("height", "100%") : l.style("height", (h) => `${h.size / 100 * i}px`).style("width", "100%"), l.each(function(h) {
-      h.components.forEach((d) => {
-        T(h, "growth") === Se.STRETCH && d.render(t);
+    const h = n.selectAll(`div.layout-child-${this._instanceID}`).data(this.children, (d) => d.id);
+    a ? h.style("width", (d) => `${d.size / 100 * i}px`).style("height", "100%") : h.style("height", (d) => `${d.size / 100 * r}px`).style("width", "100%"), h.each(function(d) {
+      d.components.forEach((u) => {
+        T(d, "growth") === Se.STRETCH && u.render(t);
       });
     });
   }
@@ -3763,7 +3766,9 @@ class h0 extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !1) {
-    this.getComponentContainer().style("width", `${this.configs.size || Fr.default.size}px`).style("height", `${this.configs.size || Fr.default.size}px`).attr("opacity", 0);
+    this.getComponentContainer({
+      isPresentational: !0
+    }).style("width", `${this.configs.size || Fr.default.size}px`).style("height", `${this.configs.size || Fr.default.size}px`).attr("opacity", 0);
   }
 }
 var up = {
@@ -5463,7 +5468,9 @@ const Qe = class Qe extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.parent, n = this.getComponentContainer();
+    const e = this.parent, n = this.getComponentContainer({
+      isPresentational: !0
+    });
     if (!e) throw new Error("SVG was not defined");
     const i = _.appendOrSelect(
       e,
@@ -5528,7 +5535,9 @@ class f0 extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer(), n = this.services.zoom.isZoomBarLoading(Y.TOP), i = this.services.zoom.isZoomBarLocked(Y.TOP), r = T(this.getOptions(), "zoomBar", Y.TOP, "type"), a = T(this.getOptions(), "axes", Y.BOTTOM, "highlights"), o = Yt.height[r], { width: c } = _.getSVGElementSize(this.parent, {
+    const e = this.getComponentContainer({
+      ariaLabel: "zoom bar"
+    }), n = this.services.zoom.isZoomBarLoading(Y.TOP), i = this.services.zoom.isZoomBarLocked(Y.TOP), r = T(this.getOptions(), "zoomBar", Y.TOP, "type"), a = T(this.getOptions(), "axes", Y.BOTTOM, "highlights"), o = Yt.height[r], { width: c } = _.getSVGElementSize(this.parent, {
       useAttrs: !0
     });
     if (c === 0)
@@ -5725,7 +5734,10 @@ class g0 extends ot {
         });
       }
     });
-    const r = this.getComponentContainer({ withinChartClip: !0 }).selectAll("g.axis-thresholds").data(n, (u) => u.axisPosition);
+    const r = this.getComponentContainer({
+      ariaLabel: "threshold lines",
+      withinChartClip: !0
+    }).selectAll("g.axis-thresholds").data(n, (u) => u.axisPosition);
     r.exit().attr("opacity", 0).remove();
     const o = r.enter().append("g").merge(r);
     o.attr("class", (u) => `axis-thresholds ${u.axisPosition}`);
@@ -5865,7 +5877,10 @@ class m0 extends ot {
         });
       }
     });
-    const r = this.getComponentContainer({ withinChartClip: !0 }).selectAll("g.axis-highlight").data(n, (u) => u.axisPosition);
+    const r = this.getComponentContainer({
+      ariaLabel: "highlight areas",
+      withinChartClip: !0
+    }).selectAll("g.axis-highlight").data(n, (u) => u.axisPosition);
     r.exit().attr("opacity", 0).remove();
     const o = r.enter().append("g").merge(r);
     o.attr("class", (u) => `axis-highlight ${u.axisPosition}`);
@@ -6382,7 +6397,7 @@ class y0 extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer({ withinChartClip: !0 });
+    const e = this.getComponentContainer({ ariaLabel: "alluvial graphs", withinChartClip: !0 });
     e.html("");
     const { width: n, height: i } = _.getSVGElementSize(e, {
       useAttrs: !0
@@ -6708,7 +6723,10 @@ class E0 extends ot {
   }
   drawBackdrop(t, e) {
     const n = this.parent, i = this.services.cartesianScales.getMainXScale(), r = this.services.cartesianScales.getMainYScale(), [a, o] = i.range(), [c, l] = r.range();
-    this.backdrop = _.appendOrSelect(n, "svg.chart-grid-backdrop");
+    this.backdrop = _.appendOrSelect(n, "svg.chart-grid-backdrop").attr(
+      "role",
+      "presentation"
+    );
     const h = _.appendOrSelect(
       this.backdrop,
       t || e ? "rect.chart-grid-backdrop.stroked" : "rect.chart-grid-backdrop"
@@ -6743,7 +6761,7 @@ class S0 extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), n = this.getOptions();
+    const e = this.getComponentContainer({ ariaLabel: "area graphs", withinChartClip: !0 }), n = this.getOptions();
     let i = [0, 0];
     const { cartesianScales: r } = this.services, a = r.getOrientation(), o = yr().curve(this.services.curves.getD3Curve()).defined((b) => {
       const O = r.getRangeIdentifier(), I = b[O];
@@ -6859,7 +6877,7 @@ class x0 extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), { cartesianScales: n, curves: i } = this.services, r = (f) => n.getDomainValue(f), a = (f) => n.getRangeValue(f), [o, c] = ye(
+    const e = this.getComponentContainer({ ariaLabel: "lines", withinChartClip: !0 }), { cartesianScales: n, curves: i } = this.services, r = (f) => n.getDomainValue(f), a = (f) => n.getRangeValue(f), [o, c] = ye(
       r,
       a,
       n.getOrientation()
@@ -7096,7 +7114,7 @@ class Sr extends ot {
   render(t) {
     if (!(T(this.getOptions(), "points", "enabled") || T(this.getOptions(), "bubble", "enabled")))
       return;
-    const n = this.getComponentContainer({ withinChartClip: !0 }), i = this.getOptions(), { groupMapsTo: r } = i.data, { cartesianScales: a } = this.services;
+    const n = this.getComponentContainer({ ariaLabel: "scatter points", withinChartClip: !0 }), i = this.getOptions(), { groupMapsTo: r } = i.data, { cartesianScales: a } = this.services;
     if (!a) throw new Error("Services cartesianScales are undefined.");
     const o = a.getDomainIdentifier(), c = n.selectAll("circle.dot").data(
       this.getScatterData(),
@@ -7259,7 +7277,9 @@ class Ml extends ot {
     }, n && (this.configs = n), this.margins = this.configs.margins;
   }
   render(t = !0) {
-    const { position: e } = this.configs, n = this.getOptions(), i = T(n, "axes", e, "visible"), r = this.getComponentContainer(), { width: a, height: o } = _.getSVGElementSize(r, {
+    const { position: e } = this.configs, n = this.getOptions(), i = T(n, "axes", e, "visible"), r = this.getComponentContainer({
+      ariaLabel: "axes"
+    }), { width: a, height: o } = _.getSVGElementSize(r, {
       useAttrs: !0
     }), c = _.appendOrSelect(r, `g.axis.${e}`);
     let l, h;
@@ -7515,7 +7535,9 @@ class Kf extends Ml {
   }
   render(t = !0) {
     super.render(t), super.destroy();
-    const e = this.configs.position, n = this.getComponentContainer(), i = _.appendOrSelect(n, `g.axis.${e}`), r = this;
+    const e = this.configs.position, n = this.getComponentContainer({
+      ariaLabel: "axes"
+    }), i = _.appendOrSelect(n, `g.axis.${e}`), r = this;
     i.selectAll("g.tick").each(function(a, o) {
       const c = R(this);
       c.classed("tick-hover", !0).attr("tabindex", o === 0 ? 0 : -1);
@@ -7783,7 +7805,7 @@ class T0 extends ot {
     super(...arguments), this.type = "boxplot", this.renderType = st.SVG;
   }
   render(t) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), n = this.getOptions(), { groupMapsTo: i } = n.data, r = this.model.getDataGroupNames(), a = this.services.cartesianScales.getMainXScale(), o = this.services.cartesianScales.getMainYScale(), [c, l] = a.range(), [h, d] = o.range(), u = l - c, p = h - d;
+    const e = this.getComponentContainer({ ariaLabel: "box plots", withinChartClip: !0 }), n = this.getOptions(), { groupMapsTo: i } = n.data, r = this.model.getDataGroupNames(), a = this.services.cartesianScales.getMainXScale(), o = this.services.cartesianScales.getMainYScale(), [c, l] = a.range(), [h, d] = o.range(), u = l - c, p = h - d;
     if (u === 0)
       return;
     const { cartesianScales: f } = this.services, g = f.getOrientation(), m = g === Ft.VERTICAL, [E, y] = ye(
@@ -8045,7 +8067,9 @@ class O0 extends ot {
   render(t) {
     const e = this.services.cartesianScales.getRangeAxisPosition({
       groups: this.configs.groups
-    }), n = this.services.cartesianScales.getScaleByPosition(e), [i, r] = n.domain(), a = i > 0 && r < 0 || i < 0 && r > 0, o = this.getComponentContainer();
+    }), n = this.services.cartesianScales.getScaleByPosition(e), [i, r] = n.domain(), a = i > 0 && r < 0 || i < 0 && r > 0, o = this.getComponentContainer({
+      isPresentational: !0
+    });
     if (!a) {
       o.selectAll("line.domain").remove();
       return;
@@ -8143,7 +8167,7 @@ class L0 extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const e = this.getOptions(), { groupMapsTo: n } = e.data, i = this.getComponentContainer({ withinChartClip: !0 }), r = this.model.getDisplayData(this.configs.groups), a = this.services.cartesianScales.getRangeScale(), o = this.services.cartesianScales.getRangeIdentifier(), [c, l] = a.range(), [, h] = a.domain(), d = () => {
+    const e = this.getOptions(), { groupMapsTo: n } = e.data, i = this.getComponentContainer({ ariaLabel: "bullet graphs", withinChartClip: !0 }), r = this.model.getDisplayData(this.configs.groups), a = this.services.cartesianScales.getRangeScale(), o = this.services.cartesianScales.getRangeIdentifier(), [c, l] = a.range(), [, h] = a.domain(), d = () => {
       const g = [];
       r.forEach((y) => {
         y.ranges ? y.ranges.forEach((v, S) => {
@@ -8621,7 +8645,9 @@ class V0 extends Mf {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !1) {
-    const e = this.getOptions(), n = this.getComponentContainer(), { width: i } = _.getSVGElementSize(n, {
+    const e = this.getOptions(), n = this.getComponentContainer({
+      ariaLabel: "legend"
+    }), { width: i } = _.getSVGElementSize(n, {
       useAttrs: !0
     }), r = T(e, "color", "gradient", "colors"), a = T(e, this.chartType, "colorLegend", "type");
     let o = T(e, "color", "pairing", "option");
@@ -8696,7 +8722,9 @@ class B0 extends Af {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !1) {
-    const e = T(this.model.getDisplayData(), 0), n = this.getOptions(), i = this.getComponentContainer(), { groupMapsTo: r } = n.data, a = n.locale.translations.meter.title;
+    const e = T(this.model.getDisplayData(), 0), n = this.getOptions(), i = this.getComponentContainer({
+      ariaLabel: "meter title"
+    }), { groupMapsTo: r } = n.data, a = n.locale.translations.meter.title;
     if (T(n, "meter", "proportional"))
       this.displayTotal(), this.displayBreakdownTitle();
     else {
@@ -8840,7 +8868,10 @@ class G0 extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), { width: n, height: i } = _.getSVGElementSize(this.parent, {
+    const e = this.getComponentContainer({
+      ariaLabel: "circle packs",
+      withinChartClip: !0
+    }), { width: n, height: i } = _.getSVGElementSize(this.parent, {
       useAttrs: !0
     });
     if (n < 1 || i < 1)
@@ -9026,7 +9057,9 @@ class lg extends ot {
     return vt.innerRadius;
   }
   render(t = !0) {
-    const e = this, n = this.getComponentContainer(), i = this.getOptions(), { groupMapsTo: r } = i.data, { valueMapsTo: a } = i.pie;
+    const e = this, n = this.getComponentContainer({
+      ariaLabel: "pie graph"
+    }), i = this.getOptions(), { groupMapsTo: r } = i.data, { valueMapsTo: a } = i.pie;
     this.isRendering = !0;
     const o = this.model.getDisplayData().filter((A) => A[a] > 0), c = this.computeRadius();
     this.arc = Dn().innerRadius(this.getInnerRadius()).outerRadius(c), this.hoverArc = Dn().innerRadius(this.getInnerRadius()).outerRadius(c + vt.hoverArc.outerRadiusOffset);
@@ -9184,10 +9217,17 @@ class H0 extends lg {
     super.render(t);
     const e = this;
     if (this.model.isDataEmpty()) {
-      this.getComponentContainer().select("g.center").remove();
+      this.getComponentContainer({
+        ariaLabel: "donut graph"
+      }).select("g.center").remove();
       return;
     }
-    const n = _.appendOrSelect(this.getComponentContainer(), "g.center"), i = this.getOptions(), r = this.computeRadius(), a = T(i, "donut", "center", "label");
+    const n = _.appendOrSelect(
+      this.getComponentContainer({
+        ariaLabel: "donut graph"
+      }),
+      "g.center"
+    ), i = this.getOptions(), r = this.computeRadius(), a = T(i, "donut", "center", "label");
     _.appendOrSelect(n, "text.donut-figure").attr("text-anchor", "middle").style("dominant-baseline", () => a === null || a === "" ? "central" : "initial").style("font-size", () => i.donut.center.numberFontSize(r)).transition().call(
       (o) => this.services.transitions.setupTransition({
         transition: o,
@@ -9263,7 +9303,9 @@ class U0 extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer().attr("width", "100%").attr("height", "100%"), n = this.getOptions(), i = this.getValue(), r = this.getValueRatio(), a = this.getArcSize(), o = this.getStartAngle(), c = r * a, l = o + c, h = o + a, d = this.computeRadius(), u = this.getInnerRadius();
+    const e = this.getComponentContainer({
+      ariaLabel: "gauge graph"
+    }).attr("width", "100%").attr("height", "100%"), n = this.getOptions(), i = this.getValue(), r = this.getValueRatio(), a = this.getArcSize(), o = this.getStartAngle(), c = r * a, l = o + c, h = o + a, d = this.computeRadius(), u = this.getInnerRadius();
     this.backgroundArc = Dn().innerRadius(u).outerRadius(d).startAngle(l).endAngle(h), this.arc = Dn().innerRadius(u).outerRadius(d).startAngle(o).endAngle(l), _.appendOrSelect(e, "path.arc-background").attr("d", this.backgroundArc);
     const p = e.selectAll("path.arc-foreground").data([i]);
     p.enter().append("path").merge(p).attr(
@@ -9400,7 +9442,7 @@ class z0 extends br {
   render(t) {
     const e = this.model.getDisplayData(this.configs.groups), n = this.getOptions(), { groupMapsTo: i } = n.data;
     this.setGroupScale();
-    const r = this.getComponentContainer({ withinChartClip: !0 }), a = Jl(
+    const r = this.getComponentContainer({ ariaLabel: "grouped bar graphs", withinChartClip: !0 }), a = Jl(
       e.map((u) => {
         const p = this.services.cartesianScales.getDomainIdentifier(u);
         return u[p] && typeof u[p].toString == "function" ? u[p].toString() : u[p];
@@ -9603,7 +9645,7 @@ class F0 extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer({ withinChartClip: !0 });
+    const e = this.getComponentContainer({ ariaLabel: "heatmap", withinChartClip: !0 });
     e.lower();
     const { cartesianScales: n } = this.services;
     if (this.matrix = this.model.getMatrix(), e.html(""), T(this.getOptions(), "data", "loading"))
@@ -9739,7 +9781,9 @@ class W0 extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const e = this.getComponentContainer(), n = this.model.getOptions(), { groupIdentifier: i } = n, { groupMapsTo: r } = n.data, a = this.model.getBinnedStackedData(), o = this.services.cartesianScales.getMainXScale(), c = e.selectAll("g.bars").data(a, (h) => yt(h, `0.${r}`));
+    const e = this.getComponentContainer({
+      ariaLabel: "histogram bars"
+    }), n = this.model.getOptions(), { groupIdentifier: i } = n, { groupMapsTo: r } = n.data, a = this.model.getBinnedStackedData(), o = this.services.cartesianScales.getMainXScale(), c = e.selectAll("g.bars").data(a, (h) => yt(h, `0.${r}`));
     c.exit().attr("opacity", 0).remove(), c.enter().append("g").classed("bars", !0).attr("role", it.GROUP);
     const l = e.selectAll("g.bars").selectAll("path.bar").data((h) => h);
     l.exit().remove(), l.enter().append("path").merge(l).classed("bar", !0).attr(i, (h, d) => d).transition().call(
@@ -9838,7 +9882,7 @@ class X0 extends Sr {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), n = this.model.getOptions(), { groupMapsTo: i } = n.data, { cartesianScales: r } = this.services, a = r.getMainXScale(), o = r.getMainYScale(), c = r.getDomainIdentifier(), l = (E) => r.getDomainValue(E), h = (E) => r.getRangeValue(E), d = r.getOrientation(), [u, p] = ye(
+    const e = this.getComponentContainer({ ariaLabel: "lines", withinChartClip: !0 }), n = this.model.getOptions(), { groupMapsTo: i } = n.data, { cartesianScales: r } = this.services, a = r.getMainXScale(), o = r.getMainYScale(), c = r.getDomainIdentifier(), l = (E) => r.getDomainValue(E), h = (E) => r.getRangeValue(E), d = r.getOrientation(), [u, p] = ye(
       l,
       h,
       d
@@ -9898,7 +9942,9 @@ class j0 extends ot {
     }));
   }
   render(t = !0) {
-    const e = this, n = this.getComponentContainer(), i = this.getOptions(), r = T(i, "meter", "proportional"), a = this.model.getDisplayData(), o = this.model.getStatus(), { width: c } = _.getSVGElementSize(n, {
+    const e = this, n = this.getComponentContainer({
+      ariaLabel: "meter lines"
+    }), i = this.getOptions(), r = T(i, "meter", "proportional"), a = this.model.getDisplayData(), o = this.model.getStatus(), { width: c } = _.getSVGElementSize(n, {
       useAttrs: !0
     }), { groupMapsTo: l } = i.data;
     let h;
@@ -10038,7 +10084,9 @@ class Y0 extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const e = this.getComponentContainer(), { width: n, height: i } = _.getSVGElementSize(e, {
+    const e = this.getComponentContainer({
+      ariaLabel: "radar graph"
+    }), { width: n, height: i } = _.getSVGElementSize(e, {
       useAttrs: !0
     }), r = this.model.getData(), a = this.model.getGroupedData(), o = this.getOptions(), c = T(o, "data", "groupMapsTo"), l = T(o, "radar", "axes", "value"), { angle: h, value: d } = T(o, "radar", "axes"), { xLabelPadding: u, yLabelPadding: p, yTicksNumber: f, minRange: g, xAxisRectHeight: m } = Te;
     this.uniqueKeys = Array.from(new Set(r.map((H) => H[h]))), this.uniqueGroups = Array.from(new Set(r.map((H) => H[c]))), this.fullDataNormalized = this.normalizeFlatData(r), this.groupedDataNormalized = this.normalizeGroupedData(a);
@@ -10358,7 +10406,10 @@ class q0 extends br {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const e = this.getOptions(), { groupMapsTo: n } = e.data, i = this.getComponentContainer({ withinChartClip: !0 }), r = this.model.getDisplayData(this.configs.groups), a = this.services.cartesianScales.getOrientation(), o = i.selectAll("path.bar").data(r, (l) => l[n]);
+    const e = this.getOptions(), { groupMapsTo: n } = e.data, i = this.getComponentContainer({
+      ariaLabel: "bar graphs",
+      withinChartClip: !0
+    }), r = this.model.getDisplayData(this.configs.groups), a = this.services.cartesianScales.getOrientation(), o = i.selectAll("path.bar").data(r, (l) => l[n]);
     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,
@@ -10483,7 +10534,10 @@ class K0 extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), n = this, i = this.getOptions(), { groupMapsTo: r } = i.data, a = Object.keys(i.axes).some((f) => i.axes[f].percentage), o = this.model.getStackedData({
+    const e = this.getComponentContainer({
+      ariaLabel: "stacked area graphs",
+      withinChartClip: !0
+    }), n = this, i = this.getOptions(), { groupMapsTo: r } = i.data, a = Object.keys(i.axes).some((f) => i.axes[f].percentage), o = this.model.getStackedData({
       percentage: a,
       groups: this.configs.groups
     }), c = T(o, 0, 0), l = this.services.cartesianScales.getDomainAxisPosition({ datum: c }), h = this.services.cartesianScales.getRangeAxisPosition({ datum: c }), d = this.services.cartesianScales.getScaleByPosition(h), u = e.selectAll("path.area").data(o, (f) => T(f, 0, r));
@@ -10532,7 +10586,7 @@ class J0 extends br {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t) {
-    const e = this.getComponentContainer({ withinChartClip: !0 }), n = this.getOptions(), { groupMapsTo: i } = n.data, r = this.model.getStackedData({
+    const e = this.getComponentContainer({ ariaLabel: "stacked bar graphs", withinChartClip: !0 }), n = this.getOptions(), { groupMapsTo: i } = n.data, r = this.model.getStackedData({
       groups: this.configs.groups,
       divergent: !0
     }), a = this.model.getActiveDataGroupNames(), o = e.selectAll("g.bars").data(r, (l) => T(l, 0, i));
@@ -10646,7 +10700,7 @@ class Q0 extends Sr {
   render(t) {
     if (!T(this.getOptions(), "points", "enabled"))
       return;
-    const n = this.getComponentContainer({ withinChartClip: !0 }), i = this.getOptions(), { groupMapsTo: r } = i.data, a = Object.keys(i.axes).some((p) => i.axes[p].percentage), o = this.model.getStackedData({
+    const n = this.getComponentContainer({ ariaLabel: "scatter points", withinChartClip: !0 }), i = this.getOptions(), { groupMapsTo: r } = i.data, a = Object.keys(i.axes).some((p) => i.axes[p].percentage), o = this.model.getStackedData({
       groups: this.configs.groups,
       percentage: a
     }), c = n.selectAll("g.dots").data(o, (p) => T(p, 0, r));
@@ -10709,7 +10763,9 @@ class ty extends ot {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(t = !0) {
-    const e = this.getComponentContainer();
+    const e = this.getComponentContainer({
+      ariaLabel: "tree diagram"
+    });
     e.html("");
     const { width: n, height: i } = _.getSVGElementSize(this.parent, {
       useAttrs: !0
@@ -10982,7 +11038,9 @@ class ey extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const e = this.getComponentContainer();
+    const e = this.getComponentContainer({
+      ariaLabel: "treemap"
+    });
     this.model.getData();
     const n = this.model.getDisplayData(), i = this.model.getOptions(), r = T(window, "location"), { width: a, height: o } = _.getSVGElementSize(e, {
       useAttrs: !0
@@ -11404,7 +11462,9 @@ class ny extends ot {
     t.addEventListener(x.Legend.ITEM_HOVER, this.handleLegendOnHover), t.addEventListener(x.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
   }
   render(t = !0) {
-    const e = this, n = this.getComponentContainer().attr("width", "100%").attr("height", "100%"), i = this.model.getDisplayData(), r = this.getFontSizeScale(i), a = this.getOptions(), { fontSizeMapsTo: o, wordMapsTo: c } = a.wordCloud, { groupMapsTo: l } = a.data, { width: h, height: d } = _.getSVGElementSize(n, {
+    const e = this, n = this.getComponentContainer({
+      ariaLabel: "word cloud"
+    }).attr("width", "100%").attr("height", "100%"), i = this.model.getDisplayData(), r = this.getFontSizeScale(i), a = this.getOptions(), { fontSizeMapsTo: o, wordMapsTo: c } = a.wordCloud, { groupMapsTo: l } = a.data, { width: h, height: d } = _.getSVGElementSize(n, {
       useAttrs: !0
     });
     if (h === 0 || d === 0)
@@ -11599,7 +11659,7 @@ class sy extends i0 {
   render(t = !0) {
     super.render();
     const e = 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: e[r.properties.NAME].value,
       originalClassName: "border"
     })), this.addCountryAreaEventListener();
@@ -11715,4 +11775,4 @@ export {
   J0 as y,
   U0 as z
 };
-//# sourceMappingURL=choropleth-CeqRIFeN.mjs.map
+//# sourceMappingURL=choropleth-0DsmaWsP.mjs.map