@oracle/oraclejet 14.0.6 → 14.1.0

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

@@ -186,8 +186,8 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
    *   <li>"alertdialog" defines type of dialog that contains an alert message, where initial focus
    *       goes to an element within the dialog.</li>
    * </ul>
-   * The popup also adds the <code class="prettyprint">aria-describedby="popup-id"</code> attribute
-   * to the assocaited launcher while the popup is open.
+   * The non-modal (modeless) popup also adds the <code class="prettyprint">aria-describedby="popup-id"</code>
+   * attribute to the assocaited launcher while the popup is open.
    * </p>
    *
    * On platforms that support voice over mode (VO), the popup injects anchor tags "skip links"
@@ -196,12 +196,12 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
    *  <ul>
    *    <li>A close link, {@link oj.ojPopup#translations.ariaCloseSkipLink}, is injected as a
    *        sibling to the popup's content. Activation of this link will close the popup.</li>
-   *    <li>For cases where the popup doesn't steal focus when it's open, a content navigation
+   *    <li>For cases where the non-modal popup doesn't steal focus when it's open, a content navigation
    *        skip link, {@link oj.ojPopup#translations.ariaFocusSkipLink}, is injected as a
    *        sibling to the launcher (first required argument of the open method). If the launcher
    *        selector targets a sub-element of the launcher, the skip link could be injected under
    *        the launcher, which can be problematic for oj-button as skip link activation will
-   *        also activate the associated launcher.</li>
+   *        also activate the associated launcher. The focus skip link is not injected for modal popups.</li>
    *  </ul>
    *
    * <p>One point often overlooked is making the gestures that launch a popup accessible.
@@ -1047,7 +1047,9 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
       this._setPosition(position);
 
       this._setAutoDismiss(options.autoDismiss);
-      this._addDescribedBy();
+      if (options.modality !== 'modal') {
+        this._addDescribedBy();
+      }
 
       if (!this._IsCustomElement() || !element[0].hasAttribute('role')) {
         element.attr('role', options.role);
@@ -2243,38 +2245,46 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
      * @private
      */
     _initVoiceOverAssist: function () {
+      var isModal = this.options.modality === 'modal';
       var isVOSupported =
         oj.AgentUtils.getAgentInfo().os === oj.AgentUtils.OS.IOS ||
         oj.AgentUtils.getAgentInfo().os === oj.AgentUtils.OS.ANDROID;
-      var liveRegion = this._liveRegion;
-      if (!liveRegion) {
-        liveRegion = new PopupLiveRegion();
-        this._liveRegion = liveRegion;
-      }
-
       var message;
-      var initialFocus = this._deriveInitialFocus();
-      if (isVOSupported) {
-        message = this.getTranslatedString(
-          initialFocus === 'none'
-            ? 'ariaLiveRegionInitialFocusNoneTouch'
-            : 'ariaLiveRegionInitialFocusFirstFocusableTouch'
-        );
-      } else {
-        message = this.getTranslatedString(
-          initialFocus === 'none'
-            ? 'ariaLiveRegionInitialFocusNone'
-            : 'ariaLiveRegionInitialFocusFirstFocusable'
-        );
+
+      if (!isModal) {
+        // for non-modal popups install the live region for keybard/VO navigation
+        var liveRegion = this._liveRegion;
+        if (!liveRegion) {
+          liveRegion = new PopupLiveRegion();
+          this._liveRegion = liveRegion;
+        }
+        var initialFocus = this._deriveInitialFocus();
+        if (isVOSupported) {
+          message = this.getTranslatedString(
+            initialFocus === 'none'
+              ? 'ariaLiveRegionInitialFocusNoneTouch'
+              : 'ariaLiveRegionInitialFocusFirstFocusableTouch'
+          );
+        } else {
+          message = this.getTranslatedString(
+            initialFocus === 'none'
+              ? 'ariaLiveRegionInitialFocusNone'
+              : 'ariaLiveRegionInitialFocusFirstFocusable'
+          );
+        }
+        liveRegion.announce(message);
       }
-      liveRegion.announce(message);
 
       if (isVOSupported) {
-        var focusSkipLinkId = this._getSubId('focusSkipLink');
-        var launcher = this._launcher;
-        var callback = this._intialFocus.bind(this, true);
-        message = this.getTranslatedString('ariaFocusSkipLink');
-        this._focusSkipLink = new PopupSkipLink(launcher, message, callback, focusSkipLinkId);
+        var callback;
+
+        if (!isModal) {
+          var focusSkipLinkId = this._getSubId('focusSkipLink');
+          var launcher = this._launcher;
+          callback = this._intialFocus.bind(this, true);
+          message = this.getTranslatedString('ariaFocusSkipLink');
+          this._focusSkipLink = new PopupSkipLink(launcher, message, callback, focusSkipLinkId);
+        }
 
         var content = this._content;
         var closeSkipLinkId = this._getSubId('closeSkipLink');
@@ -2290,8 +2300,10 @@ import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
      */
     _destroyVoiceOverAssist: function () {
       var liveRegion = this._liveRegion;
-      liveRegion.destroy();
-      delete this._liveRegion;
+      if (liveRegion) {
+        liveRegion.destroy();
+        delete this._liveRegion;
+      }
 
       var focusSkipLink = this._focusSkipLink;
       if (focusSkipLink) {

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

@@ -1501,9 +1501,9 @@ ZOrderUtils.removeFromAncestorLayer = function (popup) {
 
   ZOrderUtils.preOrderVisit(layer, ZOrderUtils._closeDescendantPopupsCallback);
 
+  ZOrderUtils._removeOverlayFromAncestorLayer(layer);
   ZOrderUtils._resetAriaHiddenOnBackround(layer);
   ZOrderUtils._restoreBodyOverflow();
-  ZOrderUtils._removeOverlayFromAncestorLayer(layer);
 
   layer.removeData(ZOrderUtils._EVENTS_DATA);
   layer.removeData(ZOrderUtils._MODALITY_DATA);
@@ -1557,8 +1557,11 @@ ZOrderUtils._disableBodyOverflow = function (layer) {
 };
 
 ZOrderUtils._restoreBodyOverflow = function () {
-  const body = document.body;
-  body.classList.remove('oj-component-modal-open');
+  // if there are no more modals left, enable scrolling on body
+  if (!ZOrderUtils.hasModalDialogOpen()) {
+    const body = document.body;
+    body.classList.remove('oj-component-modal-open');
+  }
 };
 
 ZOrderUtils._removeFocusWithinFromOverlayedContent = function () {
@@ -3412,6 +3415,11 @@ PositionUtils.calcAvailablePopupSize = function (pos, feedback, withinElem) {
         }
       });
 
+      // JET-56620: normalize position left/top to integer values to avoid unnecessary
+      // repositioning caused by potential floating number oscillations
+      position.left = Math.round(position.left);
+      position.top = Math.round(position.top);
+
       if (options.using) {
         // Adds feedback as second argument to using callback, if present
         using = function (props) {

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

@@ -12,7 +12,7 @@ import 'ojs/ojlistview';
 import 'ojs/ojhighlighttext';
 import oj from 'ojs/ojcore-base';
 import $ from 'jquery';
-import { getReadingDirection, isAncestorOrSelf, isAncestor, recentPointer } from 'ojs/ojdomutils';
+import { getReadingDirection, isAncestorOrSelf, isAncestor } from 'ojs/ojdomutils';
 import { warn, error } from 'ojs/ojlogger';
 import { getDeviceType, getDeviceRenderMode, __getTemplateEngine } from 'ojs/ojconfig';
 import { getCachedCSSVarValues } from 'ojs/ojthemeutils';
@@ -932,6 +932,7 @@ LovDropdown.prototype.init = function (options) {
   this._isValueItemForPlaceholderFunc = options.isValueItemForPlaceholderFunc;
 
   this._currentFirstItem = null;
+  this._firstResultForKeyboardFocus = null;
   this._templateEngine = null;
   this._resultsCount = null;
   this._NO_RESULTS_FOUND_CLASSNAME = 'oj-listbox-searchselect-no-results';
@@ -1349,11 +1350,9 @@ LovDropdown.prototype._configureResults = function (searchText, selectedValue, i
   this._SetCurrentFirstItem(null);
 
   // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
-  // remove an existing focusin listener before deciding whether we need to add a new one
-  if (this._focusinListener) {
-    this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-    this._focusListener = null;
-  }
+  // Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
+  // remove the existing first result for keyboard focus
+  this._firstResultForKeyboardFocus = null;
 
   // This method is called only after the collection fetched the data
   // get the result count and store them
@@ -1839,11 +1838,9 @@ LovDropdown.prototype.close = function () {
   this._ClearSelection();
 
   // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
-  // remove the focusin listener now that we don't need it anymore
-  if (this._focusinListener) {
-    this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-    this._focusListener = null;
-  }
+  // Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
+  // remove the first result as we do not need it anymore
+  this._firstResultForKeyboardFocus = null;
 
   /** @type {!Object.<oj.PopupService.OPTION, ?>} */
   var psOptions = {};
@@ -2230,6 +2227,26 @@ LovDropdown.prototype.getResultsCount = function () {
   return this._resultsCount;
 };
 
+/**
+ * Focuses the collection component.
+ *
+ * @return {Promise} A promise indicating that focus has been set on the collection component
+ *
+ * @memberof LovDropdown
+ * @instance
+ * @public
+ * @ignore
+ */
+LovDropdown.prototype.focus = function () {
+  const resolveBusyState = this._addBusyStateFunc('LovDropdown focusing the collection component');
+  return this._handleCollectionFocus().then(
+    function () {
+      FocusUtils.focusFirstTabStop(this.getElement());
+      resolveBusyState();
+    }.bind(this)
+  );
+};
+
 /**
  * Sets the current first value item
  *
@@ -2267,6 +2284,7 @@ LovDropdown.prototype._addListenerForRowKeyProperty = function (currentRow) {
 };
 
 // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
+// Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
 /**
  * Fetches the first result from the data provider and sets it as the current row if the
  * collection gets keyboard focus.
@@ -2279,13 +2297,13 @@ LovDropdown.prototype._addListenerForRowKeyProperty = function (currentRow) {
  */
 LovDropdown.prototype._FetchFirstResultForKeyboardFocus = function () {
   var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
+  this._firstResultForKeyboardFocus = null;
   return this._FetchFirstResult().then(
     function (data) {
       if (data != null) {
-        // if there are results, listen on focusin in order to set the first result as current so that
-        // the table header doesn't get focus
-        this._focusinListener = this._handleCollectionFocusinOnce.bind(this, data);
-        this._containerElem[0].addEventListener('focusin', this._focusinListener);
+        // if there are results, save the data so that it can be used for setting the
+        // current row when we need to focus the collection element.
+        this._firstResultForKeyboardFocus = data;
       }
       return busyContext.whenReady();
     }.bind(this)
@@ -2293,36 +2311,41 @@ LovDropdown.prototype._FetchFirstResultForKeyboardFocus = function () {
 };
 
 // JET-38215 - SELECT SINGLE - KEYBOARD NAVIGATION FOR COLLECTION TEMPLATE USAGE
+// Original logic updated for JET-49906 - IN ACCESSIBILITY MODE, THE FIRST DROPDOWN VALUE IS READ TWICE
 /**
- * Handle focusin on the collection in order to set the first result as the current row when
- * the collection receives focus via the keyboard.
+ * Setup collection component before focusing it. This sets the first result as the current row when
+ * the LovDropdown.focus is called.
  *
  * @memberof LovDropdown
  * @instance
  * @private
  */
-LovDropdown.prototype._handleCollectionFocusinOnce = function (data) {
-  this._containerElem[0].removeEventListener('focusin', this._focusinListener);
-  this._focusinListener = null;
-  // only focus the first row if focus was transferred via the keyboard
-  if (!recentPointer()) {
-    var resolveBusyState = this._addBusyStateFunc('LovDropdown setting selected KeySet on focusin');
+LovDropdown.prototype._handleCollectionFocus = function () {
+  var resolveBusyState = this._addBusyStateFunc('LovDropdown setting selected KeySet on focusin');
+
+  // ignore if we do not have first row data
+  if (!this._firstResultForKeyboardFocus) {
+    // Return a Promise to be consistent with the else path. Make sure to set and resolve the busy context.
+    return Promise.resolve().then(function () {
+      resolveBusyState();
+    });
+  }
 
-    // JET-39993 - Select2 options qunit tests fail using chrome and safari on Mac for master branch
-    // set flag while we're setting the collection current row and selected key set because we don't
-    // need to react to changes that we're pushing
-    this._handlingCollectionFocusinOnce = true;
+  // JET-39993 - Select2 options qunit tests fail using chrome and safari on Mac for master branch
+  // set flag while we're setting the collection current row and selected key set because we don't
+  // need to react to changes that we're pushing
+  this._handlingCollectionFocusinOnce = true;
 
-    this._SetCollectionCurrentRow({ rowKey: data.key });
+  this._SetCollectionCurrentRow({ rowKey: this._firstResultForKeyboardFocus.key });
 
-    var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
-    busyContext.whenReady().then(
-      function () {
-        this._handlingCollectionFocusinOnce = false;
-        resolveBusyState();
-      }.bind(this)
-    );
-  }
+  var busyContext = Context.getContext(this._containerElem[0]).getBusyContext();
+  return busyContext.whenReady().then(
+    function () {
+      this._handlingCollectionFocusinOnce = false;
+      this._firstResultForKeyboardFocus = null;
+      resolveBusyState();
+    }.bind(this)
+  );
 };
 
 /**
@@ -3777,17 +3800,23 @@ oj.__registerWidget('oj.ojSelectBase', $.oj.editableValue, {
 
     var abstractLovBase = this._abstractLovBase;
     var lovDropdown = this._lovDropdown;
+    var outerWrapper = this.OuterWrapper;
 
     switch (keyCode) {
       case LovUtils.KEYS.UP:
       case LovUtils.KEYS.DOWN:
         if (abstractLovBase.isDropdownOpen()) {
           // lovDropdown.transferHighlight((keyCode === LovUtils.KEYS.UP) ? -1 : 1);
-          FocusUtils.focusFirstTabStop(lovDropdown.getElement());
-
-          // keep oj-focus on root so that inside label is still shifted up and field looks focused
-          // while dropdown is open
-          this.OuterWrapper.classList.add('oj-focus');
+          lovDropdown.focus().then(function () {
+            // keep oj-focus on root so that inside label is still shifted up and field looks focused
+            // while dropdown is open.
+            // And since we are dealing with asynchronism here, make sure if the focus is still in the
+            // dropdown.
+            const dropdownElement = lovDropdown.getElement();
+            if (dropdownElement && dropdownElement.contains(document.activeElement)) {
+              outerWrapper.classList.add('oj-focus');
+            }
+          });
 
           // if tabbing into dropdown, continue showing filter field as it was before tabbing
           //  - ie11: filter field hidden when you arrow into dropdown