@vonage/vivid 4.30.1 → 5.0.0

package/shared/definition17.cjs

@@ -5,6 +5,7 @@ const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition66.cjs');
 const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const children = require('./children.cjs');
 const slotted = require('./slotted.cjs');
 const localized = require('./localized.cjs');
@@ -72,7 +73,7 @@ const defaultHeaderCellContentsTemplate = vividElement.html`
 		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
 	</template>
 `;
-class DataGridCell extends localized.Localized(vividElement.VividElement) {
+class DataGridCell extends localized.Localized(hostSemantics.HostSemantics(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -90,7 +91,21 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
     };
     this._selectable = false;
     this.selected = false;
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated For setting selected state, please use `selected` property instead.
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
+    /**
+     * Indicates the sort status.
+     *
+     * @deprecated To set the sorting visual style please use `sortDirection` property.
+     * @public
+     * HTML Attribute: aria-sort
+     */
     this.ariaSort = null;
   }
   /**
@@ -280,54 +295,25 @@ class DataGridCell extends localized.Localized(vividElement.VividElement) {
       this.customCellView = null;
     }
   }
-  /**
-   *
-   * @private
-   */
-  calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
   /**
    * @internal
    */
-  ariaSelectedChanged(_, newValue) {
+  ariaSelectedChanged(prevValue, newValue) {
+    super.ariaSelectedChanged(prevValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
   /**
    * @internal
    */
-  ariaSortChanged(_oldValue, newValue) {
+  ariaSortChanged(oldValue, newValue) {
+    super.ariaSortChanged(oldValue, newValue);
     if (newValue === null) {
       this.sortDirection = void 0;
       return;
     }
     this.sortDirection = newValue;
   }
-  /**
-   * @internal
-   */
-  sortDirectionChanged(_oldValue, newValue) {
-    if (newValue === void 0) {
-      this.ariaSort = null;
-      return;
-    }
-    this.ariaSort = newValue;
-  }
   #getColumnDataKey() {
     return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
   }
@@ -373,12 +359,6 @@ __decorateClass$2([
 __decorateClass$2([
   vividElement.attr({ mode: "boolean" })
 ], DataGridCell.prototype, "selected");
-__decorateClass$2([
-  vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected");
-__decorateClass$2([
-  vividElement.attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort");
 __decorateClass$2([
   vividElement.attr({ attribute: "sort-direction" })
 ], DataGridCell.prototype, "sortDirection");
@@ -392,7 +372,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class DataGridRow extends vividElement.VividElement {
+class DataGridRow extends hostSemantics.HostSemantics(vividElement.VividElement) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -408,6 +388,13 @@ class DataGridRow extends vividElement.VividElement {
     this.updateRowStyle = () => {
       this.style.gridTemplateColumns = this.gridTemplateColumns;
     };
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
     this._selectable = false;
     this.selected = false;
@@ -521,30 +508,11 @@ class DataGridRow extends vividElement.VividElement {
   /**
    * @internal
    */
-  ariaSelectedChanged(_oldValue, newValue) {
+  ariaSelectedChanged(oldValue, newValue) {
+    super.ariaSelectedChanged(oldValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
-  /**
-   * @internal
-   */
-  _calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass$1([
@@ -580,9 +548,6 @@ __decorateClass$1([
 __decorateClass$1([
   vividElement.observable
 ], DataGridRow.prototype, "cellElements");
-__decorateClass$1([
-  vividElement.attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected");
 __decorateClass$1([
   vividElement.observable
 ], DataGridRow.prototype, "_selectable");
@@ -640,7 +605,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       );
       const focusRow = this.rowElements[focusRowIndex];
       const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [cell-type]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
       );
       const focusColumnIndex = Math.max(
         0,
@@ -656,7 +621,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
-            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
+            if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) {
               newNode.columnDefinitions = this.columnDefinitions;
             }
           });
@@ -698,7 +663,8 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       }
     };
     this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell") return;
+      if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default")
+        return;
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
         return;
@@ -751,10 +717,10 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
      */
     this._resetSelection = (clear = false) => {
       const cells = Array.from(
-        this.querySelectorAll('[role="gridcell"], [cell-type]')
+        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
       );
       const rows = Array.from(
-        this.querySelectorAll('[role="row"], [row-type]')
+        this.querySelectorAll('[role="row"], [row-type="default"]')
       );
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         for (const cell of cells) {
@@ -1158,7 +1124,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   applyFixedColumnStyling() {
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
         if (index < cells.length) {
@@ -1178,7 +1144,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.fixedColumnsPositions = [];
     if (this.rowElements.length === 0) return;
     const cells = this.rowElements[0].querySelectorAll(
-      '[role="cell"], [role="gridcell"], [role="columnheader"]'
+      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let accumulator = 0;
     for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
@@ -1197,7 +1163,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     }
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
         if (index < cells.length) {
@@ -1305,7 +1271,7 @@ const DataGridTemplate = (context) => {
 			:defaultRowItemTemplate="${rowItemTemplate}"
 			${children.children({
     property: "rowElements",
-    filter: slotted.elements("[role=row]")
+    filter: slotted.elements("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
@@ -1316,6 +1282,11 @@ const DataGridTemplate = (context) => {
 	`;
 };
 
+function calculateAriaSelectedValue$1(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
   return vividElement.html`
@@ -1344,14 +1315,17 @@ const DataGridRowTemplate = (context) => {
   const getBaseClasses = (x) => classNames.classNames("base", ["selected", !!x.selected]);
   return vividElement.html`
 		<template
-			role="row"
+			${hostSemantics.applyHostSemantics({
+    role: "row",
+    ariaSelected: calculateAriaSelectedValue$1
+  })}
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
 			:defaultCellItemTemplate="${cellItemTemplate}"
 			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
 			${children.children({
     property: "cellElements",
     filter: slotted.elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[cell-type]'
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
 		>
@@ -1377,6 +1351,11 @@ function getSortIcon(x) {
   }
   return "sort-solid";
 }
+function calculateAriaSelectedValue(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function renderSortIcons(c) {
   const iconTag = c.tagFor(definition$1.Icon);
   return vividElement.html`
@@ -1400,7 +1379,11 @@ const DataGridCellTemplate = (context) => {
   return vividElement.html`
 		<template
 			tabindex="-1"
-			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			${hostSemantics.applyHostSemantics({
+    role: (x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default,
+    ariaSelected: calculateAriaSelectedValue,
+    ariaSort: (x) => x.sortDirection ?? null
+  })}
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
@@ -1408,7 +1391,7 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.ariaSelected === "true" ? vividElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? vividElement.html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
 				${when.when(
     shouldShowSortIcons,

package/shared/definition17.js

@@ -3,6 +3,7 @@ import { h as html, V as VividElement, a as attr, o as observable, D as DOM, O a
 import { V as VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
 import { b as keyEscape, j as keyFunction2, k as keyEnter, d as keyEnd, g as keyHome, h as keyArrowRight, i as keyArrowLeft, l as keyPageDown, m as keyPageUp, f as keyArrowDown, e as keyArrowUp, a as keySpace } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { c as children } from './children.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { L as Localized } from './localized.js';
@@ -70,7 +71,7 @@ const defaultHeaderCellContentsTemplate = html`
 		${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
 	</template>
 `;
-class DataGridCell extends Localized(VividElement) {
+class DataGridCell extends Localized(HostSemantics(VividElement)) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -88,7 +89,21 @@ class DataGridCell extends Localized(VividElement) {
     };
     this._selectable = false;
     this.selected = false;
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated For setting selected state, please use `selected` property instead.
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
+    /**
+     * Indicates the sort status.
+     *
+     * @deprecated To set the sorting visual style please use `sortDirection` property.
+     * @public
+     * HTML Attribute: aria-sort
+     */
     this.ariaSort = null;
   }
   /**
@@ -278,54 +293,25 @@ class DataGridCell extends Localized(VividElement) {
       this.customCellView = null;
     }
   }
-  /**
-   *
-   * @private
-   */
-  calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this.calculateAriaSelectedValue();
-  }
   /**
    * @internal
    */
-  ariaSelectedChanged(_, newValue) {
+  ariaSelectedChanged(prevValue, newValue) {
+    super.ariaSelectedChanged(prevValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
   /**
    * @internal
    */
-  ariaSortChanged(_oldValue, newValue) {
+  ariaSortChanged(oldValue, newValue) {
+    super.ariaSortChanged(oldValue, newValue);
     if (newValue === null) {
       this.sortDirection = void 0;
       return;
     }
     this.sortDirection = newValue;
   }
-  /**
-   * @internal
-   */
-  sortDirectionChanged(_oldValue, newValue) {
-    if (newValue === void 0) {
-      this.ariaSort = null;
-      return;
-    }
-    this.ariaSort = newValue;
-  }
   #getColumnDataKey() {
     return this.columnDefinition && this.columnDefinition.columnDataKey ? this.columnDefinition.columnDataKey : this.textContent.trim();
   }
@@ -371,12 +357,6 @@ __decorateClass$2([
 __decorateClass$2([
   attr({ mode: "boolean" })
 ], DataGridCell.prototype, "selected");
-__decorateClass$2([
-  attr({ attribute: "aria-selected", mode: "fromView" })
-], DataGridCell.prototype, "ariaSelected");
-__decorateClass$2([
-  attr({ attribute: "aria-sort" })
-], DataGridCell.prototype, "ariaSort");
 __decorateClass$2([
   attr({ attribute: "sort-direction" })
 ], DataGridCell.prototype, "sortDirection");
@@ -390,7 +370,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   if (result) __defProp$1(target, key, result);
   return result;
 };
-class DataGridRow extends VividElement {
+class DataGridRow extends HostSemantics(VividElement) {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @repo/repo/no-attribute-default-value
@@ -406,6 +386,13 @@ class DataGridRow extends VividElement {
     this.updateRowStyle = () => {
       this.style.gridTemplateColumns = this.gridTemplateColumns;
     };
+    /**
+     * Indicates the selected status.
+     *
+     * @deprecated
+     * @public
+     * HTML Attribute: aria-selected
+     */
     this.ariaSelected = null;
     this._selectable = false;
     this.selected = false;
@@ -519,30 +506,11 @@ class DataGridRow extends VividElement {
   /**
    * @internal
    */
-  ariaSelectedChanged(_oldValue, newValue) {
+  ariaSelectedChanged(oldValue, newValue) {
+    super.ariaSelectedChanged(oldValue, newValue);
     this._selectable = newValue !== null;
     this.selected = newValue === "true";
   }
-  /**
-   * @internal
-   */
-  _calculateAriaSelectedValue() {
-    if (this._selectable && this.selected) return "true";
-    if (this._selectable && !this.selected) return "false";
-    return null;
-  }
-  /**
-   * @internal
-   */
-  _selectableChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
-  /**
-   * @internal
-   */
-  selectedChanged() {
-    this.ariaSelected = this._calculateAriaSelectedValue();
-  }
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass$1([
@@ -578,9 +546,6 @@ __decorateClass$1([
 __decorateClass$1([
   observable
 ], DataGridRow.prototype, "cellElements");
-__decorateClass$1([
-  attr({ attribute: "aria-selected" })
-], DataGridRow.prototype, "ariaSelected");
 __decorateClass$1([
   observable
 ], DataGridRow.prototype, "_selectable");
@@ -638,7 +603,7 @@ const _DataGrid = class _DataGrid extends VividElement {
       );
       const focusRow = this.rowElements[focusRowIndex];
       const cells = focusRow.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [cell-type]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'
       );
       const focusColumnIndex = Math.max(
         0,
@@ -654,7 +619,7 @@ const _DataGrid = class _DataGrid extends VividElement {
       if (mutations && mutations.length) {
         mutations.forEach((mutation) => {
           mutation.addedNodes.forEach((newNode) => {
-            if (newNode.nodeType === 1 && newNode.getAttribute("role") === "row") {
+            if (newNode.nodeType === 1 && (newNode.getAttribute("role") === "row" || newNode.getAttribute("row-type") === "default")) {
               newNode.columnDefinitions = this.columnDefinitions;
             }
           });
@@ -696,7 +661,8 @@ const _DataGrid = class _DataGrid extends VividElement {
       }
     };
     this.#handleClick = ({ target, ctrlKey, shiftKey, metaKey }) => {
-      if (target.getAttribute("role") !== "gridcell") return;
+      if (target.getAttribute("role") !== "gridcell" || target.getAttribute("cell-type") !== "default")
+        return;
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         this.#handleCellSelection({ target, ctrlKey, shiftKey, metaKey });
         return;
@@ -749,10 +715,10 @@ const _DataGrid = class _DataGrid extends VividElement {
      */
     this._resetSelection = (clear = false) => {
       const cells = Array.from(
-        this.querySelectorAll('[role="gridcell"], [cell-type]')
+        this.querySelectorAll('[role="gridcell"], [cell-type="default"]')
       );
       const rows = Array.from(
-        this.querySelectorAll('[role="row"], [row-type]')
+        this.querySelectorAll('[role="row"], [row-type="default"]')
       );
       if (this.selectionMode === DataGridSelectionMode.singleCell || this.selectionMode === DataGridSelectionMode.multiCell) {
         for (const cell of cells) {
@@ -1156,7 +1122,7 @@ const _DataGrid = class _DataGrid extends VividElement {
   applyFixedColumnStyling() {
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((position, index) => {
         if (index < cells.length) {
@@ -1176,7 +1142,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     this.fixedColumnsPositions = [];
     if (this.rowElements.length === 0) return;
     const cells = this.rowElements[0].querySelectorAll(
-      '[role="cell"], [role="gridcell"], [role="columnheader"]'
+      '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
     );
     let accumulator = 0;
     for (let i = 0; i < Math.min(this.fixedColumns, cells.length); i++) {
@@ -1195,7 +1161,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     }
     this.rowElements.forEach((row) => {
       const cells = row.querySelectorAll(
-        '[role="cell"], [role="gridcell"], [role="columnheader"]'
+        '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((_, index) => {
         if (index < cells.length) {
@@ -1303,7 +1269,7 @@ const DataGridTemplate = (context) => {
 			:defaultRowItemTemplate="${rowItemTemplate}"
 			${children({
     property: "rowElements",
-    filter: elements("[role=row]")
+    filter: elements("[role=row],[data-vvd-component=data-grid-row]")
   })}
 		>
 			<div class="base">
@@ -1314,6 +1280,11 @@ const DataGridTemplate = (context) => {
 	`;
 };
 
+function calculateAriaSelectedValue$1(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function createCellItemTemplate(context) {
   const cellTag = context.tagFor(DataGridCell);
   return html`
@@ -1342,14 +1313,17 @@ const DataGridRowTemplate = (context) => {
   const getBaseClasses = (x) => classNames("base", ["selected", !!x.selected]);
   return html`
 		<template
-			role="row"
+			${applyHostSemantics({
+    role: "row",
+    ariaSelected: calculateAriaSelectedValue$1
+  })}
 			class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
 			:defaultCellItemTemplate="${cellItemTemplate}"
 			:defaultHeaderCellItemTemplate="${headerCellItemTemplate}"
 			${children({
     property: "cellElements",
     filter: elements(
-      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[cell-type]'
+      '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]'
     )
   })}
 		>
@@ -1375,6 +1349,11 @@ function getSortIcon(x) {
   }
   return "sort-solid";
 }
+function calculateAriaSelectedValue(x) {
+  if (x._selectable && x.selected) return "true";
+  if (x._selectable && !x.selected) return "false";
+  return null;
+}
 function renderSortIcons(c) {
   const iconTag = c.tagFor(Icon);
   return html`
@@ -1398,7 +1377,11 @@ const DataGridCellTemplate = (context) => {
   return html`
 		<template
 			tabindex="-1"
-			role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
+			${applyHostSemantics({
+    role: (x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default,
+    ariaSelected: calculateAriaSelectedValue,
+    ariaSort: (x) => x.sortDirection ?? null
+  })}
 			@click="${(x) => x._handleInteraction()}"
 			@keydown="${(x, c) => handleKeyDown(x, c.event)}"
 		>
@@ -1406,7 +1389,7 @@ const DataGridCellTemplate = (context) => {
 				class="${getBaseClasses}"
 				role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
 			>
-				${(x) => x.ariaSelected === "true" ? html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
+				${(x) => x.selected ? html`<${visuallyHiddenTagName}>${(x2) => x2.locale.dataGrid.cell.selected}</${visuallyHiddenTagName}>` : null}
 				<slot></slot>
 				${when(
     shouldShowSortIcons,