@progress/kendo-themes-html 14.7.1-dev.2 → 14.7.1-dev.4

package/dist/meta/window.json

@@ -0,0 +1,87 @@
+{
+  "component": "window",
+  "name": "Window",
+  "components": [
+    {
+      "name": "Window",
+      "isPrimary": true,
+      "rootClass": "k-window",
+      "options": [],
+      "states": [],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"dialog\"",
+          "description": "Announces the dialog role of the component."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-labelledby",
+          "description": "Associate the title of the dialog."
+        }
+      ],
+      "keyboard": [
+        {
+          "trigger": "Alt/Opt(Mac) + ArrowDown",
+          "behavior": "Minimizes or restores the state, if the focused element is the window"
+        },
+        {
+          "trigger": "Alt/Opt(Mac) + ArrowUp",
+          "behavior": "Maximizes or restores the state, if the focused element is the window"
+        },
+        {
+          "trigger": "Arrow Keys",
+          "behavior": "Move the window to the respective direction (UP"
+        },
+        {
+          "trigger": "Control/Cmd(Mac) + ArrowUp",
+          "behavior": "Decreases the height of the window triggering the resizing capabilities. Applicable only when the component is resizable."
+        },
+        {
+          "trigger": "Control/Cmd(Mac) + ArrowDown",
+          "behavior": "Increases the height of the window triggering the resizing capabilities. Applicable only when the component is resizable."
+        },
+        {
+          "trigger": "Control/Cmd(Mac) + ArrowLeft",
+          "behavior": "Decreases the width of the window triggering the resizing capabilities. Applicable only when the component is resizable."
+        },
+        {
+          "trigger": "Control/Cmd(Mac) + ArrowRight",
+          "behavior": "Increases the width of the window triggering the resizing capabilities. Applicable only when the component is resizable."
+        },
+        {
+          "trigger": "Escape",
+          "behavior": "Closes the window. When the window is modal, the focus should be returned to the element that triggered the open."
+        }
+      ],
+      "ux": [
+        {
+          "trigger": "Draggable",
+          "behavior": "The window is repositioned by dragging its title bar."
+        },
+        {
+          "trigger": "Resizable",
+          "behavior": "The window is resized by dragging its edges or corners."
+        },
+        {
+          "trigger": "Minimize / Maximize",
+          "behavior": "The window can be collapsed to only the title bar or expanded to fill the viewport."
+        },
+        {
+          "trigger": "Close",
+          "behavior": "The × button removes the window from the DOM."
+        },
+        {
+          "trigger": "Stacking",
+          "behavior": "Multiple open windows maintain correct z-index layering."
+        }
+      ]
+    }
+  ],
+  "resources": [
+    {
+      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/",
+      "text": "ARIA practices Modal Dialog Example"
+    }
+  ]
+}

package/dist/meta/wizard.json

@@ -0,0 +1,88 @@
+{
+  "component": "wizard",
+  "name": "Wizard",
+  "components": [
+    {
+      "name": "Wizard",
+      "isPrimary": true,
+      "rootClass": "k-wizard",
+      "options": [],
+      "states": [
+        "disabled"
+      ],
+      "aria": [],
+      "keyboard": [
+        {
+          "trigger": "ArrowLeft or ArrowUp",
+          "behavior": "Selects previous tab."
+        },
+        {
+          "trigger": "ArrowRight or ArrowDown",
+          "behavior": "Selects next tab."
+        },
+        {
+          "trigger": "Home",
+          "behavior": "Selects first tab."
+        },
+        {
+          "trigger": "End",
+          "behavior": "Selects last tab."
+        },
+        {
+          "trigger": "Tab",
+          "behavior": "Focuses next element in the page Tab sequence. That could be the currently visible `tabpanel`, an element on it, or an element outside the Wizard."
+        },
+        {
+          "trigger": "Shift + Tab",
+          "behavior": "Focuses previous element in the page Tab sequence."
+        }
+      ],
+      "ux": [
+        {
+          "trigger": "Multi-step",
+          "behavior": "Guides the user through a complex task split into discrete steps."
+        },
+        {
+          "trigger": "Progress indicator",
+          "behavior": "A stepper at the top shows completed, current, and upcoming steps."
+        },
+        {
+          "trigger": "Navigation buttons",
+          "behavior": "Back and Next buttons move between steps."
+        },
+        {
+          "trigger": "Per-step validation",
+          "behavior": "Each step can validate its inputs before the Next button is enabled."
+        },
+        {
+          "trigger": "Step click",
+          "behavior": "Previously completed steps can be revisited by clicking the step indicator."
+        }
+      ]
+    },
+    {
+      "name": "WizardStep",
+      "isPrimary": false,
+      "rootClass": "k-wizard-step",
+      "options": [],
+      "states": [
+        "focus"
+      ],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "aria-label",
+          "description": "for the tabpanel, e.g. \"Step 2 of 3\""
+        }
+      ],
+      "keyboard": [],
+      "ux": []
+    }
+  ],
+  "resources": [
+    {
+      "url": "https://www.w3.org/TR/wai-aria-1.2/#tablist",
+      "text": "WAI-ARIA specification for tablist"
+    }
+  ]
+}

package/dist/types/chip/chip-list.spec.d.ts

@@ -19,7 +19,6 @@ export type KendoChipListProps = KendoChipListOptions & {
  * @aria {aria-keyshortcuts="Enter Delete"} Announces the Delete action along with the default Enter key.
  * @aria {aria-multiselectable="true"} Indicates multiple selections are allowed.
  * @aria {aria-label} Accessible name for the chip list; required when role="listbox".
- * @aria {role="group"} Groups chips that each act as independent controls (e.g. popup triggers) rather than selectable options; `aria-orientation` is omitted since it is not supported on this role.
  * @ux {Chip group} Renders a horizontal or wrapping collection of chip elements.
  * @ux {Selection} Supports single or multi-selection across the chips in the list.
  * @ux {Add chip} Can include an add-chip control to allow the user to create new chips.

package/dist/types/chip/chip.spec.d.ts

@@ -28,16 +28,11 @@ export type KendoChipState = {
  * @ux {Removable} An optional remove icon allows the chip to be dismissed.
  * @ux {Icon or avatar} Can display an icon or avatar image alongside the label.
  * @ux {Disabled state} When disabled, the chip is non-interactive.
- * @aria {role="presentation" or "listitem"} Used for read-only, informational chips that must still be announced; `aria-pressed` is omitted for these.
- * @aria {aria-haspopup} Indicates the Chip opens a popup on activation instead of toggling a pressed state; `aria-pressed` is omitted when present.
- * @aria {tabindex="-1"} When used as a static label inside another focusable or roving-tabindex container (e.g. a TreeView row), the Chip must not be independently focusable; pairing it with `pointer-events: none` also lets clicks and hover pass through to that container.
  */
 export declare const Chip: KendoComponent<KendoChipProps & KendoChipState & React.HTMLAttributes<HTMLDivElement>>;
 /**
  * @keyboard {ArrowRight} Focuses the next chip in a horizontally oriented chiplist.
  * @keyboard {ArrowLeft} Focuses the previous chip in a horizontally oriented group.
- * @keyboard {ArrowDown} Focuses the next chip in a vertically stacked group (e.g. a field list).
- * @keyboard {ArrowUp} Focuses the previous chip in a vertically stacked group.
  * @keyboard {Enter or Space} Triggers a click action on the Chip.
  * @keyboard {Delete or Backspace} Removes the Chip when a delete action is configured.
  *

package/dist/types/datainsights-composer/datainsights-composer-fields.spec.d.ts

@@ -2,7 +2,12 @@ import type { KendoComponent } from '../_types/component';
 export declare const DATA_INSIGHTS_COMPOSER_FIELDS_CLASSNAME = "k-datainsights-composer-fields";
 /**
  * Wraps the row of field chips shown in the empty/prompt state.
- * @keyboard {Tab or Shift+Tab} Moves focus into or out of the chip group as a single stop (lands on the roving tab stop chip).
+ * @aria {role="group"} Groups data-source chips that act as popup triggers.
+ * @aria {aria-label} Names the data-source chip group.
+ * @aria {aria-haspopup="true"} Indicates that each data-source chip opens a popup.
+ * @aria {tabindex="0" or "-1"} Maintains one data-source chip in the tab order using roving tabindex.
+ * @keyboard {Tab} Moves focus into the group through its active roving-tabindex chip, or from that chip to the next focusable element.
+ * @keyboard {Shift+Tab} Moves focus from the active chip to the previous focusable element.
  * @keyboard {ArrowRight or ArrowLeft} Moves the roving tab stop between the data source chips, same as the standalone ChipList.
  * @keyboard {Enter or Space} Opens the Data Source popup for the focused chip.
  */

package/dist/types/datainsights-composer/datainsights-composer-history-checkpoint.spec.d.ts

@@ -16,8 +16,8 @@ export interface DataInsightsComposerHistoryCheckpointProps extends React.HTMLAt
  * @aria {role="option"} Each checkpoint is an option in the history listbox.
  * @aria {tabindex="-1"} Non-active checkpoints stay out of the tab order.
  * @keyboard {ArrowUp or ArrowDown} Moves the roving tab stop between checkpoints, same as a standard list.
- * @keyboard {Tab} From the active (focused) checkpoint, moves focus to its own restore button; the restore buttons of all other checkpoints have `tabindex="-1"` so Tab does not walk through them one by one.
- * @keyboard {Shift+Tab} From a restore button, returns focus to its own checkpoint.
+ * @keyboard {Tab} From the active checkpoint, moves focus to its restore button. From that button, or from the current checkpoint which has no restore action, moves focus outside the popup.
+ * @keyboard {Shift+Tab} From a restore button, returns focus to its own checkpoint. From the active checkpoint, moves focus to the previous focusable element outside the popup.
  * A history item with a timestamp and an optional restore action.
  */
 export declare const DataInsightsComposerHistoryCheckpoint: KendoComponent<DataInsightsComposerHistoryCheckpointProps>;

package/dist/types/datainsights-composer/datainsights-composer-popup.spec.d.ts

@@ -1,5 +1,16 @@
 import type { KendoComponent } from '../_types/component';
 export declare const DATA_INSIGHTS_COMPOSER_POPUP_CLASSNAME = "k-datainsights-composer-popup";
-/** Popup shell used by the Composer data-source and history views. */
+/**
+ * Popup shell used by the Composer data-source and history views.
+ * @aria {role="presentation"} Removes button semantics from field-label chips in data-source popups.
+ * @aria {tabindex="0" or "-1"} Uses roving tabindex for a standalone field list; chips embedded in TreeView items stay out of the tab order.
+ */
 export declare const DataInsightsComposerPopup: KendoComponent<React.HTMLAttributes<HTMLDivElement>>;
+/**
+ * @keyboard {ArrowDown} Moves to the next chip in a data-source field list, or from the browser search box to the first TreeView item.
+ * @keyboard {ArrowUp} Moves to the previous chip in a data-source field list, or from the first browser TreeView item to the search box.
+ * @keyboard {Tab} In a data-source field-list popup, moves focus into the list through its active roving-tabindex chip; pressing Tab again moves focus outside the popup.
+ * @keyboard {Shift+Tab} From the active chip in a data-source field-list popup, moves focus to the previous focusable element outside the popup.
+ * @keyboard {Escape} Closes the popup and returns focus to the element that opened it.
+ */
 export default DataInsightsComposerPopup;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.7.1-dev.2",
+  "version": "14.7.1-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,15 +12,19 @@
   ],
   "types": "./dist/types/index.d.ts",
   "exports": {
-    "types": "./dist/types/index.d.ts",
-    "import": "./dist/esm/index.mjs",
-    "require": "./dist/cjs/index.js"
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js"
+    },
+    "./meta/*.json": "./dist/meta/*.json"
   },
   "files": [
     "dist/**/*.js",
     "dist/**/*.mjs",
     "dist/**/*.d.ts",
     "dist/**/*.js.map",
+    "dist/meta/*.json",
     "src/**/**.ts",
     "src/**/**.tsx"
   ],
@@ -43,12 +47,13 @@
     "typegen": "npx tsc --emitDeclarationOnly --declaration --declarationDir dist/types/",
     "typecheck": "npx tsc --noEmit --emitDeclarationOnly false --project tsconfig.json ",
     "build:tests": "node ./scripts/build-tests.js",
-    "docs": "npm run build && node ./scripts/render-a11y-docs.mjs",
+    "build:meta": "node ./scripts/render-a11y-docs.mjs",
+    "docs": "npm run build && npm run build:meta",
     "docs:check": "npm run docs && git diff --name-only --exit-code -- docs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "prepublishOnly": "npm run build && npm run typegen"
+    "prepublishOnly": "npm run build && npm run typegen && npm run build:meta"
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^5.5.0"

package/src/chip/chip-list.spec.tsx

@@ -31,7 +31,6 @@ const defaultOptions = {
  * @aria {aria-keyshortcuts="Enter Delete"} Announces the Delete action along with the default Enter key.
  * @aria {aria-multiselectable="true"} Indicates multiple selections are allowed.
  * @aria {aria-label} Accessible name for the chip list; required when role="listbox".
- * @aria {role="group"} Groups chips that each act as independent controls (e.g. popup triggers) rather than selectable options; `aria-orientation` is omitted since it is not supported on this role.
  * @ux {Chip group} Renders a horizontal or wrapping collection of chip elements.
  * @ux {Selection} Supports single or multi-selection across the chips in the list.
  * @ux {Add chip} Can include an add-chip control to allow the user to create new chips.

package/src/chip/chip.spec.tsx

@@ -54,9 +54,6 @@ const defaultOptions = {
  * @ux {Removable} An optional remove icon allows the chip to be dismissed.
  * @ux {Icon or avatar} Can display an icon or avatar image alongside the label.
  * @ux {Disabled state} When disabled, the chip is non-interactive.
- * @aria {role="presentation" or "listitem"} Used for read-only, informational chips that must still be announced; `aria-pressed` is omitted for these.
- * @aria {aria-haspopup} Indicates the Chip opens a popup on activation instead of toggling a pressed state; `aria-pressed` is omitted when present.
- * @aria {tabindex="-1"} When used as a static label inside another focusable or roving-tabindex container (e.g. a TreeView row), the Chip must not be independently focusable; pairing it with `pointer-events: none` also lets clicks and hover pass through to that container.
  */
 export const Chip: KendoComponent<KendoChipProps & KendoChipState & React.HTMLAttributes<HTMLDivElement>> = (
     props: KendoChipProps &
@@ -141,8 +138,6 @@ Chip.folderName = CHIP_FOLDER_NAME;
 /**
  * @keyboard {ArrowRight} Focuses the next chip in a horizontally oriented chiplist.
  * @keyboard {ArrowLeft} Focuses the previous chip in a horizontally oriented group.
- * @keyboard {ArrowDown} Focuses the next chip in a vertically stacked group (e.g. a field list).
- * @keyboard {ArrowUp} Focuses the previous chip in a vertically stacked group.
  * @keyboard {Enter or Space} Triggers a click action on the Chip.
  * @keyboard {Delete or Backspace} Removes the Chip when a delete action is configured.
  *

package/src/datainsights-composer/datainsights-composer-fields.spec.tsx

@@ -6,7 +6,12 @@ export const DATA_INSIGHTS_COMPOSER_FIELDS_CLASSNAME = 'k-datainsights-composer-
 
 /**
  * Wraps the row of field chips shown in the empty/prompt state.
- * @keyboard {Tab or Shift+Tab} Moves focus into or out of the chip group as a single stop (lands on the roving tab stop chip).
+ * @aria {role="group"} Groups data-source chips that act as popup triggers.
+ * @aria {aria-label} Names the data-source chip group.
+ * @aria {aria-haspopup="true"} Indicates that each data-source chip opens a popup.
+ * @aria {tabindex="0" or "-1"} Maintains one data-source chip in the tab order using roving tabindex.
+ * @keyboard {Tab} Moves focus into the group through its active roving-tabindex chip, or from that chip to the next focusable element.
+ * @keyboard {Shift+Tab} Moves focus from the active chip to the previous focusable element.
  * @keyboard {ArrowRight or ArrowLeft} Moves the roving tab stop between the data source chips, same as the standalone ChipList.
  * @keyboard {Enter or Space} Opens the Data Source popup for the focused chip.
  */

package/src/datainsights-composer/datainsights-composer-history-checkpoint.spec.tsx

@@ -23,8 +23,8 @@ export interface DataInsightsComposerHistoryCheckpointProps extends React.HTMLAt
  * @aria {role="option"} Each checkpoint is an option in the history listbox.
  * @aria {tabindex="-1"} Non-active checkpoints stay out of the tab order.
  * @keyboard {ArrowUp or ArrowDown} Moves the roving tab stop between checkpoints, same as a standard list.
- * @keyboard {Tab} From the active (focused) checkpoint, moves focus to its own restore button; the restore buttons of all other checkpoints have `tabindex="-1"` so Tab does not walk through them one by one.
- * @keyboard {Shift+Tab} From a restore button, returns focus to its own checkpoint.
+ * @keyboard {Tab} From the active checkpoint, moves focus to its restore button. From that button, or from the current checkpoint which has no restore action, moves focus outside the popup.
+ * @keyboard {Shift+Tab} From a restore button, returns focus to its own checkpoint. From the active checkpoint, moves focus to the previous focusable element outside the popup.
  * A history item with a timestamp and an optional restore action.
  */
 export const DataInsightsComposerHistoryCheckpoint: KendoComponent<DataInsightsComposerHistoryCheckpointProps> = (props) => {

package/src/datainsights-composer/datainsights-composer-popup.spec.tsx

@@ -5,7 +5,11 @@ import { DATA_INSIGHTS_COMPOSER_FOLDER_NAME, DATA_INSIGHTS_COMPOSER_MODULE_NAME
 
 export const DATA_INSIGHTS_COMPOSER_POPUP_CLASSNAME = 'k-datainsights-composer-popup';
 
-/** Popup shell used by the Composer data-source and history views. */
+/**
+ * Popup shell used by the Composer data-source and history views.
+ * @aria {role="presentation"} Removes button semantics from field-label chips in data-source popups.
+ * @aria {tabindex="0" or "-1"} Uses roving tabindex for a standalone field list; chips embedded in TreeView items stay out of the tab order.
+ */
 export const DataInsightsComposerPopup: KendoComponent<React.HTMLAttributes<HTMLDivElement>> = (props) => {
     const { className, children, ...other } = props;
     return (
@@ -27,4 +31,12 @@ DataInsightsComposerPopup.defaultOptions = {};
 DataInsightsComposerPopup.moduleName = DATA_INSIGHTS_COMPOSER_MODULE_NAME;
 DataInsightsComposerPopup.folderName = DATA_INSIGHTS_COMPOSER_FOLDER_NAME;
 
+/**
+ * @keyboard {ArrowDown} Moves to the next chip in a data-source field list, or from the browser search box to the first TreeView item.
+ * @keyboard {ArrowUp} Moves to the previous chip in a data-source field list, or from the first browser TreeView item to the search box.
+ * @keyboard {Tab} In a data-source field-list popup, moves focus into the list through its active roving-tabindex chip; pressing Tab again moves focus outside the popup.
+ * @keyboard {Shift+Tab} From the active chip in a data-source field-list popup, moves focus to the previous focusable element outside the popup.
+ * @keyboard {Escape} Closes the popup and returns focus to the element that opened it.
+ */
+
 export default DataInsightsComposerPopup;

package/src/datainsights-composer/templates/datainsights-composer-data-source-browser-popup.tsx

@@ -6,7 +6,7 @@ import { DataInsightsComposerPopup } from '..';
 const TreeviewChipItem = ({ text }: { text: string }) => (
     <TreeviewItem
         content={
-            <Chip role="presentation" tabIndex={-1} text={text} rounded="full" fillMode="outline" themeColor="base" />
+            <Chip role="presentation" tabIndex={-1} text={text} rounded="full" fillMode="outline" />
         }
     />
 );

package/src/datainsights-composer/templates/datainsights-composer-data-source-fields-popup.tsx

@@ -10,11 +10,11 @@ export const DataInsightsComposerDataSourceFieldsPopup = (props: any) => (
             sales_order
         </DataInsightsComposerPopupListGroupHeader>
         <ChipList className="k-datainsights-composer-popup-field-list" role="none">
-            <Chip role="presentation" tabIndex={0} rounded="full" fillMode="outline" themeColor="base" text="SalesOrderID" />
-            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" themeColor="base" text="OrderDate" />
-            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" themeColor="base" text="ShipDate" />
-            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" themeColor="base" text="SubTotal" />
-            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" themeColor="base" text="TaxAmt" />
+            <Chip role="presentation" tabIndex={0} rounded="full" fillMode="outline" text="SalesOrderID" />
+            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" text="OrderDate" />
+            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" text="ShipDate" />
+            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" text="SubTotal" />
+            <Chip role="presentation" tabIndex={-1} rounded="full" fillMode="outline" text="TaxAmt" />
         </ChipList>
     </DataInsightsComposerPopup>
 );

package/src/datainsights-composer/tests/datainsights-composer-history.tsx

@@ -1,4 +1,3 @@
-import { DataInsightsComposerHistoryPopup } from '../templates/datainsights-composer-history-popup';
 import { DataInsightsComposerHistoryCheckpoint, DataInsightsComposerPopupListGroupHeader } from '..';
 import { List, ListContent } from '../../list';
 import { Popup } from '../../popup';
@@ -13,10 +12,6 @@ const styles = `
 export default () => (
     <>
         <style>{styles}</style>
-        <div id="test-area">
-            <h3>History popup</h3>
-            <DataInsightsComposerHistoryPopup />
-        </div>
         <div id="test-area">
             <h3>History popup states</h3>
             <Popup className={classNames('k-list-container', 'k-datainsights-composer-popup')} containerRole="region" containerAriaLabel="History">