@oracle/oraclejet 12.0.2 → 12.0.5

package/dist/js/libs/oj/debug/ojtable.js

@@ -437,6 +437,9 @@ var __oj_table_metadata =
         "accessibleColumnHeaderContext": {
           "type": "string"
         },
+        "accessibleContainsControls": {
+          "type": "string"
+        },
         "accessibleRowContext": {
           "type": "string"
         },
@@ -1648,6 +1651,11 @@ var __oj_table_metadata =
    */
   Table.RESIZE_OFFSET = 10;
 
+  /**
+   * @private
+   */
+  Table.SIZING_ERROR_MARGIN = 0.05;
+
   /**
    * @private
    */
@@ -3527,10 +3535,11 @@ var __oj_table_metadata =
     if (!this._resizeListener) {
       this._resizeListener = function () {
         var layoutManager = this._getLayoutManager();
-        var tableContainer = this._getTableContainer();
+        var containerStyle = window.getComputedStyle(this._getTableContainer());
         // Check if the width and height values should result in a sizing refresh
-        if (layoutManager.isSizingRefreshRequired(tableContainer.offsetWidth,
-                                                  tableContainer.offsetHeight)) {
+        if (layoutManager.isSizingRefreshRequired(
+              layoutManager.getExactOffsetWidth(containerStyle),
+              layoutManager.getExactOffsetHeight(containerStyle))) {
           layoutManager.notifyTableUpdate(Table._UPDATE._RESIZE);
           // refresh dimensions if no tasks are pending since refresh dimensions runs during final task
           if (!this._hasPendingTasks()) {
@@ -6460,13 +6469,13 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype._finalizeTableDimensions = function () {
-    var tableContainer = this._table._getTableContainer();
-
     this._restoreCachedScrollPos();
+
     // cache the final dimensions
     var sizingState = this._getSizingState();
-    sizingState.outerWidth = tableContainer.offsetWidth;
-    sizingState.outerHeight = tableContainer.offsetHeight;
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    sizingState.outerWidth = this.getExactOffsetWidth(containerStyle);
+    sizingState.outerHeight = this.getExactOffsetHeight(containerStyle);
 
     this._clearTableUpdates();
     this._enableTableVisibility();
@@ -6639,7 +6648,16 @@ var __oj_table_metadata =
    * @return {Object} An object with boxSizing, borderWidth, and paddingWidth properties
    * @private
    */
-  TableLayoutManager.prototype._getBoxStyle = function (style) {
+  TableLayoutManager.prototype._getBoxStyle = function (style, isVert) {
+    if (isVert) {
+      return {
+        boxSizing: style[Table.CSS_PROP._BOX_SIZING],
+        borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_TOP_WIDTH]) || 0) +
+          (parseFloat(style[Table.CSS_PROP._BORDER_BOTTOM_WIDTH]) || 0),
+        paddingWidth: (parseFloat(style[Table.CSS_PROP._PADDING_TOP]) || 0) +
+          (parseFloat(style[Table.CSS_PROP._PADDING_BOTTOM]) || 0)
+      };
+    }
     return {
       boxSizing: style[Table.CSS_PROP._BOX_SIZING],
       borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_RIGHT_WIDTH]) || 0) +
@@ -6892,7 +6910,9 @@ var __oj_table_metadata =
     // find Table's bottom slot height to use when determining if overflow if present
     if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
         tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
-      return tableBottomSlot.offsetHeight;
+      // offsetHeight does not include partial px values, so computed style should be used
+      var bottomSlotStyle = window.getComputedStyle(tableBottomSlot);
+      return this.getExactOffsetHeight(bottomSlotStyle);
     }
     return 0;
   };
@@ -6906,17 +6926,23 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype._getTableContainerScrollableState = function (bottomSlotHeight) {
-    var tableContainer = this._table._getTableContainer();
-    var tableElem = this._table._getTable();
+    // clientHeight and clientWidth do not include partial px values, so computed style should be used
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    var containerClientHeight = this.getExactClientHeight(containerStyle);
+    var containerClientWidth = this.getExactClientWidth(containerStyle);
+
+    // offsetHeight and offsetWidth do not include partial px values, so computed style should be used
+    var tableElemStyle = window.getComputedStyle(this._table._getTable());
+    var tableElemHeight = this.getExactOffsetHeight(tableElemStyle);
+    var tableElemWidth = this.getExactOffsetWidth(tableElemStyle);
 
     var result = [];
-    if (tableContainer.clientHeight > 0) {
-      var innerHeight = tableElem.offsetHeight + bottomSlotHeight;
-      // don't use tableContainer[0].scrollHeight as it may not be accurate
-      if (innerHeight > tableContainer.clientHeight) {
+    if (containerClientHeight > 0) {
+      var innerHeight = tableElemHeight + bottomSlotHeight;
+      if (innerHeight - containerClientHeight > Table.SIZING_ERROR_MARGIN) {
         // overflow
         result[0] = 1;
-      } else if (tableContainer.clientHeight - innerHeight > 0) {
+      } else if (containerClientHeight - innerHeight > Table.SIZING_ERROR_MARGIN) {
         // underflow
         result[0] = -1;
       } else {
@@ -6926,11 +6952,11 @@ var __oj_table_metadata =
       result[0] = 0;
     }
 
-    if (tableContainer.clientWidth > 0) {
-      if (tableElem.offsetWidth > tableContainer.clientWidth) {
+    if (containerClientWidth > 0) {
+      if (tableElemWidth - containerClientWidth > Table.SIZING_ERROR_MARGIN) {
         // overflow
         result[1] = 1;
-      } else if (tableContainer.clientWidth - tableElem.offsetWidth > 0) {
+      } else if (containerClientWidth - tableElemWidth > Table.SIZING_ERROR_MARGIN) {
         // underflow
         result[1] = -1;
       } else {
@@ -7283,7 +7309,18 @@ var __oj_table_metadata =
   /**
    * @private
    */
-  TableLayoutManager.prototype._getPageX = function (event) {
+  // eslint-disable-next-line no-unused-vars
+  TableLayoutManager.prototype.displayDragOverIndicatorColumn = function (columnIdx, isStart) { };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.removeDragOverIndicatorColumn = function () { };
+
+  /**
+   * @private
+   */
+   TableLayoutManager.prototype._getPageX = function (event) {
     if (event.pageX !== undefined) {
       // MouseEvent has pageX on event itself
       return event.pageX;
@@ -7302,13 +7339,38 @@ var __oj_table_metadata =
   /**
    * @private
    */
-  // eslint-disable-next-line no-unused-vars
-  TableLayoutManager.prototype.displayDragOverIndicatorColumn = function (columnIdx, isStart) { };
+  TableLayoutManager.prototype.getExactClientHeight = function (computedStyle) {
+    var boxStyle = this._getBoxStyle(computedStyle, true);
+    var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]) - boxStyle.borderWidth -
+      boxStyle.paddingWidth;
+    return Math.round((height + Number.EPSILON) * 1000) / 1000;
+  };
 
   /**
    * @private
    */
-  TableLayoutManager.prototype.removeDragOverIndicatorColumn = function () { };
+  TableLayoutManager.prototype.getExactClientWidth = function (computedStyle) {
+    var boxStyle = this._getBoxStyle(computedStyle);
+    var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]) - boxStyle.borderWidth -
+      boxStyle.paddingWidth;
+    return Math.round((width + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactOffsetHeight = function (computedStyle) {
+    var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]);
+    return Math.round((height + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactOffsetWidth = function (computedStyle) {
+    var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]);
+    return Math.round((width + Number.EPSILON) * 1000) / 1000;
+  };
 
   /**
    * @private
@@ -7886,12 +7948,9 @@ var __oj_table_metadata =
         this._setColumnWidths(0);
       }
       // if bottom slot present, ensure bottom slot is pinned to bottom when underflow is present
-      if (bottomSlotHeight > 0) {
-        var availableHeight = tableContainer.clientHeight - bottomSlotHeight;
-        if (availableHeight !== tableElem.offsetHeight) {
-          tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
-          tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
-        }
+      if (bottomSlotHeight > 0 && tableContainerScrollableState[0] === -1) {
+        tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
+        tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
       }
     }
     if (this._table._isStatusMessageShown()) {
@@ -8774,16 +8833,19 @@ var __oj_table_metadata =
    * @private
    */
   TableStickyLayoutManager.prototype._setupTableHeight = function (bottomSlotHeight) {
-    var tableContainer = this._table._getTableContainer();
     var tableScroller = this._table._getTableScroller();
 
     // clear any previous table scroller styling
     tableScroller.removeAttribute(Table.DOM_ATTR._STYLE);
 
     // Size the table scroller to fit in the container height
-    var containerClientHeight = tableContainer.clientHeight;
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    var containerClientHeight = this.getExactClientHeight(containerStyle);
     var tableScrollerHeight = containerClientHeight - bottomSlotHeight;
-    if (tableScroller.offsetHeight !== tableScrollerHeight) {
+
+    var scrollerStyle = window.getComputedStyle(tableScroller);
+    var scrollerOffsetHeight = this.getExactOffsetHeight(scrollerStyle);
+    if (Math.abs(scrollerOffsetHeight - tableScrollerHeight) > Table.SIZING_ERROR_MARGIN) {
       tableScroller.style[Table.CSS_PROP._HEIGHT] = tableScrollerHeight + Table.CSS_VAL._PX;
     }
 
@@ -9683,6 +9745,22 @@ var __oj_table_metadata =
     return stateInfo;
   };
 
+  /**
+   * Creates an accessibility-specific child DOM element that contains the
+   * current state information for the current row.
+   * @private
+   */
+  Table.prototype._createRowStateInfo = function () {
+    var rowStateInfo = document.createElement(Table.DOM_ELEMENT._DIV); // @HTMLUpdateOK
+    rowStateInfo.id = this.createSubId('rowState');
+    rowStateInfo.classList.add(Table.CSS_CLASSES._TABLE_ACC_ROW_STATE_INFO_CLASS);
+    rowStateInfo.classList.add(Table.CSS_CLASSES._HIDDEN_CONTENT_ACC_CLASS);
+    this._getTableContainer().appendChild(rowStateInfo);
+    this._rowStateInfo = rowStateInfo;
+
+    return rowStateInfo;
+  };
+
   /**
    * Create a div element for the accessibility notifications
    * @return {Element} div DOM element
@@ -9707,6 +9785,7 @@ var __oj_table_metadata =
    */
   Table.prototype._updateAccStatusInfo = function (columnHint) {
     var i;
+    var actionableElems;
     var label = '';
     var stateInfo = '';
     var tableHeaderColumn;
@@ -9747,7 +9826,6 @@ var __oj_table_metadata =
       if (activeIndex === -1) {
         // handle select all column header case
         tableHeaderColumn = this._getTableSelectorColumn();
-        this._stateInfo.textContent = '';
       } else {
         // handle normal column header case
         tableHeaderColumn = this._getTableHeaderColumn(activeIndex);
@@ -9769,9 +9847,12 @@ var __oj_table_metadata =
         } else if (column.sortable === Table._OPTION_ENABLED) {
           stateInfo += this.getTranslatedString('accessibleSortable', { id: '' }) + ' ';
         }
-        this._stateInfo.textContent = stateInfo;
       }
-      label += tableHeaderColumn.id + ' ' + this._stateInfo.id;
+      actionableElems = DataCollectionUtils.getActionableElementsInNode(tableHeaderColumn);
+      if (actionableElems.length > 0) {
+        stateInfo += this.getTranslatedString('accessibleContainsControls');
+      }
+      label += tableHeaderColumn.id + ' ';
     } else if (activeType === Table.ACTIVE_ELEMENT_TYPES._FOOTER) {
       this._accRowIndex = null;
       this._accColumnIndex = null;
@@ -9785,7 +9866,6 @@ var __oj_table_metadata =
       if (activeIndex === -1) {
         // handle select all column footer case
         tableFooterCell = this._getTableFooterSelectorCell();
-        this._stateInfo.textContent = '';
       } else {
         // handle normal column footer case
         tableFooterCell = this._getTableFooterCell(activeIndex);
@@ -9796,23 +9876,44 @@ var __oj_table_metadata =
             break;
           }
         }
-        this._stateInfo.textContent = stateInfo;
+      }
+      actionableElems = DataCollectionUtils.getActionableElementsInNode(tableFooterCell);
+      if (actionableElems.length > 0) {
+        stateInfo += this.getTranslatedString('accessibleContainsControls');
       }
       tableHeaderColumn = this._getTableHeaderColumn(activeIndex);
       if (tableHeaderColumn != null) {
         label += tableHeaderColumn.id + ' ';
       }
-      label += tableFooterCell.id + ' ' + this._stateInfo.id;
+      label += tableFooterCell.id + ' ';
     } else if (activeType === Table.ACTIVE_ELEMENT_TYPES._DATA_ROW) {
       var columnIndex = columnHint != null ? columnHint : this._accColumnIndex;
       if (columnIndex == null) {
         columnIndex = 0;
       }
+      var activeRowElem = this._getTableBodyRow(activeIndex);
       // update row context information if changed
       if (activeIndex !== this._accRowIndex || this._accFirstFocus !== false) {
         this._rowContextInfo.textContent =
-          this.getTranslatedString('accessibleRowContext', { index: activeIndex + 1 }) + ' ';
-        label += this._rowContextInfo.id + ' ' + this._getRowHeaderIds(activeIndex);
+          this.getTranslatedString('accessibleRowContext', { index: activeIndex + 1 });
+
+        var rowStateInfo = '';
+        // find state of the row
+        var selectedRowIdxs = this._getSelectedRowIdxs();
+        for (i = 0; i < selectedRowIdxs.length; i++) {
+          if (selectedRowIdxs[i] === activeIndex) {
+            rowStateInfo += this.getTranslatedString('accessibleStateSelected') + ' ';
+            break;
+          }
+        }
+        actionableElems = DataCollectionUtils.getActionableElementsInNode(activeRowElem);
+        if (actionableElems.length > 0) {
+          rowStateInfo += this.getTranslatedString('accessibleContainsControls') + ' ';
+        }
+        this._rowStateInfo.textContent = rowStateInfo;
+
+        label += this._rowContextInfo.id + ' ' + this._getRowHeaderIds(activeIndex) + ' ' +
+                 this._rowStateInfo.id + ' ';
       }
       // update column context information if changed
       if (columnIndex !== this._accColumnIndex || this._accFirstFocus !== false) {
@@ -9824,10 +9925,10 @@ var __oj_table_metadata =
 
       // populate cell information
       var tableBodyCellElements = this._getTableElementsByClassName(
-        this._getTableBodyRow(activeIndex), Table.CSS_CLASSES._TABLE_DATA_CELL_CLASS);
+        activeRowElem, Table.CSS_CLASSES._TABLE_DATA_CELL_CLASS);
       if (columnIndex === -1) {
         // handle row selector cell
-        var selectorCell = this._getTableBodySelectorCell(this._getTableBodyRow(activeIndex));
+        var selectorCell = this._getTableBodySelectorCell(activeRowElem);
         if (selectorCell != null) {
           label += selectorCell.id + ' ';
         }
@@ -9838,33 +9939,40 @@ var __oj_table_metadata =
         }
       }
 
-      // find state of the row
-      var selectedRowIdxs = this._getSelectedRowIdxs();
-      for (i = 0; i < selectedRowIdxs.length; i++) {
-        if (selectedRowIdxs[i] === activeIndex) {
-          stateInfo += this.getTranslatedString('accessibleStateSelected') + ' ';
-          break;
-        }
-      }
-      this._stateInfo.textContent = stateInfo;
-      label += this._stateInfo.id;
       this._accRowIndex = activeIndex;
       this._accColumnIndex = columnIndex;
     } else if (activeType === Table.ACTIVE_ELEMENT_TYPES._NO_DATA) {
       this._accRowIndex = null;
       this._accColumnIndex = null;
-      label += this._getNoDataId();
+      label += this._getNoDataId() + ' ';
+      var noDataRow = this._getActiveElement();
+      actionableElems = DataCollectionUtils.getActionableElementsInNode(noDataRow);
+      if (actionableElems.length > 0) {
+        stateInfo += this.getTranslatedString('accessibleContainsControls');
+      }
     }
+    this._stateInfo.textContent = stateInfo;
+    label += this._stateInfo.id;
     // apply new label
     this._applyAccStatusLabel(label);
   };
 
+  /**
+   * @private
+   */
+  Table.prototype._clearAccStatusInfo = function () {
+    this._accStatus.setAttribute(Table.DOM_ATTR._ARIA_LABELLEDBY, ''); // @HTMLUpdateOK
+    this._getTable().setAttribute(Table.DOM_ATTR._ARIA_LABELLEDBY, ''); // @HTMLUpdateOK
+  };
+
   /**
    * @private
    */
   Table.prototype._applyAccStatusLabel = function (label) {
     if (this._accFirstFocus !== false) {
       this._accFirstFocus = false;
+    } else if (this._accActionFocus) {
+      this._accActionFocus = false;
     } else {
       this._accStatus.setAttribute(Table.DOM_ATTR._ARIA_LABELLEDBY, label); // @HTMLUpdateOK
     }
@@ -9925,6 +10033,7 @@ var __oj_table_metadata =
    */
   Table.prototype._cleanAccStatus = function () {
     this._accFirstFocus = true;
+    this._accActionFocus = false;
     this._accStatus.removeAttribute(Table.DOM_ATTR._ARIA_LABELLEDBY);
     this._getTable().removeAttribute(Table.DOM_ATTR._ARIA_LABELLEDBY);
   };
@@ -11291,6 +11400,7 @@ var __oj_table_metadata =
     this._createTableStatusAccNotification();
     this._createContextInfo();
     this._createStateInfo();
+    this._createRowStateInfo();
     this._createTableWidthContainer();
 
     return table;
@@ -14106,6 +14216,7 @@ var __oj_table_metadata =
     _TABLE_STATUS_MESSAGE_TEXT_CLASS: 'oj-table-status-message-text',
     _TABLE_ACC_CONTEXT_INFO_CLASS: 'oj-table-acc-context-info',
     _TABLE_ACC_STATE_INFO_CLASS: 'oj-table-acc-state-info',
+    _TABLE_ACC_ROW_STATE_INFO_CLASS: 'oj-table-acc-row-state-info',
     _TABLE_WIDTH_CONTAINER_CLASS: 'oj-table-width-container',
     _TABLE_LOADING_ICON_CLASS: 'oj-table-loading-icon',
     _TABLE_BODY_MESSAGE_CLASS: 'oj-table-body-message',
@@ -14144,6 +14255,7 @@ var __oj_table_metadata =
     _LEFT: 'left',
     _RIGHT: 'right',
     _PADDING_TOP: 'padding-top',
+    _PADDING_BOTTOM: 'padding-bottom',
     _PADDING_LEFT: 'padding-left',
     _PADDING_RIGHT: 'padding-right',
     _OVERFLOW: 'overflow',
@@ -14154,6 +14266,7 @@ var __oj_table_metadata =
     _MIN_HEIGHT: 'min-height',
     _FLOAT: 'float',
     _BORDER_TOP: 'border-top',
+    _BORDER_TOP_WIDTH: 'border-top-width',
     _BORDER_BOTTOM_WIDTH: 'border-bottom-width',
     _BORDER_LEFT_WIDTH: 'border-left-width',
     _BORDER_RIGHT_WIDTH: 'border-right-width',
@@ -14367,6 +14480,7 @@ var __oj_table_metadata =
           // if table edit mode, we don't want to enter actionable mode since it doesn't exist
           // this seems like an overall issue with the design of the Table and actionable/edit mode
           if (ojkeyboardfocusUtils.isActionableElement(event.target)) {
+            this._accActionFocus = true;
             var active = this._getActiveObjectFromActionableChild(event.target);
             if (active != null) {
               if (active.type === Table.ACTIVE_ELEMENT_TYPES._DATA_ROW) {
@@ -17027,6 +17141,7 @@ var __oj_table_metadata =
       } else {
         activeBoundary = this._getActiveElement();
       }
+      this._clearAccStatusInfo();
       this._applyActionableMode(activeBoundary, skipFocusShift);
     } else if (!value && this._isTableActionableMode()) {
       this._active.isActionable = false;
@@ -17059,12 +17174,15 @@ var __oj_table_metadata =
       var tabbableElementsInFocusedElement = this._getTabbableElements(element);
       // only set actionable mode if there are any tabbable elements in the row
       if (tabbableElementsInFocusedElement.length > 0) {
+        // set active internal state to actionable BEFORE focus is set, otherwise screen reader
+        // will read contents multiple times when exiting actionable mode using ESC key
+        this._active.isActionable = true;
+
         this._focusOutHandler($(element));
         // set focus on the first tabbable element
         if (!skipFocusShift) {
           tabbableElementsInFocusedElement[0].focus();
         }
-        this._active.isActionable = true;
       }
     }
   };

package/dist/js/libs/oj/debug/ojtemplateengine.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['knockout', 'ojs/ojcore', 'ojs/ojkoshared', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/ojcustomelement-utils', 'preact', 'ojs/ojcore-base', 'ojs/ojcontext'], function (ko, oj, BindingProviderImpl, HtmlUtils, Logger, ojcustomelementUtils, preact, oj$1, Context) { 'use strict';
+define(['knockout', 'ojs/ojcore', 'ojs/ojkoshared', 'ojs/ojhtmlutils', 'ojs/ojlogger', 'ojs/ojcustomelement-utils', 'preact', 'ojs/ojcore-base', 'ojs/ojcontext', 'ojs/ojmetadatautils'], function (ko, oj, BindingProviderImpl, HtmlUtils, Logger, ojcustomelementUtils, preact, oj$1, Context, ojmetadatautils) { 'use strict';
 
     oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
     BindingProviderImpl = BindingProviderImpl && Object.prototype.hasOwnProperty.call(BindingProviderImpl, 'default') ? BindingProviderImpl['default'] : BindingProviderImpl;
@@ -118,17 +118,18 @@ define(['knockout', 'ojs/ojcore', 'ojs/ojkoshared', 'ojs/ojhtmlutils', 'ojs/ojlo
             };
         }
         static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
+            const metadata = ojcustomelementUtils.CustomElementUtils.getPropertiesForElementTag(elementTagName);
             const [cache, deleteEntry] = PreactTemplate._extendTemplate(template, PreactTemplate._COMPUTED_PROPS_CACHE_FACTORY, (recalc) => {
                 for (const observable of cache) {
                     observable.recalculateValue(recalc);
                 }
             });
-            const calcValue = (render) => PreactTemplate._computeProps(render, elementTagName, propertySet, data, propertyValidator);
+            const calcValue = (render) => PreactTemplate._computeProps(render, elementTagName, metadata, propertySet, data, propertyValidator);
             const item = new ObservableProperty(calcValue, renderer, defaultValues, deleteEntry);
             cache.add(item);
             return item;
         }
-        static _computeProps(renderer, elementTagName, propertySet, data, propertyValidator) {
+        static _computeProps(renderer, elementTagName, metadata, propertySet, data, propertyValidator) {
             const result = renderer(data);
             const vnodes = Array.isArray(result) ? result : [result];
             const targetNode = vnodes.find((n) => n.type === elementTagName);
@@ -139,7 +140,7 @@ define(['knockout', 'ojs/ojcore', 'ojs/ojkoshared', 'ojs/ojhtmlutils', 'ojs/ojlo
             const vprops = targetNode.props;
             Object.keys(vprops).forEach((prop) => {
                 if (propertySet.has(prop)) {
-                    props[prop] = targetNode.props[prop];
+                    props[prop] = ojcustomelementUtils.transformPreactValue(null, ojmetadatautils.getPropertyMetadata(prop, metadata), targetNode.props[prop]);
                 }
             });
             return props;

package/dist/js/libs/oj/debug_esm/ojcheckboxset.js

@@ -1228,11 +1228,33 @@ var __oj_checkboxset_metadata =
    * @since 5.0.0
    */
       GetFocusElement: function () {
+        // JET-48463 - oj-table issue where focus is lost
+        // GetFocusElement() needs to return the correct readonly element
+        // If _GetReadonlyFocusElement() returns null, fallback to the
+        // enabled element logic.
+        if (this.options.readOnly === true) {
+          const readonlyFocusElement = this._GetReadonlyFocusElement();
+          if (readonlyFocusElement) {
+            return readonlyFocusElement;
+          }
+        }
         // We need :disabled here so that we don't try to focus on an element that isn't focusable.
         // :focusable doesn't work because this is called before the custom element is fully upgraded
         // and is still hidden in the DOM.
         return this._GetContentElement().not(':disabled').first()[0];
       },
+      /**
+       * oj-checkboxset doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojCheckboxset
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-form-control-container');
+      },
   /**
    * Sets the disabled option onto the dom.
    * This is a no-op for checkboxset since its root dom element is a div, and disabled is