@webex/widgets 1.28.1 → 1.28.2

package/dist/webexWidgets.esm.js

@@ -4,6 +4,36 @@ import Webex from 'webex';
 import require$$2, { createPortal } from 'react-dom';
 import { deconstructHydraId, SDK_EVENT, constructHydraId } from '@webex/common';
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+
 function _classCallCheck(a, n) {
   if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
 }
@@ -3235,36 +3265,6 @@ var TapSubscriber = /*@__PURE__*/function (_super) {
   return TapSubscriber;
 }(Subscriber);
 
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-
-function _arrayWithoutHoles(r) {
-  if (Array.isArray(r)) return _arrayLikeToArray(r);
-}
-
-function _iterableToArray(r) {
-  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-}
-
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(r) {
-  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
-}
-
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
@@ -56954,11 +56954,159 @@ var WebexMeetingsWidget = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, WebexMeetingsWidget);
     return _callSuper(this, WebexMeetingsWidget, [props]);
   }
+  /**
+   * Temporary custom accessibility fix:
+   * - Redirects focus to the first actionable control inside the meeting
+   * - Makes video layout focusable and supports left/right arrow navigation
+   * - Prevents focus from escaping to the browser URL bar
+   *
+   * NOTE: This is a workaround because the base @webex/components WebexMeeting
+   * does not yet support these accessibility features.
+   * Once the upstream component is fixed, we must remove this custom code
+   * from our repo to avoid duplication and ensure long-term maintainability.
+   */
   _inherits(WebexMeetingsWidget, _Component);
   return _createClass(WebexMeetingsWidget, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this = this;
+      // When focus comes to the widget container, move to the correct media container before and after joining
+      if (this.widgetDiv) {
+        if (!this._mediaContainerTabHandler) {
+          this._mediaContainerTabHandler = function (evt) {
+            var mediaContainer = evt.currentTarget;
+            // Only handle if the media container itself is focused
+            if ((evt.code === 'Tab' || evt.key === 'Tab') && document.activeElement === mediaContainer) {
+              if (!evt.shiftKey) {
+                evt.preventDefault();
+                var joinButton = _this.widgetDiv.querySelector('button[aria-label="Join meeting"]');
+                if (!joinButton) {
+                  joinButton = _this.widgetDiv.querySelector('.wxc-meeting-control button, .wxc-meeting-control [tabindex]:not([tabindex="-1"])');
+                }
+                if (joinButton) {
+                  joinButton.focus();
+                }
+              } else {
+                evt.preventDefault();
+                // Move focus back to the widget container
+                if (_this.widgetDiv) {
+                  _this.widgetDiv.tabIndex = 0;
+                  _this.widgetDiv.focus();
+                }
+              }
+            }
+          };
+        }
+        this.widgetDiv.addEventListener('focus', function () {
+          setTimeout(function () {
+            // Attach handler to both possible media containers if they exist
+            var containers = _toConsumableArray(_this.widgetDiv.querySelectorAll('.wxc-interstitial-meeting__media-container, .wxc-in-meeting__media-container'));
+            if (containers.length > 0) {
+              containers.forEach(function (mediaContainer) {
+                mediaContainer.tabIndex = 0;
+                mediaContainer.removeEventListener('keydown', _this._mediaContainerTabHandler, true);
+                mediaContainer.addEventListener('keydown', _this._mediaContainerTabHandler, true);
+              });
+            } else {
+              // fallback to Join meeting button or first .wxc-meeting-control button
+              var joinButton = _this.widgetDiv.querySelector('button[aria-label="Join meeting"]');
+              if (!joinButton) {
+                joinButton = _this.widgetDiv.querySelector('.wxc-meeting-control button, .wxc-meeting-control [tabindex]:not([tabindex="-1"])');
+              }
+              if (joinButton) {
+                joinButton.focus();
+              }
+            }
+          }, 0);
+        });
+
+        // Arrow key navigation for all meeting control buttons, with MutationObserver
+        var attachArrowNav = function attachArrowNav() {
+          // Gather all focusable meeting controls, including Join meeting button if present
+          var buttons = [];
+          var controlBar = _this.widgetDiv.querySelector('.wxc-meeting-control-bar__controls');
+          if (controlBar) {
+            buttons = Array.from(controlBar.querySelectorAll('button, [tabindex]:not([tabindex="-1"])'));
+          }
+          // Add Join meeting button if present and not already in the list
+          var joinButton = _this.widgetDiv.querySelector('button[aria-label="Join meeting"]');
+          if (joinButton && !buttons.includes(joinButton)) {
+            buttons = [joinButton].concat(_toConsumableArray(buttons));
+          }
+          // Remove any previous listeners to avoid duplicates
+          buttons.forEach(function (btn) {
+            btn.onkeydown = null;
+          });
+          // Attach arrow key listeners to all buttons (including Join meeting)
+          buttons.forEach(function (btn, idx) {
+            btn.onkeydown = function (evt) {
+              if (evt.key === 'ArrowRight') {
+                evt.preventDefault();
+                var next = buttons[(idx + 1) % buttons.length];
+                if (next) next.focus();
+              } else if (evt.key === 'ArrowLeft') {
+                evt.preventDefault();
+                var prev = buttons[(idx - 1 + buttons.length) % buttons.length];
+                if (prev) prev.focus();
+              }
+            };
+          });
+        };
+        // Initial setup
+        setTimeout(attachArrowNav, 700);
+
+        // Observe DOM changes to re-attach listeners if buttons change
+        var observer = new window.MutationObserver(function () {
+          attachArrowNav();
+        });
+        observer.observe(this.widgetDiv, {
+          childList: true,
+          subtree: true
+        });
+        // Clean up observer on unmount
+        this._arrowNavObserver = observer;
+      }
+
+      // When focus comes to the content, wait for .wxc-meeting__inner-meeting and move focus
+      if (this.widgetDiv) {
+        var contentDiv = this.widgetDiv.querySelector('.webex-meetings-widget__content');
+        if (contentDiv) {
+          contentDiv.addEventListener('focus', function () {
+            // Poll for .wxc-meeting__inner-meeting up to 500ms
+            var attempts = 0;
+            var tryFocusInnerMeeting = function tryFocusInnerMeeting() {
+              var innerMeeting = contentDiv.querySelector('.wxc-in-meeting__media-container');
+              if (innerMeeting) {
+                innerMeeting.tabIndex = 0;
+                innerMeeting.focus();
+                // On Tab, move to first interactive element
+                var handleTab = function handleTab(evt) {
+                  if (evt.key === 'Tab' && !evt.shiftKey) {
+                    evt.preventDefault();
+                    var nextInteractive = innerMeeting.querySelector('button, [tabindex]:not([tabindex="-1"])');
+                    if (nextInteractive) {
+                      nextInteractive.focus();
+                    }
+                    innerMeeting.removeEventListener('keydown', handleTab);
+                  }
+                };
+                innerMeeting.addEventListener('keydown', handleTab);
+              } else if (attempts < 10) {
+                attempts++;
+                setTimeout(tryFocusInnerMeeting, 50);
+              }
+            };
+            tryFocusInnerMeeting();
+          });
+        }
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _meeting$localAudio, _meeting$localVideo;
+      var _meeting$localAudio,
+        _meeting$localVideo,
+        _this2 = this;
       var meeting = this.props.meeting;
       var audioPermission = (_meeting$localAudio = meeting.localAudio) === null || _meeting$localAudio === void 0 ? void 0 : _meeting$localAudio.permission;
       var videoPermission = (_meeting$localVideo = meeting.localVideo) === null || _meeting$localVideo === void 0 ? void 0 : _meeting$localVideo.permission;
@@ -56994,9 +57142,22 @@ var WebexMeetingsWidget = /*#__PURE__*/function (_Component) {
       }
       return /*#__PURE__*/S.createElement("div", {
         className: "webex-meetings-widget ".concat(this.props.className),
-        style: this.props.style
+        style: this.props.style,
+        ref: function ref(div) {
+          _this2.widgetDiv = div;
+        },
+        tabIndex: 0
       }, content);
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // Clean up MutationObserver if present
+      if (this._arrowNavObserver) {
+        this._arrowNavObserver.disconnect();
+        this._arrowNavObserver = null;
+      }
+    }
   }]);
 }(Component);
 WebexMeetingsWidget.propTypes = {
@@ -57031,7 +57192,7 @@ var WebexMeetings = Ic(Pc(WebexMeetingsWidget), function (props) {
     },
     config: {
       appName: appName,
-      appVersion: "1.28.0",
+      appVersion: "1.28.1",
       fedramp: props.fedramp,
       meetings: {
         experimental: {