@oracle/oraclejet 12.0.1 → 12.0.4

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

@@ -8208,6 +8208,25 @@ const _OjMultiCombobox = _ComboUtils.clazz(_AbstractMultiChoice,
       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
@@ -9441,6 +9460,25 @@ const _OjSingleCombobox = _ComboUtils.clazz(_AbstractSingleChoice,
       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;
@@ -12754,6 +12792,25 @@ oj$1.__registerWidget('oj.ojCombobox', $.oj.editableValue,
       }
     },
 
+    /**
+     * 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_esm/ojstreamlist.js

@@ -8,7 +8,7 @@
 import { Component, h } from 'preact';
 import { Root, customElement } from 'ojs/ojvcomponent';
 import { getTranslatedString } from 'ojs/ojtranslation';
-import { KEYBOARD_KEYS, handleActionablePrevTab, handleActionableTab, getNoJQFocusHandlers, getFocusableElementsIncludingDisabled, disableAllFocusableElements, enableAllFocusableElements } from 'ojs/ojdatacollection-common';
+import { KEYBOARD_KEYS, handleActionablePrevTab, handleActionableTab, getNoJQFocusHandlers, getActionableElementsInNode, disableAllFocusableElements, enableAllFocusableElements } from 'ojs/ojdatacollection-common';
 import Context from 'ojs/ojcontext';
 import { IteratingDataProviderContentHandler, IteratingTreeDataProviderContentHandler } from 'ojs/ojvcollection';
 import oj from 'ojs/ojcore-base';
@@ -522,11 +522,11 @@ let StreamList = StreamList_1 = class StreamList extends Component {
         }
         if (data == null) {
             return (h(Root, { ref: this.setRootElement },
-                h("div", { role: 'list', "data-oj-context": true, tabIndex: 0, "aria-label": getTranslatedString('oj-ojStreamList.msgFetchingData') }, content)));
+                h("div", { role: "list", "data-oj-context": true, tabIndex: 0, "aria-label": getTranslatedString('oj-ojStreamList.msgFetchingData') }, content)));
         }
         else {
             return (h(Root, { ref: this.setRootElement },
-                h("div", { role: 'list', "data-oj-context": true, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onfocusin: this._handleFocusIn, onfocusout: this._handleFocusOut }, content)));
+                h("div", { role: "list", "data-oj-context": true, onClick: this._handleClick, onKeyDown: this._handleKeyDown, onfocusin: this._handleFocusIn, onfocusout: this._handleFocusOut }, content)));
         }
     }
     _doBlur() {
@@ -577,7 +577,7 @@ let StreamList = StreamList_1 = class StreamList extends Component {
             className += ' oj-stream-list-child-skeleton';
         }
         return (h("div", { class: className, key: key },
-            h("div", { class: 'oj-stream-list-skeleton-content oj-animation-skeleton' })));
+            h("div", { class: "oj-stream-list-skeleton-content oj-animation-skeleton" })));
     }
     _applySkeletonExitAnimation(skeletons) {
         const resolveFunc = this.addBusyState('apply skeleton exit animations');
@@ -1077,7 +1077,7 @@ let StreamList = StreamList_1 = class StreamList extends Component {
     }
     _isInFocusableElementsList(target, item) {
         let found = false;
-        const nodes = getFocusableElementsIncludingDisabled(item);
+        const nodes = getActionableElementsInNode(item);
         nodes.forEach(function (node) {
             if (node === target) {
                 found = true;

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

@@ -675,6 +675,19 @@ const ARIA_DISABLED = 'aria-disabled';
 
     // 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_esm/ojtable.js

@@ -26,7 +26,7 @@ import { __getTemplateEngine, getDeviceRenderMode } from 'ojs/ojconfig';
 import { applyParameters } from 'ojs/ojtranslation';
 import { getCachedCSSVarValues, parseJSONFromFontFamily } from 'ojs/ojthemeutils';
 import { _OJ_CONTAINER_ATTR, subtreeAttached, subtreeDetached, __GetWidgetConstructor, setDefaultOptions, createDynamicPropertyGetter } from 'ojs/ojcomponentcore';
-import { disableAllFocusableElements, isMobileTouchDevice, isRequestIdleCallbackSupported, getDefaultScrollBarWidth, containsKey, isIterateAfterDoneNotAllowed, getAddEventKeysResult, applyMergedInlineStyles, isEscapeKeyEvent, isEnterKeyEvent, isF2KeyEvent, isTabKeyEvent, isArrowUpKeyEvent, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isHomeKeyEvent, isEndKeyEvent, isSpaceBarKeyEvent, isEventClickthroughDisabled, isFromDefaultSelector, getFocusableElementsInNode, enableAllFocusableElements, KEYBOARD_KEYS, areKeySetsEqual, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
+import { disableAllFocusableElements, isMobileTouchDevice, isRequestIdleCallbackSupported, getDefaultScrollBarWidth, getActionableElementsInNode, containsKey, isIterateAfterDoneNotAllowed, getAddEventKeysResult, applyMergedInlineStyles, isEscapeKeyEvent, isEnterKeyEvent, isF2KeyEvent, isTabKeyEvent, isArrowUpKeyEvent, isArrowDownKeyEvent, isArrowLeftKeyEvent, isArrowRightKeyEvent, isHomeKeyEvent, isEndKeyEvent, isSpaceBarKeyEvent, isEventClickthroughDisabled, isFromDefaultSelector, getFocusableElementsInNode, enableAllFocusableElements, KEYBOARD_KEYS, areKeySetsEqual, disableDefaultBrowserStyling } from 'ojs/ojdatacollection-common';
 import { startAnimation } from 'ojs/ojanimation';
 import DomScroller from 'ojs/ojdomscroller';
 import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
@@ -457,6 +457,9 @@ var __oj_table_metadata =
         "accessibleColumnHeaderContext": {
           "type": "string"
         },
+        "accessibleContainsControls": {
+          "type": "string"
+        },
         "accessibleRowContext": {
           "type": "string"
         },
@@ -1668,6 +1671,11 @@ Table._BATCH_PROCESS_SIZE_WHEN_IDLE = 5;
  */
 Table.RESIZE_OFFSET = 10;
 
+/**
+ * @private
+ */
+Table.SIZING_ERROR_MARGIN = 0.05;
+
 /**
  * @private
  */
@@ -3547,10 +3555,11 @@ Table.prototype._registerResizeListener = function () {
   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()) {
@@ -6480,13 +6489,13 @@ TableLayoutManager.prototype._restoreCachedScrollPos = function () {
  * @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();
@@ -6659,7 +6668,16 @@ TableLayoutManager.prototype.getScrollBarWidth = function () {
  * @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) +
@@ -6912,7 +6930,9 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
   // 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;
 };
@@ -6926,17 +6946,23 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
  * @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 {
@@ -6946,11 +6972,11 @@ TableLayoutManager.prototype._getTableContainerScrollableState = function (botto
     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 {
@@ -7303,7 +7329,18 @@ TableLayoutManager.prototype._handleHeaderColumnResizeStart = function (event, i
 /**
  * @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;
@@ -7322,13 +7359,38 @@ TableLayoutManager.prototype._getPageX = function (event) {
 /**
  * @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
@@ -7906,12 +7968,9 @@ TableLegacyLayoutManager.prototype.refreshTableDimensions = function () {
       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()) {
@@ -8794,16 +8853,19 @@ TableStickyLayoutManager.prototype._initializeColumnLayouts = function () {
  * @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;
   }
 
@@ -9703,6 +9765,22 @@ Table.prototype._createStateInfo = function () {
   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
@@ -9727,6 +9805,7 @@ Table.prototype._createTableStatusAccNotification = function () {
  */
 Table.prototype._updateAccStatusInfo = function (columnHint) {
   var i;
+  var actionableElems;
   var label = '';
   var stateInfo = '';
   var tableHeaderColumn;
@@ -9767,7 +9846,6 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
     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);
@@ -9789,9 +9867,12 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
       } else if (column.sortable === Table._OPTION_ENABLED) {
         stateInfo += this.getTranslatedString('accessibleSortable', { id: '' }) + ' ';
       }
-      this._stateInfo.textContent = stateInfo;
     }
-    label += tableHeaderColumn.id + ' ' + this._stateInfo.id;
+    actionableElems = 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;
@@ -9805,7 +9886,6 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
     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);
@@ -9816,23 +9896,44 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
           break;
         }
       }
-      this._stateInfo.textContent = stateInfo;
+    }
+    actionableElems = 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 = 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) {
@@ -9844,10 +9945,10 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
 
     // 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 + ' ';
       }
@@ -9858,33 +9959,40 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
       }
     }
 
-    // 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 = 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
   }
@@ -9945,6 +10053,7 @@ Table.prototype._getNoDataId = function () {
  */
 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);
 };
@@ -11311,6 +11420,7 @@ Table.prototype._createInitialTable = function (isTableHeaderless, isTableFooter
   this._createTableStatusAccNotification();
   this._createContextInfo();
   this._createStateInfo();
+  this._createRowStateInfo();
   this._createTableWidthContainer();
 
   return table;
@@ -14126,6 +14236,7 @@ Table.CSS_CLASSES = {
   _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',
@@ -14164,6 +14275,7 @@ Table.CSS_PROP = {
   _LEFT: 'left',
   _RIGHT: 'right',
   _PADDING_TOP: 'padding-top',
+  _PADDING_BOTTOM: 'padding-bottom',
   _PADDING_LEFT: 'padding-left',
   _PADDING_RIGHT: 'padding-right',
   _OVERFLOW: 'overflow',
@@ -14174,6 +14286,7 @@ Table.CSS_PROP = {
   _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',
@@ -14387,6 +14500,7 @@ Table.prototype._handleFocusin = function (event, isPopupFocusin) {
         // 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 (isActionableElement(event.target)) {
+          this._accActionFocus = true;
           var active = this._getActiveObjectFromActionableChild(event.target);
           if (active != null) {
             if (active.type === Table.ACTIVE_ELEMENT_TYPES._DATA_ROW) {
@@ -17047,6 +17161,7 @@ Table.prototype._setTableActionableMode = function (value, skipFocusShift) {
     } else {
       activeBoundary = this._getActiveElement();
     }
+    this._clearAccStatusInfo();
     this._applyActionableMode(activeBoundary, skipFocusShift);
   } else if (!value && this._isTableActionableMode()) {
     this._active.isActionable = false;
@@ -17079,12 +17194,15 @@ Table.prototype._applyActionableMode = function (boundaryElement, skipFocusShift
     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_esm/ojtemplateengine.js

@@ -10,10 +10,11 @@ import oj$1 from 'ojs/ojcore';
 import BindingProviderImpl from 'ojs/ojkoshared';
 import { getTemplateContent } from 'ojs/ojhtmlutils';
 import { info } from 'ojs/ojlogger';
-import { CACHED_BINDING_PROVIDER, AttributeUtils } from 'ojs/ojcustomelement-utils';
+import { CACHED_BINDING_PROVIDER, CustomElementUtils, transformPreactValue, AttributeUtils } from 'ojs/ojcustomelement-utils';
 import { render } from 'preact';
 import oj from 'ojs/ojcore-base';
 import Context from 'ojs/ojcontext';
+import { getPropertyMetadata } from 'ojs/ojmetadatautils';
 
 const ROW = Symbol('row');
 class PreactTemplate {
@@ -121,17 +122,18 @@ class PreactTemplate {
         };
     }
     static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
+        const metadata = 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);
@@ -142,7 +144,7 @@ class PreactTemplate {
         const vprops = targetNode.props;
         Object.keys(vprops).forEach((prop) => {
             if (propertySet.has(prop)) {
-                props[prop] = targetNode.props[prop];
+                props[prop] = transformPreactValue(null, getPropertyMetadata(prop, metadata), targetNode.props[prop]);
             }
         });
         return props;