@getflip/swirl-components 0.1.0 → 0.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 The Swirl Web Component Library provides a framework-agnostic foundation for UI
 development for the Flip App. It implements a set of solid UI components that
-are composable, performant, accessbile and well-tested, while also satisfying
+are composable, performant, accessible and well-tested, while also satisfying
 the UX and UI design requirements of the Swirl Design System.
 
 [Documentation](https://swirl-storybook.flip-app.dev/)

package/dist/cjs/_commonjsHelpers-a5111d61.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.commonjsRequire = commonjsRequire;
+exports.createCommonjsModule = createCommonjsModule;
+exports.getAugmentedNamespace = getAugmentedNamespace;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+
+//# sourceMappingURL=_commonjsHelpers-a5111d61.js.map

package/dist/cjs/_commonjsHelpers-a5111d61.js.map

@@ -0,0 +1 @@
+{"file":"_commonjsHelpers-a5111d61.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/a11y-dialog.esm-4a3287ed.js

@@ -0,0 +1,409 @@
+'use strict';
+
+var focusableSelectors = [
+  'a[href]:not([tabindex^="-"])',
+  'area[href]:not([tabindex^="-"])',
+  'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
+  'input[type="radio"]:not([disabled]):not([tabindex^="-"])',
+  'select:not([disabled]):not([tabindex^="-"])',
+  'textarea:not([disabled]):not([tabindex^="-"])',
+  'button:not([disabled]):not([tabindex^="-"])',
+  'iframe:not([tabindex^="-"])',
+  'audio[controls]:not([tabindex^="-"])',
+  'video[controls]:not([tabindex^="-"])',
+  '[contenteditable]:not([tabindex^="-"])',
+  '[tabindex]:not([tabindex^="-"])',
+];
+
+var TAB_KEY = 'Tab';
+var ESCAPE_KEY = 'Escape';
+
+/**
+ * Define the constructor to instantiate a dialog
+ *
+ * @constructor
+ * @param {Element} element
+ */
+function A11yDialog(element) {
+  // Prebind the functions that will be bound in addEventListener and
+  // removeEventListener to avoid losing references
+  this._show = this.show.bind(this);
+  this._hide = this.hide.bind(this);
+  this._maintainFocus = this._maintainFocus.bind(this);
+  this._bindKeypress = this._bindKeypress.bind(this);
+
+  this.$el = element;
+  this.shown = false;
+  this._id = this.$el.getAttribute('data-a11y-dialog') || this.$el.id;
+  this._previouslyFocused = null;
+  this._listeners = {};
+
+  // Initialise everything needed for the dialog to work properly
+  this.create();
+}
+
+/**
+ * Set up everything necessary for the dialog to be functioning
+ *
+ * @param {(NodeList | Element | string)} targets
+ * @return {this}
+ */
+A11yDialog.prototype.create = function () {
+  this.$el.setAttribute('aria-hidden', true);
+  this.$el.setAttribute('aria-modal', true);
+  this.$el.setAttribute('tabindex', -1);
+
+  if (!this.$el.hasAttribute('role')) {
+    this.$el.setAttribute('role', 'dialog');
+  }
+
+  // Keep a collection of dialog openers, each of which will be bound a click
+  // event listener to open the dialog
+  this._openers = $$('[data-a11y-dialog-show="' + this._id + '"]');
+  this._openers.forEach(
+    function (opener) {
+      opener.addEventListener('click', this._show);
+    }.bind(this)
+  );
+
+  // Keep a collection of dialog closers, each of which will be bound a click
+  // event listener to close the dialog
+  const $el = this.$el;
+
+  this._closers = $$('[data-a11y-dialog-hide]', this.$el)
+    // This filter is necessary in case there are nested dialogs, so that
+    // only closers from the current dialog are retrieved and effective
+    .filter(function (closer) {
+      // Testing for `[aria-modal="true"]` is not enough since this attribute
+      // and the collect of closers is done at instantation time, when nested
+      // dialogs might not have yet been instantiated. Note that if the dialogs
+      // are manually instantiated, this could still fail because none of these
+      // selectors would match; this would cause closers to close all parent
+      // dialogs instead of just the current one
+      return closer.closest('[aria-modal="true"], [data-a11y-dialog]') === $el
+    })
+    .concat($$('[data-a11y-dialog-hide="' + this._id + '"]'));
+
+  this._closers.forEach(
+    function (closer) {
+      closer.addEventListener('click', this._hide);
+    }.bind(this)
+  );
+
+  // Execute all callbacks registered for the `create` event
+  this._fire('create');
+
+  return this
+};
+
+/**
+ * Show the dialog element, disable all the targets (siblings), trap the
+ * current focus within it, listen for some specific key presses and fire all
+ * registered callbacks for `show` event
+ *
+ * @param {CustomEvent} event
+ * @return {this}
+ */
+A11yDialog.prototype.show = function (event) {
+  // If the dialog is already open, abort
+  if (this.shown) {
+    return this
+  }
+
+  // Keep a reference to the currently focused element to be able to restore
+  // it later
+  this._previouslyFocused = document.activeElement;
+  this.$el.removeAttribute('aria-hidden');
+  this.shown = true;
+
+  // Set the focus to the dialog element
+  moveFocusToDialog(this.$el);
+
+  // Bind a focus event listener to the body element to make sure the focus
+  // stays trapped inside the dialog while open, and start listening for some
+  // specific key presses (TAB and ESC)
+  document.body.addEventListener('focus', this._maintainFocus, true);
+  document.addEventListener('keydown', this._bindKeypress);
+
+  // Execute all callbacks registered for the `show` event
+  this._fire('show', event);
+
+  return this
+};
+
+/**
+ * Hide the dialog element, enable all the targets (siblings), restore the
+ * focus to the previously active element, stop listening for some specific
+ * key presses and fire all registered callbacks for `hide` event
+ *
+ * @param {CustomEvent} event
+ * @return {this}
+ */
+A11yDialog.prototype.hide = function (event) {
+  // If the dialog is already closed, abort
+  if (!this.shown) {
+    return this
+  }
+
+  this.shown = false;
+  this.$el.setAttribute('aria-hidden', 'true');
+
+  // If there was a focused element before the dialog was opened (and it has a
+  // `focus` method), restore the focus back to it
+  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/108
+  if (this._previouslyFocused && this._previouslyFocused.focus) {
+    this._previouslyFocused.focus();
+  }
+
+  // Remove the focus event listener to the body element and stop listening
+  // for specific key presses
+  document.body.removeEventListener('focus', this._maintainFocus, true);
+  document.removeEventListener('keydown', this._bindKeypress);
+
+  // Execute all callbacks registered for the `hide` event
+  this._fire('hide', event);
+
+  return this
+};
+
+/**
+ * Destroy the current instance (after making sure the dialog has been hidden)
+ * and remove all associated listeners from dialog openers and closers
+ *
+ * @return {this}
+ */
+A11yDialog.prototype.destroy = function () {
+  // Hide the dialog to avoid destroying an open instance
+  this.hide();
+
+  // Remove the click event listener from all dialog openers
+  this._openers.forEach(
+    function (opener) {
+      opener.removeEventListener('click', this._show);
+    }.bind(this)
+  );
+
+  // Remove the click event listener from all dialog closers
+  this._closers.forEach(
+    function (closer) {
+      closer.removeEventListener('click', this._hide);
+    }.bind(this)
+  );
+
+  // Execute all callbacks registered for the `destroy` event
+  this._fire('destroy');
+
+  // Keep an object of listener types mapped to callback functions
+  this._listeners = {};
+
+  return this
+};
+
+/**
+ * Register a new callback for the given event type
+ *
+ * @param {string} type
+ * @param {Function} handler
+ */
+A11yDialog.prototype.on = function (type, handler) {
+  if (typeof this._listeners[type] === 'undefined') {
+    this._listeners[type] = [];
+  }
+
+  this._listeners[type].push(handler);
+
+  return this
+};
+
+/**
+ * Unregister an existing callback for the given event type
+ *
+ * @param {string} type
+ * @param {Function} handler
+ */
+A11yDialog.prototype.off = function (type, handler) {
+  var index = (this._listeners[type] || []).indexOf(handler);
+
+  if (index > -1) {
+    this._listeners[type].splice(index, 1);
+  }
+
+  return this
+};
+
+/**
+ * Iterate over all registered handlers for given type and call them all with
+ * the dialog element as first argument, event as second argument (if any). Also
+ * dispatch a custom event on the DOM element itself to make it possible to
+ * react to the lifecycle of auto-instantiated dialogs.
+ *
+ * @access private
+ * @param {string} type
+ * @param {CustomEvent} event
+ */
+A11yDialog.prototype._fire = function (type, event) {
+  var listeners = this._listeners[type] || [];
+  var domEvent = new CustomEvent(type, { detail: event });
+
+  this.$el.dispatchEvent(domEvent);
+
+  listeners.forEach(
+    function (listener) {
+      listener(this.$el, event);
+    }.bind(this)
+  );
+};
+
+/**
+ * Private event handler used when listening to some specific key presses
+ * (namely ESCAPE and TAB)
+ *
+ * @access private
+ * @param {Event} event
+ */
+A11yDialog.prototype._bindKeypress = function (event) {
+  // This is an escape hatch in case there are nested dialogs, so the keypresses
+  // are only reacted to for the most recent one
+  const focused = document.activeElement;
+  if (focused && focused.closest('[aria-modal="true"]') !== this.$el) return
+
+  // If the dialog is shown and the ESCAPE key is being pressed, prevent any
+  // further effects from the ESCAPE key and hide the dialog, unless its role
+  // is 'alertdialog', which should be modal
+  if (
+    this.shown &&
+    event.key === ESCAPE_KEY &&
+    this.$el.getAttribute('role') !== 'alertdialog'
+  ) {
+    event.preventDefault();
+    this.hide(event);
+  }
+
+  // If the dialog is shown and the TAB key is being pressed, make sure the
+  // focus stays trapped within the dialog element
+  if (this.shown && event.key === TAB_KEY) {
+    trapTabKey(this.$el, event);
+  }
+};
+
+/**
+ * Private event handler used when making sure the focus stays within the
+ * currently open dialog
+ *
+ * @access private
+ * @param {Event} event
+ */
+A11yDialog.prototype._maintainFocus = function (event) {
+  // If the dialog is shown and the focus is not within a dialog element (either
+  // this one or another one in case of nested dialogs) or within an element
+  // with the `data-a11y-dialog-focus-trap-ignore` attribute, move it back to
+  // its first focusable child.
+  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
+  if (
+    this.shown &&
+    !event.target.closest('[aria-modal="true"]') &&
+    !event.target.closest('[data-a11y-dialog-ignore-focus-trap]')
+  ) {
+    moveFocusToDialog(this.$el);
+  }
+};
+
+/**
+ * Convert a NodeList into an array
+ *
+ * @param {NodeList} collection
+ * @return {Array<Element>}
+ */
+function toArray(collection) {
+  return Array.prototype.slice.call(collection)
+}
+
+/**
+ * Query the DOM for nodes matching the given selector, scoped to context (or
+ * the whole document)
+ *
+ * @param {String} selector
+ * @param {Element} [context = document]
+ * @return {Array<Element>}
+ */
+function $$(selector, context) {
+  return toArray((context || document).querySelectorAll(selector))
+}
+
+/**
+ * Set the focus to the first element with `autofocus` with the element or the
+ * element itself
+ *
+ * @param {Element} node
+ */
+function moveFocusToDialog(node) {
+  var focused = node.querySelector('[autofocus]') || node;
+
+  focused.focus();
+}
+
+/**
+ * Get the focusable children of the given element
+ *
+ * @param {Element} node
+ * @return {Array<Element>}
+ */
+function getFocusableChildren(node) {
+  return $$(focusableSelectors.join(','), node).filter(function (child) {
+    return !!(
+      child.offsetWidth ||
+      child.offsetHeight ||
+      child.getClientRects().length
+    )
+  })
+}
+
+/**
+ * Trap the focus inside the given element
+ *
+ * @param {Element} node
+ * @param {Event} event
+ */
+function trapTabKey(node, event) {
+  var focusableChildren = getFocusableChildren(node);
+  var focusedItemIndex = focusableChildren.indexOf(document.activeElement);
+
+  // If the SHIFT key is being pressed while tabbing (moving backwards) and
+  // the currently focused item is the first one, move the focus to the last
+  // focusable item from the dialog element
+  if (event.shiftKey && focusedItemIndex === 0) {
+    focusableChildren[focusableChildren.length - 1].focus();
+    event.preventDefault();
+    // If the SHIFT key is not being pressed (moving forwards) and the currently
+    // focused item is the last one, move the focus to the first focusable item
+    // from the dialog element
+  } else if (
+    !event.shiftKey &&
+    focusedItemIndex === focusableChildren.length - 1
+  ) {
+    focusableChildren[0].focus();
+    event.preventDefault();
+  }
+}
+
+function instantiateDialogs() {
+  $$('[data-a11y-dialog]').forEach(function (node) {
+    new A11yDialog(node);
+  });
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', instantiateDialogs);
+  } else {
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(instantiateDialogs);
+    } else {
+      window.setTimeout(instantiateDialogs, 16);
+    }
+  }
+}
+
+exports.A11yDialog = A11yDialog;
+
+//# sourceMappingURL=a11y-dialog.esm-4a3287ed.js.map

package/dist/cjs/a11y-dialog.esm-4a3287ed.js.map

@@ -0,0 +1 @@
+{"file":"a11y-dialog.esm-4a3287ed.js","mappings":"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","names":[],"sources":["../../node_modules/a11y-dialog/dist/a11y-dialog.esm.js"],"sourcesContent":["var focusableSelectors = [\n  'a[href]:not([tabindex^=\"-\"])',\n  'area[href]:not([tabindex^=\"-\"])',\n  'input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])',\n  'input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])',\n  'select:not([disabled]):not([tabindex^=\"-\"])',\n  'textarea:not([disabled]):not([tabindex^=\"-\"])',\n  'button:not([disabled]):not([tabindex^=\"-\"])',\n  'iframe:not([tabindex^=\"-\"])',\n  'audio[controls]:not([tabindex^=\"-\"])',\n  'video[controls]:not([tabindex^=\"-\"])',\n  '[contenteditable]:not([tabindex^=\"-\"])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n];\n\nvar TAB_KEY = 'Tab';\nvar ESCAPE_KEY = 'Escape';\n\n/**\n * Define the constructor to instantiate a dialog\n *\n * @constructor\n * @param {Element} element\n */\nfunction A11yDialog(element) {\n  // Prebind the functions that will be bound in addEventListener and\n  // removeEventListener to avoid losing references\n  this._show = this.show.bind(this);\n  this._hide = this.hide.bind(this);\n  this._maintainFocus = this._maintainFocus.bind(this);\n  this._bindKeypress = this._bindKeypress.bind(this);\n\n  this.$el = element;\n  this.shown = false;\n  this._id = this.$el.getAttribute('data-a11y-dialog') || this.$el.id;\n  this._previouslyFocused = null;\n  this._listeners = {};\n\n  // Initialise everything needed for the dialog to work properly\n  this.create();\n}\n\n/**\n * Set up everything necessary for the dialog to be functioning\n *\n * @param {(NodeList | Element | string)} targets\n * @return {this}\n */\nA11yDialog.prototype.create = function () {\n  this.$el.setAttribute('aria-hidden', true);\n  this.$el.setAttribute('aria-modal', true);\n  this.$el.setAttribute('tabindex', -1);\n\n  if (!this.$el.hasAttribute('role')) {\n    this.$el.setAttribute('role', 'dialog');\n  }\n\n  // Keep a collection of dialog openers, each of which will be bound a click\n  // event listener to open the dialog\n  this._openers = $$('[data-a11y-dialog-show=\"' + this._id + '\"]');\n  this._openers.forEach(\n    function (opener) {\n      opener.addEventListener('click', this._show);\n    }.bind(this)\n  );\n\n  // Keep a collection of dialog closers, each of which will be bound a click\n  // event listener to close the dialog\n  const $el = this.$el;\n\n  this._closers = $$('[data-a11y-dialog-hide]', this.$el)\n    // This filter is necessary in case there are nested dialogs, so that\n    // only closers from the current dialog are retrieved and effective\n    .filter(function (closer) {\n      // Testing for `[aria-modal=\"true\"]` is not enough since this attribute\n      // and the collect of closers is done at instantation time, when nested\n      // dialogs might not have yet been instantiated. Note that if the dialogs\n      // are manually instantiated, this could still fail because none of these\n      // selectors would match; this would cause closers to close all parent\n      // dialogs instead of just the current one\n      return closer.closest('[aria-modal=\"true\"], [data-a11y-dialog]') === $el\n    })\n    .concat($$('[data-a11y-dialog-hide=\"' + this._id + '\"]'));\n\n  this._closers.forEach(\n    function (closer) {\n      closer.addEventListener('click', this._hide);\n    }.bind(this)\n  );\n\n  // Execute all callbacks registered for the `create` event\n  this._fire('create');\n\n  return this\n};\n\n/**\n * Show the dialog element, disable all the targets (siblings), trap the\n * current focus within it, listen for some specific key presses and fire all\n * registered callbacks for `show` event\n *\n * @param {CustomEvent} event\n * @return {this}\n */\nA11yDialog.prototype.show = function (event) {\n  // If the dialog is already open, abort\n  if (this.shown) {\n    return this\n  }\n\n  // Keep a reference to the currently focused element to be able to restore\n  // it later\n  this._previouslyFocused = document.activeElement;\n  this.$el.removeAttribute('aria-hidden');\n  this.shown = true;\n\n  // Set the focus to the dialog element\n  moveFocusToDialog(this.$el);\n\n  // Bind a focus event listener to the body element to make sure the focus\n  // stays trapped inside the dialog while open, and start listening for some\n  // specific key presses (TAB and ESC)\n  document.body.addEventListener('focus', this._maintainFocus, true);\n  document.addEventListener('keydown', this._bindKeypress);\n\n  // Execute all callbacks registered for the `show` event\n  this._fire('show', event);\n\n  return this\n};\n\n/**\n * Hide the dialog element, enable all the targets (siblings), restore the\n * focus to the previously active element, stop listening for some specific\n * key presses and fire all registered callbacks for `hide` event\n *\n * @param {CustomEvent} event\n * @return {this}\n */\nA11yDialog.prototype.hide = function (event) {\n  // If the dialog is already closed, abort\n  if (!this.shown) {\n    return this\n  }\n\n  this.shown = false;\n  this.$el.setAttribute('aria-hidden', 'true');\n\n  // If there was a focused element before the dialog was opened (and it has a\n  // `focus` method), restore the focus back to it\n  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/108\n  if (this._previouslyFocused && this._previouslyFocused.focus) {\n    this._previouslyFocused.focus();\n  }\n\n  // Remove the focus event listener to the body element and stop listening\n  // for specific key presses\n  document.body.removeEventListener('focus', this._maintainFocus, true);\n  document.removeEventListener('keydown', this._bindKeypress);\n\n  // Execute all callbacks registered for the `hide` event\n  this._fire('hide', event);\n\n  return this\n};\n\n/**\n * Destroy the current instance (after making sure the dialog has been hidden)\n * and remove all associated listeners from dialog openers and closers\n *\n * @return {this}\n */\nA11yDialog.prototype.destroy = function () {\n  // Hide the dialog to avoid destroying an open instance\n  this.hide();\n\n  // Remove the click event listener from all dialog openers\n  this._openers.forEach(\n    function (opener) {\n      opener.removeEventListener('click', this._show);\n    }.bind(this)\n  );\n\n  // Remove the click event listener from all dialog closers\n  this._closers.forEach(\n    function (closer) {\n      closer.removeEventListener('click', this._hide);\n    }.bind(this)\n  );\n\n  // Execute all callbacks registered for the `destroy` event\n  this._fire('destroy');\n\n  // Keep an object of listener types mapped to callback functions\n  this._listeners = {};\n\n  return this\n};\n\n/**\n * Register a new callback for the given event type\n *\n * @param {string} type\n * @param {Function} handler\n */\nA11yDialog.prototype.on = function (type, handler) {\n  if (typeof this._listeners[type] === 'undefined') {\n    this._listeners[type] = [];\n  }\n\n  this._listeners[type].push(handler);\n\n  return this\n};\n\n/**\n * Unregister an existing callback for the given event type\n *\n * @param {string} type\n * @param {Function} handler\n */\nA11yDialog.prototype.off = function (type, handler) {\n  var index = (this._listeners[type] || []).indexOf(handler);\n\n  if (index > -1) {\n    this._listeners[type].splice(index, 1);\n  }\n\n  return this\n};\n\n/**\n * Iterate over all registered handlers for given type and call them all with\n * the dialog element as first argument, event as second argument (if any). Also\n * dispatch a custom event on the DOM element itself to make it possible to\n * react to the lifecycle of auto-instantiated dialogs.\n *\n * @access private\n * @param {string} type\n * @param {CustomEvent} event\n */\nA11yDialog.prototype._fire = function (type, event) {\n  var listeners = this._listeners[type] || [];\n  var domEvent = new CustomEvent(type, { detail: event });\n\n  this.$el.dispatchEvent(domEvent);\n\n  listeners.forEach(\n    function (listener) {\n      listener(this.$el, event);\n    }.bind(this)\n  );\n};\n\n/**\n * Private event handler used when listening to some specific key presses\n * (namely ESCAPE and TAB)\n *\n * @access private\n * @param {Event} event\n */\nA11yDialog.prototype._bindKeypress = function (event) {\n  // This is an escape hatch in case there are nested dialogs, so the keypresses\n  // are only reacted to for the most recent one\n  const focused = document.activeElement;\n  if (focused && focused.closest('[aria-modal=\"true\"]') !== this.$el) return\n\n  // If the dialog is shown and the ESCAPE key is being pressed, prevent any\n  // further effects from the ESCAPE key and hide the dialog, unless its role\n  // is 'alertdialog', which should be modal\n  if (\n    this.shown &&\n    event.key === ESCAPE_KEY &&\n    this.$el.getAttribute('role') !== 'alertdialog'\n  ) {\n    event.preventDefault();\n    this.hide(event);\n  }\n\n  // If the dialog is shown and the TAB key is being pressed, make sure the\n  // focus stays trapped within the dialog element\n  if (this.shown && event.key === TAB_KEY) {\n    trapTabKey(this.$el, event);\n  }\n};\n\n/**\n * Private event handler used when making sure the focus stays within the\n * currently open dialog\n *\n * @access private\n * @param {Event} event\n */\nA11yDialog.prototype._maintainFocus = function (event) {\n  // If the dialog is shown and the focus is not within a dialog element (either\n  // this one or another one in case of nested dialogs) or within an element\n  // with the `data-a11y-dialog-focus-trap-ignore` attribute, move it back to\n  // its first focusable child.\n  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/177\n  if (\n    this.shown &&\n    !event.target.closest('[aria-modal=\"true\"]') &&\n    !event.target.closest('[data-a11y-dialog-ignore-focus-trap]')\n  ) {\n    moveFocusToDialog(this.$el);\n  }\n};\n\n/**\n * Convert a NodeList into an array\n *\n * @param {NodeList} collection\n * @return {Array<Element>}\n */\nfunction toArray(collection) {\n  return Array.prototype.slice.call(collection)\n}\n\n/**\n * Query the DOM for nodes matching the given selector, scoped to context (or\n * the whole document)\n *\n * @param {String} selector\n * @param {Element} [context = document]\n * @return {Array<Element>}\n */\nfunction $$(selector, context) {\n  return toArray((context || document).querySelectorAll(selector))\n}\n\n/**\n * Set the focus to the first element with `autofocus` with the element or the\n * element itself\n *\n * @param {Element} node\n */\nfunction moveFocusToDialog(node) {\n  var focused = node.querySelector('[autofocus]') || node;\n\n  focused.focus();\n}\n\n/**\n * Get the focusable children of the given element\n *\n * @param {Element} node\n * @return {Array<Element>}\n */\nfunction getFocusableChildren(node) {\n  return $$(focusableSelectors.join(','), node).filter(function (child) {\n    return !!(\n      child.offsetWidth ||\n      child.offsetHeight ||\n      child.getClientRects().length\n    )\n  })\n}\n\n/**\n * Trap the focus inside the given element\n *\n * @param {Element} node\n * @param {Event} event\n */\nfunction trapTabKey(node, event) {\n  var focusableChildren = getFocusableChildren(node);\n  var focusedItemIndex = focusableChildren.indexOf(document.activeElement);\n\n  // If the SHIFT key is being pressed while tabbing (moving backwards) and\n  // the currently focused item is the first one, move the focus to the last\n  // focusable item from the dialog element\n  if (event.shiftKey && focusedItemIndex === 0) {\n    focusableChildren[focusableChildren.length - 1].focus();\n    event.preventDefault();\n    // If the SHIFT key is not being pressed (moving forwards) and the currently\n    // focused item is the last one, move the focus to the first focusable item\n    // from the dialog element\n  } else if (\n    !event.shiftKey &&\n    focusedItemIndex === focusableChildren.length - 1\n  ) {\n    focusableChildren[0].focus();\n    event.preventDefault();\n  }\n}\n\nfunction instantiateDialogs() {\n  $$('[data-a11y-dialog]').forEach(function (node) {\n    new A11yDialog(node);\n  });\n}\n\nif (typeof document !== 'undefined') {\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', instantiateDialogs);\n  } else {\n    if (window.requestAnimationFrame) {\n      window.requestAnimationFrame(instantiateDialogs);\n    } else {\n      window.setTimeout(instantiateDialogs, 16);\n    }\n  }\n}\n\nexport { A11yDialog as default };\n"],"version":3}