q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-chart-area/q2-chart-area.js

@@ -1,10 +1,11 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import * as echarts from "echarts/core";
 import { TitleComponent, AriaComponent, GridComponent, } from "echarts/components";
 import { LineChart } from "echarts/charts";
 import { UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
-import { loc, overrideFocus } from "../../utils/index";
+import { loc, overrideFocus, isEventFromElement } from "../../utils/index";
+import { chartPointDescription, createChartKeyboardNavigation } from "../../utils/chart-keyboard";
 import mirrorEmit from "../../utils/mirror-emit";
 import { getCSSProperty, isValidColor, formatValue } from "../../utils/charting";
 echarts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);
@@ -15,6 +16,18 @@ echarts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, Grid
  */
 export class Q2ChartArea {
     constructor() {
+        this.keyboard = createChartKeyboardNavigation({
+            getChart: () => this.chart,
+            getData: () => this.data,
+            onChange: index => {
+                this.keyboardIndex = index;
+                if (index !== null)
+                    mirrorEmit(this, ['change', 'tctChange'], { index, data: this.data[index] });
+            },
+        });
+        // #endregion
+        // #region State Properties
+        this.keyboardIndex = null;
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** Controls visibility of labels on the name axis. */
@@ -44,6 +57,7 @@ export class Q2ChartArea {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        this.keyboard.onBlur();
         // CRITICAL: Dispose eCharts instance to prevent memory leaks
         // eCharts holds references to canvas, event listeners, and animation frames
         if (this.chart) {
@@ -70,6 +84,13 @@ export class Q2ChartArea {
         overrideFocus(this.hostElement);
     }
     // #endregion
+    // #region Listeners
+    delegateFocus(event) {
+        var _a;
+        if (isEventFromElement(event, this.hostElement) && this.data.length)
+            (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // #endregion
     // #region Public Methods API
     /**
      * A method to fire change event on hover on a point.
@@ -88,9 +109,18 @@ export class Q2ChartArea {
         if (!this.chart)
             return;
         this.updateChart(this.chart);
+        this.keyboard.refresh();
     }
     // #endregion
     // #region Local Methods
+    get keyboardDescription() {
+        var _a;
+        const datum = this.data[this.keyboardIndex];
+        if (this.keyboardIndex === null || !datum)
+            return '';
+        const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+        return chartPointDescription(datum.name, formatValue(datum.value || 0, { type: this.format, decimals }), this.keyboardIndex, this.data.length);
+    }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -140,7 +170,7 @@ export class Q2ChartArea {
         });
     }
     updateChart(chart) {
-        var _a;
+        var _a, _b;
         const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
         const valueAxis = {
             type: 'value',
@@ -203,7 +233,7 @@ export class Q2ChartArea {
             min: this.xMin,
             max: this.xMax,
         };
-        return chart.setOption({
+        chart.setOption({
             aria: {
                 enabled: true,
             },
@@ -248,11 +278,13 @@ export class Q2ChartArea {
                 },
             ],
         });
+        // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+        (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.setAttribute('role', 'application');
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '247b79eca7719feab470918648f223675483daf8', class: "container" }, h("div", { key: '349272c0ece24581f05dcadb81d7a19dd71eaa2d', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: 'de38ac1c05ff6c85091069a691c5e2d51ba360ed', class: "container" }, h("div", { key: 'e45310470e9429714bd15100d01692b102963545', ref: el => (this.chartContainer = el), class: "chart-container", role: "application", tabIndex: this.data.length ? 0 : -1, "aria-describedby": "chart-keyboard-instructions", onFocus: this.keyboard.onFocus, onBlur: this.keyboard.onBlur, onKeyDown: this.keyboard.onKeyDown, "test-id": "areaChartContainer" }), h("div", { key: '45493b2498b17ab331fdff4487bd05874732c75e', id: "chart-keyboard-instructions", class: "sr" }, loc('tecton.element.chart.keyboardInstructions')), h("div", { key: '9d0a71f228271efde15c7ff4e0bae2a1144a8c9c', class: this.keyboardIndex === null ? 'sr' : 'chart-keyboard-value', role: "status", "aria-atomic": "true" }, this.keyboardDescription)));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }
@@ -771,6 +803,11 @@ export class Q2ChartArea {
             }
         };
     }
+    static get states() {
+        return {
+            "keyboardIndex": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "change",
@@ -783,7 +820,7 @@ export class Q2ChartArea {
                             "name": "deprecated",
                             "text": "Use 'tctChange' instead"
                         }],
-                    "text": "Emitted when a data point is clicked."
+                    "text": "Emitted when a data point is explored using the chart pointer or keyboard."
                 },
                 "complexType": {
                     "original": "{\n        index: number;\n        data: ChartData;\n    }",
@@ -805,7 +842,7 @@ export class Q2ChartArea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a data point is clicked."
+                    "text": "Emitted when a data point is explored using the chart pointer or keyboard."
                 },
                 "complexType": {
                     "original": "{\n        index: number;\n        data: ChartData;\n    }",
@@ -916,4 +953,13 @@ export class Q2ChartArea {
                 "methodName": "propsUpdates"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "delegateFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/q2-chart-area/test/q2-chart-area-test.vr.js

@@ -117,6 +117,20 @@ const restingCase = (variant, theme) => {
     });
 };
 test.describe('q2-chart-area — variants × themes', () => {
+    for (const theme of THEMES) {
+        test(`q2-chart-area--keyboard--focus — ${theme}`, async ({ page }) => {
+            await setupPage(page, '<q2-chart-area style="width: 560px; height: 360px" chart-name="Weekly Spending" format="currency"></q2-chart-area>', { theme, setupLoc: true });
+            await setChartData(page, SHORT_DATA);
+            await expect(page.locator('q2-chart-area .chart-container')).toHaveAttribute('tabindex', '0');
+            await expect(page.locator('q2-chart-area .chart-container')).toHaveAttribute('role', 'application');
+            await page.keyboard.press('Tab');
+            await page.keyboard.press('ArrowRight');
+            const chart = page.locator('q2-chart-area');
+            await expect(chart.locator('.chart-container')).toBeFocused();
+            await expect(chart.getByRole('status')).toContainText('Mon, $36, point 2 of 7');
+            await expect(page).toHaveScreenshot(`q2-chart-area--keyboard--focus--${theme}.png`);
+        });
+    }
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
             restingCase(variant, theme);

package/dist/collection/components/q2-chart-bar/q2-chart-bar.css

@@ -98,10 +98,21 @@ button {
 }
 
 .container {
+  position: relative;
   width: 100%;
   height: 100%;
 }
 
+.chart-keyboard-value {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--app-scale-1x);
+  background: var(--t-base);
+  color: var(--t-text);
+  pointer-events: none;
+}
+
 .chart-container {
   width: 100%;
   height: 100%;

package/dist/collection/components/q2-chart-bar/q2-chart-bar.js

@@ -4,7 +4,8 @@ import { TitleComponent, AriaComponent, GridComponent, } from "echarts/component
 import { BarChart } from "echarts/charts";
 import { LabelLayout } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
-import { loc, overrideFocus } from "../../utils/index";
+import { loc, overrideFocus, isEventFromElement } from "../../utils/index";
+import { chartPointDescription, createChartKeyboardNavigation } from "../../utils/chart-keyboard";
 import { getCSSProperty, isValidColor, formatValue } from "../../utils/charting";
 echarts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);
 /**
@@ -14,6 +15,18 @@ echarts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent
  */
 export class Q2ChartBar {
     constructor() {
+        this.keyboard = createChartKeyboardNavigation({
+            getChart: () => this.chart,
+            getData: () => this.data,
+            onChange: index => (this.keyboardIndex = index),
+            getOrder: () => {
+                const indices = this.data.map((_, index) => index);
+                return this.sort ? indices.sort((a, b) => this.data[b].value - this.data[a].value) : indices;
+            },
+        });
+        // #endregion
+        // #region State Properties
+        this.keyboardIndex = null;
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** Controls visibility of labels on the name axis. */
@@ -41,6 +54,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        this.keyboard.onBlur();
         // Remove event listeners
         window.removeEventListener('resize', this.resizeEventListener);
         // Clean up chart instance
@@ -70,14 +84,30 @@ export class Q2ChartBar {
         overrideFocus(this.hostElement);
     }
     // #endregion
+    // #region Listeners
+    delegateFocus(event) {
+        var _a;
+        if (isEventFromElement(event, this.hostElement) && this.data.length)
+            (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // #endregion
     // #region Watchers
     propsUpdates() {
         if (!this.chart)
             return;
         this.updateChart(this.chart);
+        this.keyboard.refresh();
     }
     // #endregion
     // #region Local Methods
+    get keyboardDescription() {
+        var _a;
+        const datum = this.data[this.keyboardIndex];
+        if (this.keyboardIndex === null || !datum)
+            return '';
+        const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+        return chartPointDescription(datum.name, formatValue(datum.value || 0, { type: this.format, decimals }), this.sort ? [...this.data].sort((a, b) => b.value - a.value).indexOf(datum) : this.keyboardIndex, this.data.length);
+    }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -120,7 +150,7 @@ export class Q2ChartBar {
         chart.on('finished', this.chartFinishedListener);
     }
     updateChart(chart) {
-        var _a;
+        var _a, _b;
         const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
         const valueAxis = {
             type: 'value',
@@ -149,7 +179,7 @@ export class Q2ChartBar {
                 alignWithLabel: this.offsetDataNames,
             },
         };
-        return chart.setOption({
+        chart.setOption({
             aria: {
                 enabled: true,
             },
@@ -185,11 +215,13 @@ export class Q2ChartBar {
                 },
             ],
         });
+        // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+        (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.setAttribute('role', 'application');
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '36a77a29d5e06363f2cd2267c298429cd2ef9864', class: "container" }, h("div", { key: 'e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '2764d138c5aee7d65df3361a7d4720e00ba13368', class: "container" }, h("div", { key: '864b3f1d5987a101ab008e37e99c874cc411c143', ref: el => (this.chartContainer = el), class: "chart-container", role: "application", tabIndex: this.data.length ? 0 : -1, "aria-describedby": "chart-keyboard-instructions", onFocus: this.keyboard.onFocus, onBlur: this.keyboard.onBlur, onKeyDown: this.keyboard.onKeyDown, "test-id": "barChartContainer" }), h("div", { key: '3b6aa42b27e86f75cd4d1fc3d2efe823b950864c', id: "chart-keyboard-instructions", class: "sr" }, loc('tecton.element.chart.keyboardInstructions')), h("div", { key: '5d216b8ccce18ea77f136fd43ab81db335b38d89', class: this.keyboardIndex === null ? 'sr' : 'chart-keyboard-value', role: "status", "aria-atomic": "true" }, this.keyboardDescription)));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -549,6 +581,11 @@ export class Q2ChartBar {
             }
         };
     }
+    static get states() {
+        return {
+            "keyboardIndex": {}
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
@@ -598,4 +635,13 @@ export class Q2ChartBar {
                 "methodName": "propsUpdates"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "delegateFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/q2-chart-bar/test/q2-chart-bar-test.vr.js

@@ -96,6 +96,20 @@ const restingCase = (variant, theme) => {
     });
 };
 test.describe('q2-chart-bar — variants × themes', () => {
+    for (const theme of THEMES) {
+        test(`q2-chart-bar--keyboard--focus — ${theme}`, async ({ page }) => {
+            await setupPage(page, '<q2-chart-bar style="width: 560px; height: 360px" chart-name="Weekly Spending" format="currency"></q2-chart-bar>', { theme, setupLoc: true });
+            await setChartData(page, SHORT_DATA);
+            await expect(page.locator('q2-chart-bar .chart-container')).toHaveAttribute('tabindex', '0');
+            await expect(page.locator('q2-chart-bar .chart-container')).toHaveAttribute('role', 'application');
+            await page.keyboard.press('Tab');
+            await page.keyboard.press('ArrowRight');
+            const chart = page.locator('q2-chart-bar');
+            await expect(chart.locator('.chart-container')).toBeFocused();
+            await expect(chart.getByRole('status')).toContainText('Mon, $36, point 2 of 7');
+            await expect(page).toHaveScreenshot(`q2-chart-bar--keyboard--focus--${theme}.png`);
+        });
+    }
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
             restingCase(variant, theme);

package/dist/collection/components/q2-chart-donut/q2-chart-donut.js

@@ -7,6 +7,7 @@ import { CanvasRenderer } from "echarts/renderers";
 import { isEventFromElement, isMobile, loc, overrideFocus } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
 import { getCSSProperty } from "../../utils/charting";
+import { chartPointDescription } from "../../utils/chart-keyboard";
 echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaComponent, LabelLayout]);
 /**
  * @name Donut Chart
@@ -16,6 +17,7 @@ echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, AriaCo
 export class Q2ChartDonut {
     constructor() {
         this.defaultRecord = { id: null, value: null, name: null };
+        this.keyboardAnnouncement = '';
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** The amount which the slice will scale when hovered. */
@@ -55,6 +57,8 @@ export class Q2ChartDonut {
         };
         this.onButtonKeyDown = (event) => {
             const { selectedId, data } = this;
+            if (!data.length || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
             let selectedIndex = this.getIndexById(selectedId) || 0;
             switch (event.key) {
                 case 'ArrowUp':
@@ -84,14 +88,23 @@ export class Q2ChartDonut {
                     });
                     break;
                 case 'Escape':
+                    event.preventDefault();
                     this.clearSelection();
-                    break;
-                case ' ':
+                    this.keyboardAnnouncement = loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName');
+                    return;
+                case 'Home':
+                case 'End':
                     event.preventDefault();
+                    selectedIndex = event.key === 'Home' ? 0 : data.length - 1;
+                    this.chart.dispatchAction({ type: 'select', seriesId: 'pie', dataIndex: selectedIndex });
                     break;
                 default:
                     return;
             }
+            if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+                const datum = data[selectedIndex];
+                this.keyboardAnnouncement = chartPointDescription(datum.name, this.displayValue(datum.value), selectedIndex, data.length);
+            }
         };
         this.onClickElsewhere = (event) => {
             event.stopPropagation();
@@ -191,12 +204,13 @@ export class Q2ChartDonut {
     // #endregion
     // #region Listeners
     delegateFocus(event) {
-        var _a;
+        var _a, _b;
         if (!isEventFromElement(event, this.hostElement))
             return;
-        if (!this.isClickable)
-            return;
-        (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (this.isClickable)
+            (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+        else if (this.data.length)
+            (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -267,6 +281,7 @@ export class Q2ChartDonut {
         this.updateChart(this.chart);
     }
     dataUpdated() {
+        this.keyboardAnnouncement = '';
         if (!this.chart)
             return;
         this.colors = this.getColors();
@@ -442,8 +457,9 @@ export class Q2ChartDonut {
         });
     }
     updateChart(chart) {
+        var _a;
         this.validateColor();
-        return chart.setOption({
+        chart.setOption({
             tooltip: {
                 show: false,
             },
@@ -485,6 +501,8 @@ export class Q2ChartDonut {
                 },
             ],
         });
+        // The clickable variant handles keyboard interaction on its native center button.
+        (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.setAttribute('role', this.isClickable ? 'img' : 'application');
     }
     validateColor() {
         // check if there is name duplicated, then custom style using `itemStyle` object will be used.
@@ -508,20 +526,21 @@ export class Q2ChartDonut {
         const props = isClickable
             ? {
                 onKeyDown: this.onButtonKeyDown,
+                onBlur: () => (this.keyboardAnnouncement = ''),
                 onClick: this.onButtonClick,
                 ref: el => (this.centerButtonElement = el),
-                'aria-describedby': 'center-card-description',
+                'aria-describedby': 'center-card-description chart-keyboard-instructions',
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, { 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})`, height: `calc(${this.innerRadius})` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h("div", { id: "chart-keyboard-instructions", class: "sr" }, loc('tecton.element.chart.keyboardInstructions')), h(TagName, { 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), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '27c21f281ef0746c9bd9d7235fa1833df7711e4d', onChange: this.onClickElsewhere }, h("figure", { key: '8356a94846a4319b682e3bc3171e6a71afb228f8' }, h("div", { key: 'a6b016aaa11371fdff673eb8cd7508bb5f3ce852', class: "container" }, h("div", { key: '862baeb8b1c1e096c92d260bc7340666875f9763', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '24f16b0d7afd3a6433c58cd8eb6806785fc938e5' }, h("q2-legend", { key: '6bd27b69926b77181ab16726bb4e79c91e4dcc37', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '54e5d16621ac527fec69834b2c1cc1e7d2c6540b', onChange: this.onClickElsewhere }, h("figure", { key: '61e0c1e30fed4e89816d228c1c190b5bd38991a3' }, h("div", { key: '0685b804780ebdf17d7bfe5956306a027c3c9dba', class: "container" }, h("div", { key: '458dfa5c6ad8d704de66d4d51461e2d7b28ba13c', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description chart-keyboard-instructions' : undefined, class: "chart-container", role: this.isClickable ? 'img' : 'application', "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable && this.data.length ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined, onBlur: () => (this.keyboardAnnouncement = '') }), this.renderCenterBlock(), h("div", { key: '105396c05b8aa162b1c0515cb4b96dadafcca911', class: "sr", role: "status", "aria-atomic": "true" }, this.keyboardAnnouncement)), this.showLegend && (h("figcaption", { key: 'c6462ae033852ff7fa09d752e4fc8860608448c6' }, h("q2-legend", { key: 'd8f1ceb9b46392264b306d316d1fb6066b2f5b4d', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }
@@ -838,6 +857,7 @@ export class Q2ChartDonut {
     static get states() {
         return {
             "hoveredId": {},
+            "keyboardAnnouncement": {},
             "legendData": {}
         };
     }

package/dist/collection/components/q2-chart-donut/test/q2-chart-donut-test.vr.js

@@ -46,6 +46,14 @@ const setChartData = async (page, data) => {
     await page.locator('q2-chart-donut').evaluate((el, payload) => {
         el.data = payload;
     }, data);
+    // Icon sprites load independently of chart rendering and component hydration.
+    const chart = page.locator('q2-chart-donut');
+    const summaryIcon = await chart.getAttribute('summary-icon');
+    if (summaryIcon) {
+        const icon = chart.locator('q2-icon').first();
+        await expect(icon.locator('svg use')).toHaveAttribute('href', /#.+/);
+        await expect(icon.locator('svg g symbol')).toHaveCount(1);
+    }
     // echarts marks the canvas with aria-hidden="true" once the 'finished' event has fired.
     // Waiting on that attribute keeps the snapshot from racing the canvas paint.
     await page.locator('q2-chart-donut').evaluate(async (el) => {
@@ -131,6 +139,23 @@ const legendClickCase = (variant, theme) => {
     });
 };
 test.describe('q2-chart-donut — variants × themes', () => {
+    for (const theme of THEMES) {
+        test(`q2-chart-donut--keyboard--focus — ${theme}`, async ({ page }) => {
+            await setupPage(page, '<q2-chart-donut style="width: 400px" chart-name="Spending"></q2-chart-donut>', {
+                theme,
+                setupLoc: true,
+            });
+            await setChartData(page, SHORT_DATA);
+            await expect(page.locator('q2-chart-donut .chart-container')).toHaveAttribute('tabindex', '0');
+            await expect(page.locator('q2-chart-donut .chart-container')).toHaveAttribute('role', 'application');
+            await page.keyboard.press('Tab');
+            await page.keyboard.press('End');
+            await page.keyboard.press('Home');
+            await expect(page.locator('q2-chart-donut .chart-container')).toBeFocused();
+            await expect(page.locator('q2-chart-donut [role="status"]')).toContainText(SHORT_DATA[0].name);
+            await expect(page).toHaveScreenshot(`q2-chart-donut--keyboard--focus--${theme}.png`);
+        });
+    }
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
             restingCase(variant, theme);

package/dist/collection/components/q2-checkbox/q2-checkbox.css

@@ -405,7 +405,7 @@ label {
   transition: fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease));
 }
 :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon {
-  stroke: var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))));
+  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))));
 }
 :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect {
   fill: var(--comp-checkbox-checked-fill-color);
@@ -421,7 +421,7 @@ label {
   fill: var(--tct-checkbox-error-checked-outer-fill-color);
 }
 :host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon {
-  stroke: var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))));
+  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))));
 }
 :host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect {
   fill: var(--comp-checkbox-checked-fill-color);

package/dist/collection/components/q2-checkbox/q2-checkbox.js

@@ -180,7 +180,7 @@ export class Q2Checkbox {
             containerClasses.push('has-multiline-label');
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '0dff5141bf9fd0eb9b9d92f55c80b046a8224bad', class: containerClasses.join(' ') }, h("input", { key: 'ac0565c29bcb4b2e29403215ceb5fc0221578209', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '56684f4fb63b0f6d136e69420f2e632a807ab03a', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), h("div", { key: '4f40ff7c46337d002e3097e849e8a6d163271787', class: textLabelClasses.join(' '), ref: el => (this.labelTextElement = el) }, h("label", { key: '3d9803210e8462137d28205891762da8a9fa19cd', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, h("div", { key: 'de644e9efa49bfb2c84400d4f748678f1724786d', class: "label-content" }, loc(this.label), h("slot", { key: 'f537a700ad48155f2896ae1880fcfdc4f1e60226', onSlotchange: this.queueLabelLayoutUpdate }), h("slot", { key: '184d686720af904c8f5cda2d4508cd07add7b1bf', name: "label", onSlotchange: this.queueLabelLayoutUpdate })))), this._tooltip && (h("span", { key: '05a8eacb9150b56ce30183561c72b0c607c60c8c', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (h("div", { key: '7b06216cede51eb0bc13932ed17e3237854c1316', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description), h("slot", { key: '723ac0aa53756d0bd9f06e7bb2a1231056cdca50', name: "description" })))));
+        return (h("div", { key: '95ac828b1e5991bd66dfd7e83dcdc75bc152e18f', class: containerClasses.join(' ') }, h("input", { key: '36f4d3c2aa33464cfb62e66a8e3fa75933d65344', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: 'b64445b937b72c81c2266dd9512ac810e780ee54', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), h("div", { key: 'ff43e0c59e23b9cd0c61339e275c45ed5ae082aa', class: textLabelClasses.join(' '), ref: el => (this.labelTextElement = el) }, h("label", { key: '808c972d8808da7a4e7f907176466a72edcd2c48', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, h("div", { key: 'fe386612e683c6e7be2db8a3404f34b6f53391b6', class: "label-content" }, loc(this.label), h("slot", { key: '38b16db321f096aa05e8062a7a02e01d3e3feb3e', onSlotchange: this.queueLabelLayoutUpdate }), h("slot", { key: '327afa820650c9d769a6566c7bc7d79b607492c0', name: "label", onSlotchange: this.queueLabelLayoutUpdate })))), this._tooltip && (h("span", { key: 'ab9ac6546e1e0e7021115c67056155bd00387aac', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (h("div", { key: 'acef71e4ff4d85e16f80bce4ff8b68e52a252fd2', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description), h("slot", { key: '11e62328019bc7f3fe8be7ec74300e727c2dc98e', name: "description" })))));
     }
     static get is() { return "q2-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -397,9 +397,9 @@ export class Q2Checkbox {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the field's `<label>` element from view."
+                    "text": "Hides the field's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -437,6 +437,9 @@ export class Q2Checkbox {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.css

@@ -102,6 +102,7 @@ button {
  * @prop --tct-checkbox-group-label-font-size?: (<length-percentage>) Controls the optional font size of the checkbox-group label.
  * @prop --tct-checkbox-group-label-font-weight: (<number>) Controls the font weight of the checkbox-group label.
  * @prop --tct-checkbox-group-label-letter-spacing?: (<length>) Controls the optional letter spacing of the checkbox-group label.
+ * @prop --tct-checkbox-group-label-line-height?: (<length-percentage>) Controls the optional line height of the checkbox-group label.
  * @prop --tct-checkbox-group-label-text-transform?: (<custom-ident>) Controls the optional text transform of the checkbox-group label.
  * @prop --tct-checkbox-group-label-optional-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
  * @prop --tct-checkbox-group-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
@@ -131,6 +132,7 @@ fieldset {
   font-weight: var(--tct-checkbox-group-label-font-weight, 600);
   text-transform: var(--tct-checkbox-group-label-text-transform, none);
   letter-spacing: var(--tct-checkbox-group-label-letter-spacing, inherit);
+  line-height: var(--tct-checkbox-group-label-line-height, inherit);
 }
 .label-row q2-icon {
   grid-area: icon;

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js

@@ -120,7 +120,7 @@ export class Q2CheckboxGroup {
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: '4e9159cc489b8c2ed9adf3c8263355994364780e' }, showLabelRow && (h("div", { key: '85c21ddc03d2abaf4e78b1922dcf3705ec673fc9', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '071eb3359b048a5e7f89f7c525362e065707a8fe', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '76a591fb52671d43351322faa488608128320183', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '0bcc9a5419df7ab0bf2abfc6189983e6cf5bd779', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'c6a5f3ec8289091b6d113a36d2fed9b83a5c7088', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: 'ed664b9829dbea3e8e6fe3809dd2528a2a37b011' }, showLabelRow && (h("div", { key: '101b950b7aacfbc6dab450ad2c13a7a86af40936', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '70330c12aefedf7f7b7f7cbe4e0a745cca667181', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '31eb9fac43cbf80696276c7d96945a3f267610d3', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '200264b3fb882445dc5610155e28b137e2334ad2', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'ef85eb7ca6ef53496a5fc7d0198f03d3a8fb129e', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     static get is() { return "q2-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -187,9 +187,9 @@ export class Q2CheckboxGroup {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
-                    "text": "Hide's the group's `<label>` element from view."
+                    "text": "Hides the group's `<label>` element from view."
                 },
                 "getter": false,
                 "setter": false,
@@ -208,6 +208,9 @@ export class Q2CheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

package/dist/collection/components/q2-context/q2-context.css

@@ -1,4 +1,5 @@
 /**
+ * @prop --tct-context-close-icon-size: (<length>) Controls the size of the close icon in the affordance slot.
  * @prop --tct-context-background: (<color>) Controls the background color of the context container.
  * @prop --tct-context-color: (<color>) Controls the text color propagated to context items.
  * @prop --tct-context-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the context container.
@@ -71,6 +72,10 @@
   --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);
 }
 
+::slotted(q2-btn[data-context-close-affordance]) {
+  --tct-icon-size: var(--tct-context-close-icon-size, var(--const-px-18, 18px));
+}
+
 ::slotted(q2-link) {
   --tct-link-border-radius: var(--app-border-radius-1, 4px);
   --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);