q2-tecton-elements 1.36.0 → 1.37.0

package/dist/esm/q2-chart-donut.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { o as overrideFocus, l as loc, i as isEventFromElement } from './index-35ff2881.js';
+import { o as overrideFocus, l as loc, i as isEventFromElement } from './index-74a659a5.js';
 import { bn as normalizeCssArray, V as Rect, _ as __extends, av as ComponentModel, bo as toCamelCase, bp as env, bq as normalizeEvent, x as convertToColorString, b2 as isString, a0 as isArray, br as isDom, I as each$1, bs as bind, aJ as indexOf, bt as getPaddingFromTooltipModel, bu as transformLocalCoord, j as isObject, bv as throwError, E as ZRText, bw as getTooltipRenderMode, bx as createOrUpdate, by as clear, bz as register, d as getECData, bA as findPointFromSeries, bB as findEventDispatcher, bC as createTooltipMarkup, bD as getValueLabel, bE as trim, bF as getAxisRawValue, bG as normalizeTooltipFormatResult, bH as buildTooltipMarkup, bI as clone, bJ as format, bK as formatTpl, D as isFunction, bg as parsePercent, aH as getLayoutRect, bL as unregister, aY as ComponentView, bM as Model, bN as preParseFinder, bO as queryReferringComponents, bP as TooltipMarkupStyleCreator, a as extend, a9 as use, aZ as install$5, bQ as noop, ax as merge, bR as isNameSpecified, a6 as createHashMap, m as map, a5 as filter, o as isNumber, y as defaults, bS as parse, bT as stringify, b as setLabelStyle, bU as enableHoverEmphasis, a$ as createTextStyle, bV as setTooltipConfig, bW as box, bX as createOrUpdatePatternFromDecal, c as createSymbol, af as curry$1, G as Group$2, ay as getLayoutParams, b3 as inheritDefaultOption, az as mergeLayoutParam, bY as createIcon, a_ as retrieve2, u as updateProps, at as linearMap, W as Point, bj as shiftLayoutOnY, bZ as parsePercent$1, i as initProps, s as saveOldStyle, z as setStatesStylesFromModel, t as toggleHoverEmphasis, g as getLabelStatesModels, bb as Polyline, b_ as retrieve3, U as Sector, b5 as removeElementWithFadeOut, C as ChartView, ah as prepareSeriesDataSchema, aj as SeriesData, a3 as makeInner, b$ as makeSeriesEncodeForNameBased, c0 as getPercentSeats, c1 as defaultEmphasis, S as SeriesModel, c2 as createLegacyDataSelectAction, aa as init, ac as install$6, ab as install$7 } from './installCanvasRenderer-4a470516.js';
 import { l as limitTurnAngle, a as limitSurfaceAngle, s as setLabelLineStyle, g as getLabelLineStatesModels, i as installLabelLayout } from './installLabelLayout-d660eaad.js';
 
@@ -4499,12 +4499,16 @@ const Q2ChartDonut = class {
       event.stopPropagation();
       this.clearSelection();
     };
-    this.onButtonKeyUp = (event) => {
+    this.onButtonKeyDown = (event) => {
       const { selectedId, data } = this;
       let selectedIndex = this.getIndexById(selectedId) || 0;
       switch (event.key) {
-        case 'ArrowLeft':
         case 'ArrowUp':
+        case 'ArrowDown':
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
           selectedIndex--;
           if (selectedIndex < 0)
             selectedIndex = data.length - 1;
@@ -4515,7 +4519,7 @@ const Q2ChartDonut = class {
           });
           break;
         case 'ArrowRight':
-        case 'ArrowDown':
+          event.preventDefault();
           selectedIndex++;
           if (selectedIndex > data.length - 1)
             selectedIndex = 0;
@@ -4833,18 +4837,18 @@ const Q2ChartDonut = class {
     const displayValue = this.displayValue(value);
     const props = isClickable
       ? {
-        onKeyUp: this.onButtonKeyUp,
+        onKeyDown: this.onButtonKeyDown,
         onClick: this.onButtonClick,
         ref: el => (this.centerButtonElement = el),
-        'aria-description': loc('tecton.element.chartDonut.button.description'),
+        'aria-describedby': 'center-card-description',
         'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
       }
       : null;
-    return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (h("q2-icon", { type: icon, style: color && {
+    return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, isClickable && (h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description'))), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
         '--tct-icon-stroke-primary': color,
         '--tct-icon-stroke-secondary': color,
         color,
-      } })), name && h("div", { class: "name" }, name), value && h("div", { class: "value" }, displayValue))));
+      } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
   }
   render() {
     return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));