@oracle/oraclejet 12.0.1 → 12.1.0

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

@@ -314,6 +314,9 @@ var __oj_list_view_metadata =
         "labelPasteBefore": {
           "type": "string"
         },
+        "msgFetchCompleted": {
+          "type": "string"
+        },
         "msgFetchingData": {
           "type": "string"
         },
@@ -454,7 +457,8 @@ var __oj_list_view_metadata =
 
   // eslint-disable-next-line no-unused-vars
   StaticContentHandler.prototype.Collapse = function (item) {
-    // nothing to do
+    var groupItem = item.get(0);
+    groupItem.style.display = 'none';
   };
 
   StaticContentHandler.prototype.IsHierarchical = function () {
@@ -3253,7 +3257,12 @@ var __oj_list_view_metadata =
      * @private
      */
     updateStatusFetchEnd: function (count) {
-      var msg = this.ojContext.getTranslatedString('msgItemsAppended', { count: count });
+      var msg;
+      if (count === 0) {
+        msg = this.ojContext.getTranslatedString('msgFetchCompleted');
+      } else {
+        msg = this.ojContext.getTranslatedString('msgItemsAppended', { count: count });
+      }
       this._setAccInfoText(msg);
     },
 
@@ -5301,6 +5310,11 @@ var __oj_list_view_metadata =
           y: event.originalEvent.changedTouches[0].pageY
         };
       }
+
+      // mouse down on input element inside item should trigger actionable mode
+      if (this._isInputElement(target.get(0))) {
+        this._enterActionableMode(item);
+      }
     },
 
     /**
@@ -5335,16 +5349,18 @@ var __oj_list_view_metadata =
           // don't apply ripple effect on the item when target is one of these controls
           var target = event.target;
           var nodes = elem.querySelectorAll(
-            "input, select, button, a, textarea, object, [tabIndex]:not([tabIndex='-1'])");
+            "input, select, button, a, textarea, object, [tabIndex]:not([tabIndex='-1']), [data-oj-tabmod]");
           for (var i = 0; i < nodes.length; i++) {
             if (nodes[i].contains(target)) {
-              elem = target;
+              elem = null;
               break;
             }
           }
 
           // we don't really care when animation ends
-          this.StartAnimation(elem, action, effect);
+          if (elem != null) {
+            this.StartAnimation(elem, action, effect);
+          }
 
           this.m_touchPos = null;
         }
@@ -5359,19 +5375,21 @@ var __oj_list_view_metadata =
      * Enters actionable mode
      * @private
      */
-    _enterActionableMode: function () {
-      var current = this.m_active.elem;
+    _enterActionableMode: function (item) {
+      var current = (item === undefined) ? this.m_active.elem : item;
 
-      // in case content has been updated under the cover
-      this.disableAllTabbableElements(current);
+      if (current) {
+        // in case content has been updated under the cover
+        this.disableAllTabbableElements(current);
 
-      // re-enable all tabbable elements
-      this._enableAllTabbableElements(current);
+        // re-enable all tabbable elements
+        this._enableAllTabbableElements(current);
 
-      // only go into actionable mode if there is something to focus
-      var first = current.find('[data-first]');
-      if (first.length > 0) {
-        this._setActionableMode(true);
+        // only go into actionable mode if there is something to focus
+        var first = current.find('[data-first]');
+        if (first.length > 0) {
+          this._setActionableMode(true);
+        }
       }
     },
 
@@ -5383,7 +5401,9 @@ var __oj_list_view_metadata =
       this._setActionableMode(false);
 
       // disable all tabbable elements in the item again
-      this.disableAllTabbableElements(this.m_active.elem);
+      if (this.m_active) {
+        this.disableAllTabbableElements(this.m_active.elem);
+      }
     },
 
     /**
@@ -5424,7 +5444,7 @@ var __oj_list_view_metadata =
           }
 
           if (this._isActionableMode() && this.m_active != null &&
-            this.m_active.elem.get(0) !== item.get(0)) {
+            this.m_active.elem.get(0) !== item.get(0) && !this._isInputElement(target.get(0))) {
             // click on item other than current focus item should exit actionable mode
             this._exitActionableMode();
           }
@@ -5474,12 +5494,6 @@ var __oj_list_view_metadata =
             this._fireActionEvent(item.get(0), event);
           }
 
-          // click on input element inside item should trigger actionable mode
-          if (this._isInputElement(target.get(0))) {
-            this._enterActionableMode();
-            return;
-          }
-
           // clicking on header will expand/collapse item
           this._handleHeaderClick(event, target, item);
         }
@@ -7240,7 +7254,8 @@ var __oj_list_view_metadata =
           }
           current.removeClass('oj-focus-highlight');
         }
-      } else if ((key === ' ' || key === 'Spacebar' || key === this.SPACE_KEY) && this._isSelectionEnabled()) {
+      } else if ((key === ' ' || key === 'Spacebar' || key === this.SPACE_KEY)
+        && this._isSelectionEnabled() && !this._isInputElement(event.target)) {
         ctrlKey = this._ctrlEquivalent(event);
         shiftKey = event.shiftKey;
         if (shiftKey && !ctrlKey && this.m_selectionFrontier != null &&

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

@@ -337,7 +337,7 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
         return hooks.useMemo(() => new Array(length).fill(undefined).map(() => preact.createRef()), [length]);
     }
 
-    const offScreenStyle = "oj-live-region-offScreenStyle-142utbc";
+    const offScreenStyle = "oj-live-region-offScreenStyle-14cpbki";
     /**
      * A helper component that renders an aria-live region
      *
@@ -874,34 +874,34 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
       xxl: '2.5rem'
     };
     const directionStyles = {
-      row: "oj-flex-row-1vvm9uo",
-      column: "oj-flex-column-1f6tws4"
+      row: "oj-flex-row-1r2r04x",
+      column: "oj-flex-column-jvysn7"
     };
     const alignStyles = {
-      baseline: "oj-flex-baseline-ur2zsu",
-      center: "oj-flex-center-1vl1cnq",
-      end: "oj-flex-end-1gfzmdd",
-      start: "oj-flex-start-zr75ed",
-      inherit: "oj-flex-inherit-1coj9xs",
-      initial: "oj-flex-initial-11nenr0",
-      stretch: "oj-flex-stretch-zmigml"
+      baseline: "oj-flex-baseline-sn7vdu",
+      center: "oj-flex-center-rpq1co",
+      end: "oj-flex-end-1gkv0nk",
+      start: "oj-flex-start-19zmlgk",
+      inherit: "oj-flex-inherit-6cg1j7",
+      initial: "oj-flex-initial-e73gk1",
+      stretch: "oj-flex-stretch-pkf80b"
     };
     const justifyStyles = {
-      center: "oj-flex-center-1mmfjeb",
-      end: "oj-flex-end-e3bw7",
-      start: "oj-flex-start-14oocbl",
-      inherit: "oj-flex-inherit-9x04yt",
-      initial: "oj-flex-initial-1qg5fm0",
-      around: "oj-flex-around-tzqwuj",
-      between: "oj-flex-between-idw8zg",
-      evenly: "oj-flex-evenly-rmb8vt"
+      center: "oj-flex-center-cz2ys",
+      end: "oj-flex-end-vydaj5",
+      start: "oj-flex-start-1bfjt7u",
+      inherit: "oj-flex-inherit-1vx2ckm",
+      initial: "oj-flex-initial-1kcnwum",
+      around: "oj-flex-around-9r1l2k",
+      between: "oj-flex-between-mpocno",
+      evenly: "oj-flex-evenly-1iqacd2"
     };
     const wrapStyles = {
-      nowrap: "oj-flex-nowrap-qhhp95",
-      wrap: "oj-flex-wrap-12tnipv",
-      reverse: "oj-flex-reverse-16nj3zj",
-      inherit: "oj-flex-inherit-1n9lln8",
-      initial: "oj-flex-initial-14gjqky"
+      nowrap: "oj-flex-nowrap-y59k8t",
+      wrap: "oj-flex-wrap-fmpvou",
+      reverse: "oj-flex-reverse-1b0qr8v",
+      inherit: "oj-flex-inherit-1ij7eal",
+      initial: "oj-flex-initial-3nzaji"
     };
     const styles = {
       direction: directionStyles,
@@ -954,7 +954,7 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
       }
     };
 
-    const baseStyles = "oj-flex-baseStyles-uk15d4";
+    const baseStyles = "oj-flex-baseStyles-1fjajdl";
     const interpolations$1 = [...Object.values(interpolations), ...Object.values(flexboxInterpolations)];
     const styleInterpolations = mergeInterpolations(interpolations$1);
     const Flex = _a => {
@@ -1663,7 +1663,7 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
      * @ignore
      */
     const messageCloseButtonStyles = {
-      banner: "oj-message-banner-1od9sup"
+      banner: "oj-message-banner-2rbena"
     };
     /**
      * A Component for rendering the message close button
@@ -1811,8 +1811,8 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
      */
     const messageDetailStyles = {
       // TODO: Reevaluate once the TEXT component is available (JET-46891)
-      base: "oj-message-base-1od7fta",
-      banner: "oj-message-banner-vjb6uq"
+      base: "oj-message-base-14kwy8x",
+      banner: "oj-message-banner-takd8k"
     };
     /**
      * Default renderer for rendering the detail content.
@@ -1879,7 +1879,7 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
     // tracked by JET-47348 - set images in a component
 
 
-    const svgStyles = "oj-message-svgStyles-9kq0vg";
+    const svgStyles = "oj-message-svgStyles-8z03w3";
 
     const Svg = ({
       class: className,
@@ -1972,9 +1972,9 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
      * as shown at https://oss.oracle.com/licenses/upl/
      * @ignore
      */
-    const messageStartIconStyles = "oj-message-messageStartIconStyles-1yd6a19";
+    const messageStartIconStyles = "oj-message-messageStartIconStyles-iuvtfp";
     const severityIconStyles = {
-      banner: "oj-message-banner-1g1eblq"
+      banner: "oj-message-banner-zjhpfj"
     };
     const severityIcons = {
       confirmation: ConfirmationIcon,
@@ -2010,8 +2010,8 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
      */
     const messageSummaryStyles = {
       // TODO: Reevaluate once the TEXT component is available (JET-46891)
-      base: "oj-message-base-iiq630",
-      banner: "oj-message-banner-1cqkul6"
+      base: "oj-message-base-bowowq",
+      banner: "oj-message-banner-vxm2jp"
     };
     /**
      * Summary Component for rendering the summary text of the Message
@@ -2036,7 +2036,7 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
      * @ignore
      */
     const messageTimestampStyles = {
-      banner: "oj-message-banner-4wwib2"
+      banner: "oj-message-banner-18frmp1"
     };
     /**
      * Timestamp Component for rendering timestamp in Message
@@ -2172,11 +2172,11 @@ define(['exports', 'preact/hooks', 'preact', 'ojs/ojanimation', 'ojs/ojtranslati
 
 
     const messageStyles = {
-      base: "oj-message-base-1pff9bj",
-      section: "oj-message-section-egmprm",
-      header: "oj-message-header-u96tr4",
+      base: "oj-message-base-ph7f1",
+      section: "oj-message-section-y709vw",
+      header: "oj-message-header-13ytxxv",
       // TODO: Replace with Flex and View components to handle padding and flex
-      content: "oj-message-content-1g7rydb"
+      content: "oj-message-content-1cvp4im"
     };
     /**
      * A component that styles the header for the message component

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

@@ -5759,7 +5759,6 @@ var __oj_tab_bar_metadata =
     };
 
   const _ARIA_SELECTED = 'aria-selected';
-  const _ARIA_PRESSED = 'aria-pressed';
   const _OJ_DEFAULT$1 = 'oj-default';
 
   /**
@@ -5802,7 +5801,7 @@ var __oj_tab_bar_metadata =
 
   HorizontalNavListHandler.prototype.UpdateAriaPropertiesOnSelectedItem =
     function (elem, highlight) {
-      elem.attr(this._isTabBar() ? _ARIA_SELECTED : _ARIA_PRESSED, // @HTMLUpdateOK
+      elem.attr(_ARIA_SELECTED, // @HTMLUpdateOK
                 highlight ? 'true' : 'false');
     };
 
@@ -5851,21 +5850,12 @@ var __oj_tab_bar_metadata =
   // eslint-disable-next-line no-unused-vars
   HorizontalNavListHandler.prototype.ModifyListItem = function ($item, itemContent) {
     var focusableElement = this.m_widget.getSingleFocusableElement($item);
-    focusableElement.attr('role', this._isTabBar() ? 'tab' : 'button');
-    if (!this._isTabBar() && focusableElement[0].hasAttribute(_ARIA_SELECTED)) {
-      focusableElement.attr(_ARIA_PRESSED, 'false'); // @HTMLUpdateOK
-      focusableElement.removeAttr(_ARIA_SELECTED);
-    }
+    focusableElement.attr('role', 'tab');
   };
 
   HorizontalNavListHandler.prototype.BeforeRenderComplete = function () {
     var self = this;
-
-    if (this._isTabBar()) {
-      this.m_root.attr('role', 'tablist');
-    } else {
-      this.m_root.attr('role', 'toolbar');
-    }
+    this.m_root.attr('role', 'tablist');
     this.m_widget.element.attr('role', 'presentation');
 
     if (this.m_widget.GetOption('layout') === 'condense') {
@@ -5929,10 +5919,6 @@ var __oj_tab_bar_metadata =
 
   HorizontalNavListHandler.prototype.IsSelectable = function (item) {
     var itemSelectionMarkerAttr = _ARIA_SELECTED;
-
-    if (!this._isTabBar()) {
-      itemSelectionMarkerAttr = _ARIA_PRESSED;
-    }
     return (!(this.m_overflowMenuItem && this.m_overflowMenuItem[0] === $(item)[0]) &&
               this.m_widget.getFocusItem($(item))[0].hasAttribute(itemSelectionMarkerAttr));
   };
@@ -6310,7 +6296,7 @@ var __oj_tab_bar_metadata =
         .addClass(this.m_widget.getItemContentStyleClass());
       anchorElement.attr('role', 'button')
         .attr('aria-haspopup', 'true')
-        .attr(_ARIA_PRESSED, 'false') // @HTMLUpdateOK
+        .attr(_ARIA_SELECTED, 'false') // @HTMLUpdateOK
         .attr('tabindex', '-1')
         .attr('href', '#')
         .append(iconElement)// @HTMLUpdateOK constructed by component and not using string passed through any API

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

@@ -1150,12 +1150,7 @@ var __oj_radioset_metadata =
           }
 
           // if readonly, set tabindex and aria-readonly on the wrapper
-          if (this.options.readOnly) {
-            let domElem = this.element[0];
-            let wrapperDom = domElem.querySelector('.oj-radioset-wrapper');
-            wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-            wrapperDom.setAttribute('aria-readonly', 'true');
-          }
+          this._updateReadonlyState();
           this._on(this._events);
           this._setup();
         },
@@ -1202,6 +1197,16 @@ var __oj_radioset_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;
+            }
+          }
           // JET-43430 - dynamic form focus issue for radio buttonset
           // When tabbing through, the input element that is currently checked will be focused if
           // one is available. Otherwise the first input element will be given focus. We need to
@@ -1217,6 +1222,18 @@ var __oj_radioset_metadata =
           // If there is no checked inputs, simply return the first enabled input
           return this._GetContentElement().not(':disabled').first()[0];
         },
+        /**
+         * oj-radioset doesn't use .oj-text-field-readonly for the focusable readonly content,
+         * so we need to use a different selector.
+         * @memberof oj.ojRadioset
+         * @instance
+         * @override
+         * @protected
+         * @return {Element|null}
+         */
+        _GetReadonlyFocusElement: function () {
+          return this.widget()[0].querySelector('.oj-form-control-container');
+        },
         /**
          * Whether the component is required.
          *
@@ -1854,6 +1871,45 @@ var __oj_radioset_metadata =
 
           this.$radios._ojRadioCheckbox('refreshDisabled');
         },
+
+        /**
+         * Updates the component's state based on whether or not it is in the readonly
+         * state.
+         * @private
+         * @memberof! oj.ojRadioset
+         */
+        _updateReadonlyState: function () {
+          const wrapperDom = this.element[0].querySelector('.oj-radioset-wrapper');
+          if (this.options.readOnly) {
+            wrapperDom.setAttribute('tabindex', this._externalTabIndex);
+            wrapperDom.setAttribute('aria-readonly', 'true');
+            this.element.addClass('oj-read-only');
+
+            // JET-49107 - reassess accessibility implementation of 'readonly' radioset
+            // In readonly mode, we will not have any radio input in the visible DOM. Thus,
+            // in this state it will just be showing generic text based on the value selected.
+            // So, we need to clean up the role along with the aria-labelledby attributes we added
+            // for that role to make things accessible.
+            this.element.removeAttr('role').removeAttr('aria-labelledby');
+            return;
+          }
+
+          // remove tabindex and role
+          wrapperDom.removeAttribute('tabindex');
+          wrapperDom.removeAttribute('aria-readonly');
+          this.element.removeClass('oj-read-only');
+
+          // JET-49107 - reassess accessibility implementation of 'readonly' radioset
+          // add back the role and aria attributes removed before
+          this.element.attr('role', 'radiogroup');
+          this._labelledByUpdatedForSet(
+            this.widget()[0].id,
+            null,
+            this.options.labelledBy,
+            this.widget()
+          );
+        },
+
         /**
          * Note that _setOption does not get called during create in the super class.
          * It only gets called when the component has already been created.
@@ -1870,18 +1926,8 @@ var __oj_radioset_metadata =
               this._propagateDisabled(value);
               break;
             case 'readOnly':
-              var wrapperDom = this.element[0].querySelector('.oj-radioset-wrapper');
               var val = this.options.value;
-              if (value) {
-                wrapperDom.setAttribute('tabindex', this._externalTabIndex);
-                wrapperDom.setAttribute('aria-readonly', 'true');
-                this.element.addClass('oj-read-only');
-              } else {
-                // remove tabindex and role
-                wrapperDom.removeAttribute('tabindex');
-                wrapperDom.removeAttribute('aria-readonly');
-                this.element.removeClass('oj-read-only');
-              }
+              this._updateReadonlyState();
               this._ResetComponentState();
               // when toggle readonly to false, we need to check the initial set values.
               if (val != null) {

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

@@ -2725,9 +2725,9 @@ var __oj_row_expander_metadata =
        */
       _releaseResources: function () {
         this.component.element[0].removeEventListener('keydown', this.handleKeyDownCallback, true);
-        this.toucharea.removeEventListener('touchend', this._touchEndListener);
-        this.toucharea.removeEventListener('click', this._clickListener);
-        this.element[0].removeEventListener('keypress', this._keyPressListener);
+        this.toucharea.removeEventListener('touchend', this.handleTouchEndCallback);
+        this.toucharea.removeEventListener('click', this.handleClickCallback);
+        this.element[0].removeEventListener('keypress', this.handleKeyPressCallback);
 
         if (this.component._IsCustomElement()) {
           $(this.component.element).off('ojBeforeCurrentCell', this.handleActiveKeyChangeCallback);
@@ -2776,9 +2776,14 @@ var __oj_row_expander_metadata =
         this.handleKeyDownCallback = this._handleKeyDownEvent.bind(this);
         this.component.element[0].addEventListener('keydown', this.handleKeyDownCallback, true);
         if (this.iconState === 'expanded' || this.iconState === 'collapsed') {
-          this.toucharea.addEventListener('touchend', this._touchEndListener.bind(this));
-          this.toucharea.addEventListener('click', this._clickListener.bind(this));
-          this.element[0].addEventListener('keypress', this._keyPressListener.bind(this));
+          this.handleTouchEndCallback = this._touchEndListener.bind(this);
+          this.toucharea.addEventListener('touchend', this.handleTouchEndCallback);
+
+          this.handleClickCallback = this._clickListener.bind(this);
+          this.toucharea.addEventListener('click', this.handleClickCallback);
+
+          this.handleKeyPressCallback = this._keyPressListener.bind(this);
+          this.element[0].addEventListener('keypress', this.handleKeyPressCallback);
 
           // listens for expand and collapse event from flattened datasource
           // this could be due to user clicks, keyboard shortcuts or programmatically

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

@@ -12744,6 +12744,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/ojsunburst.js

@@ -1848,6 +1848,7 @@ var __oj_sunburst_node_metadata =
        * @ojshortdesc Triggered immediately before any node in the sunburst is expanded.
        * @memberof oj.ojSunburst
        * @instance
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-before-expand event has been deprecated.  Lazy loading of data can be done through the data provider.'}
        */
         beforeExpand: null,
       /**
@@ -1865,6 +1866,7 @@ var __oj_sunburst_node_metadata =
        * @ojshortdesc Triggered when a node has been expanded.
        * @memberof oj.ojSunburst
        * @instance
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-expand event has been deprecated.  Use on-expanded-changed instead.'}
        */
         expand: null,
       /**
@@ -1882,6 +1884,7 @@ var __oj_sunburst_node_metadata =
        * @ojshortdesc Triggered immediately before any container node in the sunburst is collapsed.
        * @memberof oj.ojSunburst
        * @instance
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-before-collapse event has been deprecated.  Lazy loading of data can be done through the data provider.'}
        */
         beforeCollapse: null,
       /**
@@ -1898,6 +1901,7 @@ var __oj_sunburst_node_metadata =
        * @event
        * @memberof oj.ojSunburst
        * @instance
+       * @ojdeprecated {since: '12.1.0', description: 'The oj-collapse event has been deprecated.  Use on-expanded-changed instead.'}
        */
         collapse: null
       },

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