@oracle/oraclejet 12.0.1 → 12.0.4

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

@@ -8198,6 +8198,25 @@ var __oj_select_many_metadata =
         return $(contentStructure.join(''));
       },
 
+      // _OjMultiCombobox
+      _initContainer: function () {
+        _OjMultiCombobox.superclass._initContainer.apply(this, arguments);
+
+        // JET-50535 - focus lost from component when mouse down on dropdown (Similar to JET-47442)
+        // The editable table relies on the focus events from the popup to determine whether
+        // or not the table should be edit mode. Initially when clicking on the combobox,
+        // the initial focus is on the input element. At this point, when one clicks on
+        // an option item, the focus will be lost on mousedown. Since, none of the other elements
+        // in the dropdown are focusable, the focus is transferred to the first focusable ancestor
+        // which in this case happens to be the body element. This results in the focusout event
+        // on the popup. As the selection only happens on the mouseup event, if one keeps the mouse
+        // pressed long enough, the table will exit the edit mode before the selection happens.
+        // Since, we are not relying on the physical focus anyway for selection mechanism, a patchy
+        // solution here would be to prevent the focus transfer when one clicks in the results area.
+        // This way the table would stay in edit mode.
+        this.dropdown.on('mousedown', _ComboUtils.killEvent);
+      },
+
       _opening: function (event, dontUpdateResults) {
         // if beforeExpand is not cancelled
         // beforeExpand event will be triggered in base class _shouldOpen method
@@ -9431,6 +9450,25 @@ var __oj_select_many_metadata =
         this._endSlot = null;
       },
 
+      // _OjSingleCombobox
+      _initContainer: function () {
+        _OjSingleCombobox.superclass._initContainer.apply(this, arguments);
+
+        // JET-50535 - focus lost from component when mouse down on dropdown (Similar to JET-47442)
+        // The editable table relies on the focus events from the popup to determine whether
+        // or not the table should be edit mode. Initially when clicking on the combobox,
+        // the initial focus is on the input element. At this point, when one clicks on
+        // an option item, the focus will be lost on mousedown. Since, none of the other elements
+        // in the dropdown are focusable, the focus is transferred to the first focusable ancestor
+        // which in this case happens to be the body element. This results in the focusout event
+        // on the popup. As the selection only happens on the mouseup event, if one keeps the mouse
+        // pressed long enough, the table will exit the edit mode before the selection happens.
+        // Since, we are not relying on the physical focus anyway for selection mechanism, a patchy
+        // solution here would be to prevent the focus transfer when one clicks in the results area.
+        // This way the table would stay in edit mode.
+        this.dropdown.on('mousedown', _ComboUtils.killEvent);
+      },
+
       _triggerValueUpdatedEvent: function (data, previousValue) {
         if (!this.ojContext._IsCustomElement()) {
           return;
@@ -12744,6 +12782,25 @@ var __oj_select_many_metadata =
         }
       },
 
+      /**
+       * combobox-many doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.  Combobox-one doesn't need this override,
+       * so we just return the default readonly element.
+       * @memberof! _OjMultiCombobox
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        if (this.multiple) {
+          return this.widget()[0].querySelector('.oj-combobox-accessible-container');
+        }
+
+        // For oj-combobox-one return the default element
+        return this._super();
+      },
+
       // 19670748, dropdown popup should be closed on subtreeDetached notification.
       _NotifyDetached: function () {
         this._superApply(arguments);

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

@@ -514,11 +514,11 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
             }
             if (data == null) {
                 return (preact.h(ojvcomponent.Root, { ref: this.setRootElement },
-                    preact.h("div", { role: 'list', "data-oj-context": true, tabIndex: 0, "aria-label": Translations.getTranslatedString('oj-ojStreamList.msgFetchingData') }, content)));
+                    preact.h("div", { role: "list", "data-oj-context": true, tabIndex: 0, "aria-label": Translations.getTranslatedString('oj-ojStreamList.msgFetchingData') }, content)));
             }
             else {
                 return (preact.h(ojvcomponent.Root, { ref: this.setRootElement },
-                    preact.h("div", { role: 'list', "data-oj-context": true, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onfocusin: this._handleFocusIn, onfocusout: this._handleFocusOut }, content)));
+                    preact.h("div", { role: "list", "data-oj-context": true, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onfocusin: this._handleFocusIn, onfocusout: this._handleFocusOut }, content)));
             }
         }
         _doBlur() {
@@ -569,7 +569,7 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
                 className += ' oj-stream-list-child-skeleton';
             }
             return (preact.h("div", { class: className, key: key },
-                preact.h("div", { class: 'oj-stream-list-skeleton-content oj-animation-skeleton' })));
+                preact.h("div", { class: "oj-stream-list-skeleton-content oj-animation-skeleton" })));
         }
         _applySkeletonExitAnimation(skeletons) {
             const resolveFunc = this.addBusyState('apply skeleton exit animations');
@@ -1069,7 +1069,7 @@ define(['exports', 'preact', 'ojs/ojvcomponent', 'ojs/ojtranslation', 'ojs/ojdat
         }
         _isInFocusableElementsList(target, item) {
             let found = false;
-            const nodes = DataCollectionUtils.getFocusableElementsIncludingDisabled(item);
+            const nodes = DataCollectionUtils.getActionableElementsInNode(item);
             nodes.forEach(function (node) {
                 if (node === target) {
                     found = true;

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

@@ -674,6 +674,19 @@ var __oj_switch_metadata =
 
       // P R O T E C T E D    C O N S T A N T S   A N D   M E T H O D S
 
+      /**
+       * oj-switch doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojSwitch
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-switch-thumb');
+      },
+
       /**
        * @private
        * @const

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/ojvalidator-datetimerange.js

@@ -186,9 +186,6 @@ define(['ojs/ojcore', 'ojs/ojtranslation', 'ojs/ojvalidator', 'ojs/ojvalidation-
     }
 
     var processValidation = function (converter) {
-      // verify value, min, and max are of the same type and not mixed with date/time and time only.
-      // throws an error if they are not
-      converterUtils._verifyValueMinMax(value, min, max);
       if (min) {
         min = converterUtils._minMaxIsoString(min, value);
         minStr = converter ? converter.format(min) : min;