aria-live-storybook-addon/dist/esm/withRoundTrip.js

Observe and log aria-live region changes in the addon panel

function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import { useChannel } from "@storybook/addons";
import { EVENTS } from "./constants";

function createChange(options) {
  var now = new Date();
  var time = now.toLocaleDateString(navigator.language, {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  });
  return _objectSpread(_objectSpread({}, options), {}, {
    time: time
  });
} // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants


function isElement(node) {
  return node && node.nodeType === 1;
}

export var withRoundTrip = function withRoundTrip(storyFn) {
  var emit = useChannel({});
  React.useEffect(function () {
    var observer = new MutationObserver(function (mutationsList) {
      var _iterator = _createForOfIteratorHelper(mutationsList),
          _step;

      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var mutation = _step.value;
          var assertiveness = isElement(mutation.target) ? mutation.target.getAttribute("aria-live") : null;
          if (mutation.type !== "childList") return;

          if (mutation.addedNodes.length && assertiveness) {
            emit(EVENTS.ADD_CHANGE, createChange({
              text: mutation.target.textContent,
              assertiveness: assertiveness
            }));
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
    });
    var politeAriaLiveRegion = document.querySelector("[aria-live='polite']");
    var assertiveAriaLiveRegion = document.querySelector("[aria-live='assertive']");

    if (politeAriaLiveRegion) {
      observer.observe(politeAriaLiveRegion, {
        childList: true,
        subtree: true,
        attributes: true
      });
    }

    if (assertiveAriaLiveRegion) {
      observer.observe(assertiveAriaLiveRegion, {
        childList: true,
        subtree: true,
        attributes: true
      });
    }

    return function () {
      observer.disconnect();
    };
  });
  return storyFn();
};