@praxisui/charts 9.0.38 → 9.0.40

package/README.md

@@ -142,6 +142,18 @@ Use the component with either local data or governed remote execution:
 
 The public contract is `PraxisChartConfig` or the canonical `PraxisXUiChartContract`; raw ECharts options are adapter detail, not the host-facing model.
 
+## Accessibility
+
+`PraxisChartComponent` materializes accessibility from the same canonical config and transformed rows used by the visual renderer:
+
+- the default ECharts adapter enables its engine-owned ARIA description without exposing ECharts options through the public contract;
+- every ready chart offers a localized `Show chart data` / `Exibir dados do gráfico` control with a structured HTML table;
+- each table point is a native button, so Enter and Space follow browser keyboard conventions and activate the same renderer-neutral `pointClick` path as the visual point;
+- when single selection is configured, the point button publishes `aria-pressed` and preserves the existing select/deselect and cross-filter payloads;
+- loading, empty and error states remove the data controls, preventing stale chart values from remaining available to assistive technology.
+
+The structured alternative is automatic. It does not add an accessibility field to `PraxisChartConfig` or `x-ui.chart`, and custom engines remain responsible for an accessible visual rendering while the component-level data alternative remains renderer-neutral.
+
 Supported canonical kinds are `bar`, `horizontal-bar`, `line`, `area`, `stacked-bar`,
 `stacked-area`, `combo`, `pie`, `donut`, `scatter`, `funnel`, `pyramid`, `treemap`, and `gauge`. Funnel,
 pyramid, and treemap require one categorical dimension and exactly one non-negative metric. Funnel

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-30T02:26:55.462Z",
+  "generatedAt": "2026-08-30T07:25:27.035Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "9.0.38",
+  "packageVersion": "9.0.40",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 3,

package/fesm2022/praxisui-charts.mjs

@@ -1834,6 +1834,7 @@ const DEFAULT_CHART_CONFIG = {
     },
     series: [],
 };
+let chartAccessibilityPanelSequence = 0;
 class PraxisChartComponent {
     config = input(DEFAULT_CHART_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -1879,6 +1880,9 @@ class PraxisChartComponent {
     mappedRuntimeConfig = signal(null, ...(ngDevMode ? [{ debugName: "mappedRuntimeConfig" }] : /* istanbul ignore next */ []));
     chartDocumentMappingError = signal(null, ...(ngDevMode ? [{ debugName: "chartDocumentMappingError" }] : /* istanbul ignore next */ []));
     activeSelectionSignature = signal(null, ...(ngDevMode ? [{ debugName: "activeSelectionSignature" }] : /* istanbul ignore next */ []));
+    showAccessibleData = signal(false, ...(ngDevMode ? [{ debugName: "showAccessibleData" }] : /* istanbul ignore next */ []));
+    accessibilityPanelId = `praxis-chart-data-${++chartAccessibilityPanelSequence}`;
+    accessibilityPanelTitleId = `${this.accessibilityPanelId}-title`;
     fillContainerHeight = signal(false, ...(ngDevMode ? [{ debugName: "fillContainerHeight" }] : /* istanbul ignore next */ []));
     renderAttempt = signal(0, ...(ngDevMode ? [{ debugName: "renderAttempt" }] : /* istanbul ignore next */ []));
     resizeFrameId = null;
@@ -2002,6 +2006,7 @@ class PraxisChartComponent {
     }, ...(ngDevMode ? [{ debugName: "renderConfig" }] : /* istanbul ignore next */ []));
     loadingLabel = computed(() => this.i18n.resolve(this.renderConfig().state?.loadingLabel), ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
     transformedData = computed(() => this.transformer.transform(this.renderConfig(), this.resolvedData()), ...(ngDevMode ? [{ debugName: "transformedData" }] : /* istanbul ignore next */ []));
+    accessiblePoints = computed(() => buildAccessibleChartPoints(this.renderConfig(), this.transformedData(), (value) => this.formatAccessibleValue(value), (index) => this.t('praxis.charts.runtime.accessibility.pointFallback', `Point ${index + 1}`, { index: index + 1 }), () => this.t('praxis.charts.runtime.accessibility.seriesFallback', 'Series')), ...(ngDevMode ? [{ debugName: "accessiblePoints" }] : /* istanbul ignore next */ []));
     dataDiagnostic = computed(() => {
         const config = this.renderConfig();
         const explicitData = this.data();
@@ -2027,6 +2032,16 @@ class PraxisChartComponent {
             : this.i18n.resolve(this.renderConfig().state?.error?.description)
                 || this.t('praxis.charts.runtime.remoteErrorDescription', 'Revise a fonte de dados e os filtros antes de continuar.'), ...(ngDevMode ? [{ debugName: "errorDescription" }] : /* istanbul ignore next */ []));
     editChartLabel = computed(() => this.t('praxis.charts.runtime.editChart', 'Edit chart settings'), ...(ngDevMode ? [{ debugName: "editChartLabel" }] : /* istanbul ignore next */ []));
+    accessibleDataToggleLabel = computed(() => this.showAccessibleData()
+        ? this.t('praxis.charts.runtime.accessibility.hideData', 'Hide chart data')
+        : this.t('praxis.charts.runtime.accessibility.showData', 'Show chart data'), ...(ngDevMode ? [{ debugName: "accessibleDataToggleLabel" }] : /* istanbul ignore next */ []));
+    accessibleDataTitle = computed(() => this.i18n.resolve(this.renderConfig().title)
+        || this.t('praxis.charts.runtime.accessibility.dataTitle', 'Chart data'), ...(ngDevMode ? [{ debugName: "accessibleDataTitle" }] : /* istanbul ignore next */ []));
+    accessibleDataDescription = computed(() => this.i18n.resolve(this.renderConfig().subtitle)
+        || this.t('praxis.charts.runtime.accessibility.dataDescription', 'Structured alternative for the values represented in the chart.'), ...(ngDevMode ? [{ debugName: "accessibleDataDescription" }] : /* istanbul ignore next */ []));
+    accessibleCategoryHeading = computed(() => this.t('praxis.charts.runtime.accessibility.category', 'Category'), ...(ngDevMode ? [{ debugName: "accessibleCategoryHeading" }] : /* istanbul ignore next */ []));
+    accessibleSeriesHeading = computed(() => this.t('praxis.charts.runtime.accessibility.series', 'Series'), ...(ngDevMode ? [{ debugName: "accessibleSeriesHeading" }] : /* istanbul ignore next */ []));
+    accessibleValueHeading = computed(() => this.t('praxis.charts.runtime.accessibility.value', 'Value'), ...(ngDevMode ? [{ debugName: "accessibleValueHeading" }] : /* istanbul ignore next */ []));
     loadState = computed(() => {
         if (this.chartDocumentMappingError()) {
             return 'error';
@@ -2114,6 +2129,9 @@ class PraxisChartComponent {
         });
         effect(() => {
             const nextState = this.loadState();
+            if (nextState !== 'ready' || !this.accessiblePoints().length) {
+                this.showAccessibleData.set(false);
+            }
             if (this.currentLoadState() !== nextState) {
                 this.currentLoadState.set(nextState);
                 this.loadStateChange.emit(nextState);
@@ -2233,8 +2251,23 @@ class PraxisChartComponent {
         const description = descriptions[diagnostic.code];
         return this.t(description.key, description.text);
     }
-    t(key, fallback) {
-        return this.i18n.t(key, undefined, fallback, PRAXIS_CHARTS_I18N_NAMESPACE);
+    formatAccessibleValue(value) {
+        if (Array.isArray(value)) {
+            return value.map((item) => this.formatAccessibleValue(item)).join(', ');
+        }
+        if (value instanceof Date) {
+            return this.i18n.formatDate(value);
+        }
+        if (typeof value === 'number') {
+            return this.i18n.formatNumber(value);
+        }
+        if (value === null || value === undefined || value === '') {
+            return this.t('praxis.charts.runtime.accessibility.notAvailable', 'Not available');
+        }
+        return String(value);
+    }
+    t(key, fallback, params) {
+        return this.i18n.t(key, params, fallback, PRAXIS_CHARTS_I18N_NAMESPACE);
     }
     canOpenConfigEditor() {
         return this.enableCustomization() && !!this.settingsPanel && !!this.runtimeChartDocument();
@@ -2382,6 +2415,34 @@ class PraxisChartComponent {
             });
         }
     }
+    toggleAccessibleData() {
+        this.showAccessibleData.update((visible) => !visible);
+    }
+    activateAccessiblePoint(point) {
+        this.handlePointClick({
+            chartId: point.chartId,
+            seriesId: point.seriesId,
+            seriesName: point.seriesName,
+            category: point.category,
+            value: point.value,
+            data: point.data,
+        });
+    }
+    accessiblePointPressed(point) {
+        if (!this.renderConfig().interactions?.selection) {
+            return null;
+        }
+        return this.activeSelectionSignature() === this.buildPointSelectionSignature(this.renderConfig(), point)
+            ? 'true'
+            : 'false';
+    }
+    accessiblePointActionLabel(point) {
+        return this.t('praxis.charts.runtime.accessibility.activatePoint', 'Activate {{ category }}, {{ series }}: {{ value }}', {
+            category: point.categoryLabel,
+            series: point.seriesLabel,
+            value: point.valueLabel,
+        });
+    }
     buildSelectionEvent(config, event) {
         const action = config.interactions?.eventActions?.selectionChange;
         const filters = this.buildEventFilters(config, event, action?.mapping);
@@ -2751,6 +2812,22 @@ class PraxisChartComponent {
         ></button>
       }
 
+      @if (loadState() === 'ready' && accessiblePoints().length) {
+        <button
+          class="praxis-chart-data-trigger"
+          [class.praxis-chart-data-trigger-with-settings]="canOpenConfigEditor()"
+          praxisIconButton="table_view"
+          size="compact"
+          appearance="filled"
+          type="button"
+          [attr.aria-label]="accessibleDataToggleLabel()"
+          [attr.aria-controls]="accessibilityPanelId"
+          [attr.aria-expanded]="showAccessibleData()"
+          [matTooltip]="accessibleDataToggleLabel()"
+          (click)="toggleAccessibleData()"
+        ></button>
+      }
+
       @if (loadState() === 'loading') {
         <div class="praxis-chart-state praxis-chart-state-loading">
           <div class="praxis-chart-loading-hero" aria-hidden="true">
@@ -2794,10 +2871,53 @@ class PraxisChartComponent {
           }
         </div>
       } @else {
-        <div #chartHost class="praxis-chart-host"></div>
+        @if (showAccessibleData()) {
+          <section
+            class="praxis-chart-accessible-data"
+            [id]="accessibilityPanelId"
+            role="region"
+            [attr.aria-labelledby]="accessibilityPanelTitleId"
+          >
+            <h3 [id]="accessibilityPanelTitleId">{{ accessibleDataTitle() }}</h3>
+            <table>
+              <caption>{{ accessibleDataDescription() }}</caption>
+              <thead>
+                <tr>
+                  <th scope="col">{{ accessibleCategoryHeading() }}</th>
+                  <th scope="col">{{ accessibleSeriesHeading() }}</th>
+                  <th scope="col">{{ accessibleValueHeading() }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (point of accessiblePoints(); track point.id) {
+                  <tr>
+                    <th scope="row">
+                      <button
+                        type="button"
+                        class="praxis-chart-point-action"
+                        [attr.aria-label]="accessiblePointActionLabel(point)"
+                        [attr.aria-pressed]="accessiblePointPressed(point)"
+                        (click)="activateAccessiblePoint(point)"
+                      >
+                        {{ point.categoryLabel }}
+                      </button>
+                    </th>
+                    <td>{{ point.seriesLabel }}</td>
+                    <td>{{ point.valueLabel }}</td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </section>
+        }
+        <div
+          #chartHost
+          class="praxis-chart-host"
+          [attr.aria-hidden]="showAccessibleData() ? 'true' : null"
+        ></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) )}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:var(--md-sys-color-primary, #1263b4);background:transparent;font:inherit;font-weight:600;text-align:left;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid var(--md-sys-color-primary, #1263b4);outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
@@ -2832,6 +2952,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></button>
       }
 
+      @if (loadState() === 'ready' && accessiblePoints().length) {
+        <button
+          class="praxis-chart-data-trigger"
+          [class.praxis-chart-data-trigger-with-settings]="canOpenConfigEditor()"
+          praxisIconButton="table_view"
+          size="compact"
+          appearance="filled"
+          type="button"
+          [attr.aria-label]="accessibleDataToggleLabel()"
+          [attr.aria-controls]="accessibilityPanelId"
+          [attr.aria-expanded]="showAccessibleData()"
+          [matTooltip]="accessibleDataToggleLabel()"
+          (click)="toggleAccessibleData()"
+        ></button>
+      }
+
       @if (loadState() === 'loading') {
         <div class="praxis-chart-state praxis-chart-state-loading">
           <div class="praxis-chart-loading-hero" aria-hidden="true">
@@ -2875,10 +3011,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           }
         </div>
       } @else {
-        <div #chartHost class="praxis-chart-host"></div>
+        @if (showAccessibleData()) {
+          <section
+            class="praxis-chart-accessible-data"
+            [id]="accessibilityPanelId"
+            role="region"
+            [attr.aria-labelledby]="accessibilityPanelTitleId"
+          >
+            <h3 [id]="accessibilityPanelTitleId">{{ accessibleDataTitle() }}</h3>
+            <table>
+              <caption>{{ accessibleDataDescription() }}</caption>
+              <thead>
+                <tr>
+                  <th scope="col">{{ accessibleCategoryHeading() }}</th>
+                  <th scope="col">{{ accessibleSeriesHeading() }}</th>
+                  <th scope="col">{{ accessibleValueHeading() }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (point of accessiblePoints(); track point.id) {
+                  <tr>
+                    <th scope="row">
+                      <button
+                        type="button"
+                        class="praxis-chart-point-action"
+                        [attr.aria-label]="accessiblePointActionLabel(point)"
+                        [attr.aria-pressed]="accessiblePointPressed(point)"
+                        (click)="activateAccessiblePoint(point)"
+                      >
+                        {{ point.categoryLabel }}
+                      </button>
+                    </th>
+                    <td>{{ point.seriesLabel }}</td>
+                    <td>{{ point.valueLabel }}</td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </section>
+        }
+        <div
+          #chartHost
+          class="praxis-chart-host"
+          [attr.aria-hidden]="showAccessibleData() ? 'true' : null"
+        ></div>
       }
     </section>
-  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;overflow:auto;padding:52px 16px 16px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) )}.praxis-chart-accessible-data h3{margin:0 0 12px;font-size:1rem;line-height:1.4}.praxis-chart-accessible-data table{width:100%;border-collapse:collapse;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 12px;text-align:left;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-accessible-data thead th{font-weight:600}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:var(--md-sys-color-primary, #1263b4);background:transparent;font:inherit;font-weight:600;text-align:left;cursor:pointer}.praxis-chart-point-action:hover{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 10%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid var(--md-sys-color-primary, #1263b4);outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
@@ -2923,6 +3102,111 @@ function resolveUnsupportedStatsFilterExpressionDiagnostic(queryContext) {
         : '';
     return `Praxis Charts received a governed queryContext.filterExpression, but praxis.stats execution currently accepts only flat statsRequest.filter criteria. The expression was rejected instead of being flattened into an unsafe AND filter.${decision}${reason}`;
 }
+function buildAccessibleChartPoints(config, transformed, formatValue, pointFallback, seriesFallback) {
+    if (transformed.mode === 'gauge') {
+        const gauge = transformed.gauge;
+        if (!gauge) {
+            return [];
+        }
+        const series = config.series[0];
+        return [createAccessiblePoint({
+                id: gauge.id,
+                config,
+                seriesId: series?.id,
+                seriesName: series?.name ?? series?.metric?.label,
+                category: gauge.name,
+                value: gauge.value,
+                data: gauge.data,
+                index: 0,
+                formatValue,
+                pointFallback,
+                seriesFallback,
+            })];
+    }
+    if (transformed.mode === 'pie' || transformed.mode === 'funnel' || transformed.mode === 'treemap') {
+        const series = config.series[0];
+        return transformed.slices.map((slice, index) => createAccessiblePoint({
+            id: slice.id,
+            config,
+            seriesId: series?.id,
+            seriesName: series?.name ?? series?.metric?.label,
+            category: slice.name,
+            value: slice.value,
+            data: slice.data,
+            index,
+            formatValue,
+            pointFallback,
+            seriesFallback,
+        }));
+    }
+    return transformed.series.flatMap((series) => series.points.flatMap((point, index) => {
+        const value = accessiblePointValue(point);
+        if (value === null || value === undefined) {
+            return [];
+        }
+        const data = accessiblePointData(point, transformed.categories[index], value);
+        const category = transformed.categories[index]
+            ?? accessibleCategoryFromData(config, data)
+            ?? pointFallback(index);
+        return [createAccessiblePoint({
+                id: `${series.id}:${index}:${category}`,
+                config,
+                seriesId: series.id,
+                seriesName: series.name,
+                category,
+                value,
+                data,
+                index,
+                formatValue,
+                pointFallback,
+                seriesFallback,
+            })];
+    }));
+}
+function createAccessiblePoint(options) {
+    const categoryLabel = options.category?.trim() || options.pointFallback(options.index);
+    const seriesLabel = options.seriesName?.trim()
+        || options.seriesId?.trim()
+        || options.seriesFallback();
+    return {
+        id: options.id,
+        chartId: options.config.id,
+        seriesId: options.seriesId,
+        seriesName: options.seriesName,
+        category: options.category,
+        value: options.value,
+        data: options.data ?? {
+            category: options.category,
+            value: options.value,
+        },
+        categoryLabel,
+        seriesLabel,
+        valueLabel: options.formatValue(options.value),
+    };
+}
+function accessiblePointValue(point) {
+    if (Array.isArray(point)) {
+        return point.length > 1 ? point[1] : point[0];
+    }
+    if (point && typeof point === 'object' && 'value' in point) {
+        return accessiblePointValue(point['value']);
+    }
+    return point;
+}
+function accessiblePointData(point, category, value) {
+    if (point && typeof point === 'object' && !Array.isArray(point)) {
+        return point;
+    }
+    return { category, value };
+}
+function accessibleCategoryFromData(config, data) {
+    const categoryField = config.axes?.x?.field
+        ?? config.series.find((series) => series.categoryField)?.categoryField;
+    const value = categoryField ? data[categoryField] : data['category'];
+    return value === null || value === undefined || value === ''
+        ? undefined
+        : String(value);
+}
 function normalizeRemoteDataResolverResult$1(result) {
     if (Array.isArray(result)) {
         return of(result);
@@ -4427,11 +4711,13 @@ const CARTESIAN_GRID_BOTTOM_WITHOUT_LEGEND = 40;
 const DEFAULT_VALUE_LOCALE = 'pt-BR';
 class EChartsOptionBuilderService {
     transformer;
+    i18n = inject(PraxisI18nService);
     constructor(transformer) {
         this.transformer = transformer;
     }
     build(config, rows) {
         const transformed = this.transformer.transform(config, rows);
+        const accessibility = this.buildAccessibility(config, transformed);
         const palette = config.theme?.palette?.length ? config.theme.palette : PRAXIS_CHART_DEFAULT_PALETTE;
         const tooltipEnabled = config.theme?.tooltip?.enabled ?? true;
         const legendVisible = config.theme?.legend?.visible ?? true;
@@ -4501,6 +4787,7 @@ class EChartsOptionBuilderService {
                     }],
             };
             return {
+                aria: accessibility,
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
                 title: this.buildTitle(config, 'center', textColor),
@@ -4545,6 +4832,7 @@ class EChartsOptionBuilderService {
                 })),
             };
             return {
+                aria: accessibility,
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
                 title: this.buildTitle(config, 'center', textColor),
@@ -4595,6 +4883,7 @@ class EChartsOptionBuilderService {
                 })),
             };
             return {
+                aria: accessibility,
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
                 title: this.buildTitle(config, 'center', textColor),
@@ -4638,6 +4927,7 @@ class EChartsOptionBuilderService {
                 })),
             };
             return {
+                aria: accessibility,
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
                 title: this.buildTitle(config, 'center', textColor),
@@ -4667,6 +4957,7 @@ class EChartsOptionBuilderService {
                 data: series.points,
             }));
             return {
+                aria: accessibility,
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
                 title: this.buildTitle(config, 'left', textColor),
@@ -4713,6 +5004,7 @@ class EChartsOptionBuilderService {
             ? 'time'
             : config.axes?.x?.type ?? 'category';
         return {
+            aria: accessibility,
             backgroundColor: config.theme?.backgroundColor,
             color: palette,
             title: this.buildTitle(config, 'left', textColor),
@@ -4799,6 +5091,57 @@ class EChartsOptionBuilderService {
         }
         return undefined;
     }
+    buildAccessibility(config, transformed) {
+        const title = this.i18n.resolve(config.title).trim();
+        const seriesCount = transformed.mode === 'gauge'
+            ? transformed.gauge ? 1 : 0
+            : transformed.slices.length
+                ? 1
+                : transformed.series.length;
+        const pointCount = transformed.mode === 'gauge'
+            ? transformed.gauge ? 1 : 0
+            : transformed.slices.length
+                ? transformed.slices.length
+                : transformed.series.reduce((total, series) => total + series.points.length, 0);
+        const params = {
+            title,
+            type: this.chartTypeLabel(config.type),
+            seriesCount,
+            pointCount,
+        };
+        const description = title
+            ? this.t('praxis.charts.runtime.accessibility.ariaDescriptionWithTitle', 'Chart "{{ title }}". Type: {{ type }}. Series: {{ seriesCount }}. Points: {{ pointCount }}. Complete values are available under "Show chart data".', params)
+            : this.t('praxis.charts.runtime.accessibility.ariaDescriptionWithoutTitle', 'Chart. Type: {{ type }}. Series: {{ seriesCount }}. Points: {{ pointCount }}. Complete values are available under "Show chart data".', params);
+        return {
+            enabled: true,
+            label: {
+                enabled: true,
+                description,
+            },
+        };
+    }
+    chartTypeLabel(type) {
+        const fallbacks = {
+            bar: 'Bar',
+            'horizontal-bar': 'Horizontal bar',
+            line: 'Line',
+            area: 'Area',
+            'stacked-bar': 'Stacked bar',
+            'stacked-area': 'Stacked area',
+            combo: 'Combination',
+            pie: 'Pie',
+            donut: 'Donut',
+            scatter: 'Scatter',
+            funnel: 'Funnel',
+            pyramid: 'Pyramid',
+            treemap: 'Treemap',
+            gauge: 'Gauge',
+        };
+        return this.t(`praxis.charts.runtime.accessibility.chartType.${type}`, fallbacks[type]);
+    }
+    t(key, fallback, params) {
+        return this.i18n.t(key, params, fallback, PRAXIS_CHARTS_I18N_NAMESPACE);
+    }
     resolveTextColor(config) {
         return config.theme?.textColor ?? '#4b5563';
     }
@@ -5458,6 +5801,33 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.runtime.gaugeValueInvalid': 'The gauge requires one finite metric value.',
     'praxis.charts.runtime.gaugeValueOutOfRange': 'The gauge value is outside the configured scale. Review the metric and scale instead of clamping the value.',
     'praxis.charts.runtime.booleanFalseLabel': 'Not {{ label }}',
+    'praxis.charts.runtime.accessibility.showData': 'Show chart data',
+    'praxis.charts.runtime.accessibility.hideData': 'Hide chart data',
+    'praxis.charts.runtime.accessibility.dataTitle': 'Chart data',
+    'praxis.charts.runtime.accessibility.dataDescription': 'Structured alternative for the values represented in the chart.',
+    'praxis.charts.runtime.accessibility.category': 'Category',
+    'praxis.charts.runtime.accessibility.series': 'Series',
+    'praxis.charts.runtime.accessibility.value': 'Value',
+    'praxis.charts.runtime.accessibility.pointFallback': 'Point {{ index }}',
+    'praxis.charts.runtime.accessibility.seriesFallback': 'Series',
+    'praxis.charts.runtime.accessibility.notAvailable': 'Not available',
+    'praxis.charts.runtime.accessibility.activatePoint': 'Activate {{ category }}, {{ series }}: {{ value }}',
+    'praxis.charts.runtime.accessibility.ariaDescriptionWithTitle': 'Chart "{{ title }}". Type: {{ type }}. Series: {{ seriesCount }}. Points: {{ pointCount }}. Complete values are available under "Show chart data".',
+    'praxis.charts.runtime.accessibility.ariaDescriptionWithoutTitle': 'Chart. Type: {{ type }}. Series: {{ seriesCount }}. Points: {{ pointCount }}. Complete values are available under "Show chart data".',
+    'praxis.charts.runtime.accessibility.chartType.bar': 'Bar',
+    'praxis.charts.runtime.accessibility.chartType.horizontal-bar': 'Horizontal bar',
+    'praxis.charts.runtime.accessibility.chartType.line': 'Line',
+    'praxis.charts.runtime.accessibility.chartType.area': 'Area',
+    'praxis.charts.runtime.accessibility.chartType.stacked-bar': 'Stacked bar',
+    'praxis.charts.runtime.accessibility.chartType.stacked-area': 'Stacked area',
+    'praxis.charts.runtime.accessibility.chartType.combo': 'Combination',
+    'praxis.charts.runtime.accessibility.chartType.pie': 'Pie',
+    'praxis.charts.runtime.accessibility.chartType.donut': 'Donut',
+    'praxis.charts.runtime.accessibility.chartType.scatter': 'Scatter',
+    'praxis.charts.runtime.accessibility.chartType.funnel': 'Funnel',
+    'praxis.charts.runtime.accessibility.chartType.pyramid': 'Pyramid',
+    'praxis.charts.runtime.accessibility.chartType.treemap': 'Treemap',
+    'praxis.charts.runtime.accessibility.chartType.gauge': 'Gauge',
     'praxis.charts.runtime.comparisonCurrent': 'Current',
     'praxis.charts.runtime.comparisonPrevious': 'Previous',
     'praxis.charts.widget.missingDocument': 'This widget does not have a canonical chart document yet. Runtime inputs are preserved until a canonical chartDocument is provided by the host.',
@@ -5693,6 +6063,33 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.runtime.gaugeValueInvalid': 'O velocímetro exige um único valor numérico finito.',
     'praxis.charts.runtime.gaugeValueOutOfRange': 'O valor do velocímetro está fora da escala configurada. Revise a métrica e a escala em vez de limitar o valor silenciosamente.',
     'praxis.charts.runtime.booleanFalseLabel': 'Não {{ label }}',
+    'praxis.charts.runtime.accessibility.showData': 'Exibir dados do gráfico',
+    'praxis.charts.runtime.accessibility.hideData': 'Ocultar dados do gráfico',
+    'praxis.charts.runtime.accessibility.dataTitle': 'Dados do gráfico',
+    'praxis.charts.runtime.accessibility.dataDescription': 'Alternativa estruturada para os valores representados no gráfico.',
+    'praxis.charts.runtime.accessibility.category': 'Categoria',
+    'praxis.charts.runtime.accessibility.series': 'Série',
+    'praxis.charts.runtime.accessibility.value': 'Valor',
+    'praxis.charts.runtime.accessibility.pointFallback': 'Ponto {{ index }}',
+    'praxis.charts.runtime.accessibility.seriesFallback': 'Série',
+    'praxis.charts.runtime.accessibility.notAvailable': 'Não disponível',
+    'praxis.charts.runtime.accessibility.activatePoint': 'Ativar {{ category }}, {{ series }}: {{ value }}',
+    'praxis.charts.runtime.accessibility.ariaDescriptionWithTitle': 'Gráfico "{{ title }}". Tipo: {{ type }}. Séries: {{ seriesCount }}. Pontos: {{ pointCount }}. Os valores completos estão disponíveis em "Exibir dados do gráfico".',
+    'praxis.charts.runtime.accessibility.ariaDescriptionWithoutTitle': 'Gráfico. Tipo: {{ type }}. Séries: {{ seriesCount }}. Pontos: {{ pointCount }}. Os valores completos estão disponíveis em "Exibir dados do gráfico".',
+    'praxis.charts.runtime.accessibility.chartType.bar': 'Barras',
+    'praxis.charts.runtime.accessibility.chartType.horizontal-bar': 'Barras horizontais',
+    'praxis.charts.runtime.accessibility.chartType.line': 'Linhas',
+    'praxis.charts.runtime.accessibility.chartType.area': 'Área',
+    'praxis.charts.runtime.accessibility.chartType.stacked-bar': 'Barras empilhadas',
+    'praxis.charts.runtime.accessibility.chartType.stacked-area': 'Área empilhada',
+    'praxis.charts.runtime.accessibility.chartType.combo': 'Combinado',
+    'praxis.charts.runtime.accessibility.chartType.pie': 'Pizza',
+    'praxis.charts.runtime.accessibility.chartType.donut': 'Rosca',
+    'praxis.charts.runtime.accessibility.chartType.scatter': 'Dispersão',
+    'praxis.charts.runtime.accessibility.chartType.funnel': 'Funil',
+    'praxis.charts.runtime.accessibility.chartType.pyramid': 'Pirâmide',
+    'praxis.charts.runtime.accessibility.chartType.treemap': 'Mapa de árvore',
+    'praxis.charts.runtime.accessibility.chartType.gauge': 'Velocímetro',
     'praxis.charts.runtime.comparisonCurrent': 'Atual',
     'praxis.charts.runtime.comparisonPrevious': 'Anterior',
     'praxis.charts.widget.missingDocument': 'Este widget ainda não possui um documento canônico de gráfico. Os inputs runtime são preservados até o host fornecer um chartDocument canônico.',
@@ -9557,6 +9954,7 @@ function provideChartEngineFactory(options) {
 function providePraxisCharts(options = {}) {
     return [
         ...providePraxisChartsI18n(),
+        EChartsOptionBuilderService,
         provideChartEngineFactory(options),
         providePraxisChartsMetadata(),
         providePraxisChartDrilldownPanelMetadata(),

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "9.0.38",
+  "version": "9.0.40",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^9.0.38",
+    "@praxisui/core": "^9.0.40",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^9.0.38",
+    "@praxisui/table": "^9.0.40",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -547,6 +547,12 @@ interface ChartEditorTargetOption {
     events?: ChartEditorEventKey[];
 }
 
+interface PraxisChartAccessiblePoint extends PraxisChartPointEvent {
+    id: string;
+    categoryLabel: string;
+    seriesLabel: string;
+    valueLabel: string;
+}
 declare class PraxisChartComponent {
     readonly config: _angular_core.InputSignal<PraxisChartConfig>;
     readonly data: _angular_core.InputSignal<PraxisChartDataRow[] | null>;
@@ -592,6 +598,9 @@ declare class PraxisChartComponent {
     private readonly mappedRuntimeConfig;
     private readonly chartDocumentMappingError;
     private readonly activeSelectionSignature;
+    readonly showAccessibleData: _angular_core.WritableSignal<boolean>;
+    readonly accessibilityPanelId: string;
+    readonly accessibilityPanelTitleId: string;
     private readonly fillContainerHeight;
     private readonly renderAttempt;
     private resizeFrameId;
@@ -620,16 +629,24 @@ declare class PraxisChartComponent {
     readonly surfaceTextColor: _angular_core.Signal<string | null>;
     readonly renderConfig: _angular_core.Signal<PraxisChartConfig>;
     readonly loadingLabel: _angular_core.Signal<string>;
-    readonly transformedData: _angular_core.Signal<_praxisui_charts.PraxisChartTransformedData>;
+    readonly transformedData: _angular_core.Signal<PraxisChartTransformedData>;
+    readonly accessiblePoints: _angular_core.Signal<PraxisChartAccessiblePoint[]>;
     readonly dataDiagnostic: _angular_core.Signal<PraxisChartDataDiagnostic | null>;
     readonly emptyTitle: _angular_core.Signal<string>;
     readonly emptyDescription: _angular_core.Signal<string>;
     readonly errorTitle: _angular_core.Signal<string>;
     readonly errorDescription: _angular_core.Signal<string>;
     readonly editChartLabel: _angular_core.Signal<string>;
+    readonly accessibleDataToggleLabel: _angular_core.Signal<string>;
+    readonly accessibleDataTitle: _angular_core.Signal<string>;
+    readonly accessibleDataDescription: _angular_core.Signal<string>;
+    readonly accessibleCategoryHeading: _angular_core.Signal<string>;
+    readonly accessibleSeriesHeading: _angular_core.Signal<string>;
+    readonly accessibleValueHeading: _angular_core.Signal<string>;
     readonly loadState: _angular_core.Signal<PraxisChartLoadState>;
     constructor();
     private resolveDataDiagnosticDescription;
+    private formatAccessibleValue;
     private t;
     canOpenConfigEditor(): boolean;
     openConfigEditor(): Promise<void>;
@@ -638,6 +655,10 @@ declare class PraxisChartComponent {
     private isConfigEditorContextResult;
     private asRecord;
     private handlePointClick;
+    toggleAccessibleData(): void;
+    activateAccessiblePoint(point: PraxisChartAccessiblePoint): void;
+    accessiblePointPressed(point: PraxisChartAccessiblePoint): string | null;
+    accessiblePointActionLabel(point: PraxisChartAccessiblePoint): string;
     private buildSelectionEvent;
     private buildPointSelectionSignature;
     private buildSelectionScopeSignature;