@nrk/core-dialog - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

core-dialog.cjs.js

 'use strict';
 
 var name = "@nrk/core-dialog";
-var version = "1.0.13";
+var version = "1.0.14";
 
@@ -90,2 +90,3 @@ var IS_BROWSER = typeof window !== 'undefined';
   return queryAll(dialogs).map(function (dialog) {
+    var hasFocusable = queryAll(FOCUSABLE_ELEMENTS, dialog).length;
     var hasBackdrop = (dialog.nextElementSibling || {}).nodeName === 'BACKDROP';
@@ -95,7 +96,7 @@ var isStrict = typeof options.strict === 'boolean' ? options.strict : dialog.getAttribute(UUID) === 'true';
     dialog.setAttribute(UUID, isStrict);
-    dialog.setAttribute('tabindex', -1);
     dialog.setAttribute('role', 'dialog');
     dialog.setAttribute('aria-modal', true);
     dialog.setAttribute('aria-label', options.label || dialog.getAttribute('aria-label'));
-    hasBackdrop || dialog.insertAdjacentElement('afterend', document.createElement('backdrop'));
+    if (!hasBackdrop) { dialog.insertAdjacentElement('afterend', document.createElement('backdrop')); }
+    if (!hasFocusable) { console.warn('@nrk/core-dialog initialized without focusable elements. Please add [tabindex="-1"] the main element of', dialog); }
 
@@ -189,18 +190,14 @@ setOpen(dialog, options.open, options.opener);
 
-function getVisibleElements (elements) {
-  return elements.filter(function (el) { return el.clientWidth &&
-    el.clientHeight &&
-    window.getComputedStyle(el).getPropertyValue('visibility') !== 'hidden'; }
-  )
+function isVisible (el) {
+  return el.clientWidth && el.clientHeight &&
+    window.getComputedStyle(el).getPropertyValue('visibility') !== 'hidden'
 }
 
-function queryFocusable (context) {
-  return getVisibleElements(queryAll(FOCUSABLE_ELEMENTS, context))
-}
-
 function setFocus (dialog) {
   if (dialog.contains(document.activeElement)) { return } // Do not move if focus is already inside
-  var autofocusElement = getVisibleElements(queryAll('[autofocus]', dialog))[0];
-  var focusElement = autofocusElement || queryFocusable(dialog)[0] || dialog;
-  focusElement.focus();
+  queryAll('[autofocus]', dialog)
+    .concat(queryAll(FOCUSABLE_ELEMENTS, dialog))
+    .concat(dialog)
+    .filter(isVisible)
+    .every(function (el) { return el.focus(); }); // Only focuses the first visible element
 }
@@ -215,3 +212,3 @@
 function keepFocus (dialog, event) {
-  var focusable = queryFocusable(dialog);
+  var focusable = queryAll(FOCUSABLE_ELEMENTS, dialog).filter(isVisible);
   var onEdge = focusable[event.shiftKey ? 0 : focusable.length - 1];
@@ -218,0 +215,0 @@

core-dialog.js

@@ -21,2 +21,3 @@ import { name, version } from './package.json'
   return queryAll(dialogs).map((dialog) => {
+    const hasFocusable = queryAll(FOCUSABLE_ELEMENTS, dialog).length
     const hasBackdrop = (dialog.nextElementSibling || {}).nodeName === 'BACKDROP'
@@ -26,7 +27,7 @@ const isStrict = typeof options.strict === 'boolean' ? options.strict : dialog.getAttribute(UUID) === 'true'
     dialog.setAttribute(UUID, isStrict)
-    dialog.setAttribute('tabindex', -1)
     dialog.setAttribute('role', 'dialog')
     dialog.setAttribute('aria-modal', true)
     dialog.setAttribute('aria-label', options.label || dialog.getAttribute('aria-label'))
-    hasBackdrop || dialog.insertAdjacentElement('afterend', document.createElement('backdrop'))
+    if (!hasBackdrop) dialog.insertAdjacentElement('afterend', document.createElement('backdrop'))
+    if (!hasFocusable) console.warn('@nrk/core-dialog initialized without focusable elements. Please add [tabindex="-1"] the main element of', dialog)
 
@@ -120,19 +121,14 @@ setOpen(dialog, options.open, options.opener)
 
-function getVisibleElements (elements) {
-  return elements.filter((el) =>
-    el.clientWidth &&
-    el.clientHeight &&
+function isVisible (el) {
+  return el.clientWidth && el.clientHeight &&
     window.getComputedStyle(el).getPropertyValue('visibility') !== 'hidden'
-  )
 }
 
-function queryFocusable (context) {
-  return getVisibleElements(queryAll(FOCUSABLE_ELEMENTS, context))
-}
-
 function setFocus (dialog) {
   if (dialog.contains(document.activeElement)) return // Do not move if focus is already inside
-  const autofocusElement = getVisibleElements(queryAll('[autofocus]', dialog))[0]
-  const focusElement = autofocusElement || queryFocusable(dialog)[0] || dialog
-  focusElement.focus()
+  queryAll('[autofocus]', dialog)
+    .concat(queryAll(FOCUSABLE_ELEMENTS, dialog))
+    .concat(dialog)
+    .filter(isVisible)
+    .every(el => el.focus()) // Only focuses the first visible element
 }
@@ -147,3 +143,3 @@
 function keepFocus (dialog, event) {
-  const focusable = queryFocusable(dialog)
+  const focusable = queryAll(FOCUSABLE_ELEMENTS, dialog).filter(isVisible)
   const onEdge = focusable[event.shiftKey ? 0 : focusable.length - 1]
@@ -150,0 +146,0 @@

core-dialog.jsx.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-dialog v1.0.13 - Copyright (c) 2017-2018 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.CoreDialog=e(t.React,t.PropTypes)}(this,function(u,t){"use strict";u=u&&u.hasOwnProperty("default")?u.default:u,t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,r=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}());function n(t,e,n,o){(void 0===o&&(o=!1),"undefined"==typeof window||window[t=t+"-"+e])||(r||"object"!=typeof o||(o=Boolean(o.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,o))}var p,f="prevent_recursive_dispatch_maximum_callstack";function g(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var a="data-@nrk/core-dialog-1.0.13".replace(/\W+/g,"-"),l=27,s=9,b=a+"-opener",o="\n  [tabindex]:not([disabled]),\n  a:not([disabled]),\n  button:not([disabled]),\n  input:not([disabled]),\n  select:not([disabled]),\n  textarea:not([disabled])";function d(t,e){var o="object"==typeof e?e:{open:e};return g(t).map(function(t){var e="BACKDROP"===(t.nextElementSibling||{}).nodeName,n="boolean"==typeof o.strict?o.strict:"true"===t.getAttribute(a);return t.setAttribute(a,n),t.setAttribute("tabindex",-1),t.setAttribute("role","dialog"),t.setAttribute("aria-modal",!0),t.setAttribute("aria-label",o.label||t.getAttribute("aria-label")),e||t.insertAdjacentElement("afterend",document.createElement("backdrop")),h(t,o.open,o.opener),t})}n(a,"click",function(t){for(var e=t.target,n=void 0;e;e=e.parentElement){var o=e.getAttribute("data-core-dialog"),r=e.previousElementSibling,i=r&&"false"===r.getAttribute(a)&&(e=r);(n=n||i||"close"===o)?e.hasAttribute(a)&&h(e,!1):o&&d(document.getElementById(o),{open:!0,opener:e})}}),n(a,"transitionend",function(t){var e=t.target;e.hasAttribute&&e.hasAttribute(a)&&e.hasAttribute("open")?w(e):p&&setTimeout(function(){return p=p&&p.focus()},16)}),n(a,"keydown",function(t){var e,n,o,r,i=t.keyCode,u=(i===l||i===s)&&c();u&&i===s&&(n=t,o=y(e=u),r=o[n.shiftKey?0:o.length-1],n.target!==r&&e.contains(n.target)||(n.preventDefault(),o[n.shiftKey?o.length-1:0].focus())),u&&i===l&&"false"===u.getAttribute(a)&&(t.defaultPrevented||h(u,!1),t.preventDefault())});var v=function(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n},m=function(){return g("["+b+"]").sort(function(t,e){return t.getAttribute(b)>e.getAttribute(b)}).pop()},c=function(){return g("["+a+"][open]").sort(function(t,e){return v(t)>v(e)}).pop()};function h(t,e,n){void 0===n&&(n=document.activeElement);var o=t.hasAttribute("open"),r="boolean"==typeof e?e:"toggle"===e?!o:o,i=void 0!==window.HTMLDialogElement&&"function"==typeof t.show,u=o===r||function(t,e,n){void 0===n&&(n={});var o,r=""+f+e;if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?o=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(o=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);var i=t.dispatchEvent(o);return t[r]=null,i}(t,"dialog.toggle",{isOpen:o,willOpen:r}),a=u?r:t.hasAttribute("open"),l=t.nextElementSibling,s=u&&m();if(i?(t.open=!a,t[a?"show":"close"]()):t[a?"setAttribute":"removeAttribute"]("open",""),l[a?"removeAttribute":"setAttribute"]("hidden",""),u){var d=Number(s&&s.getAttribute(b))||0,c=Math.min(Math.max.apply(Math,g("*").map(v)),2e9);a?(t.style.zIndex=c+2,t.nextElementSibling.style.zIndex=c+1,n.setAttribute(b,d+1),w(t)):s&&(p=s).removeAttribute(b)}}function i(t){return t.filter(function(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")})}function y(t){return i(g(o,t))}function w(t){t.contains(document.activeElement)||(i(g("[autofocus]",t))[0]||y(t)[0]||t).focus()}var A=function(e){function i(t){e.call(this,t),this.onToggle=this.onToggle.bind(this)}e&&(i.__proto__=e),(i.prototype=Object.create(e&&e.prototype)).constructor=i;var t={defaultProps:{configurable:!0}};return t.defaultProps.get=function(){return{strict:null,onToggle:null}},i.prototype.componentDidMount=function(){d(this.el,this.props),this.el.addEventListener("dialog.toggle",this.onToggle)},i.prototype.componentDidUpdate=function(){d(this.el,this.props)},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("dialog.toggle",this.onToggle)},i.prototype.onToggle=function(t){this.props.onToggle&&this.props.onToggle(t)},i.prototype.render=function(){var n,o,t,e=this,r=(n=this.props,o=i.defaultProps,void 0===(t={ref:function(t){return e.el=t}})&&(t={}),Object.keys(n).reduce(function(t,e){return o.hasOwnProperty(e)||(t[e]=n[e]),t},t));return u.createElement("dialog",r,this.props.children)},Object.defineProperties(i,t),i}(u.Component);return A.propTypes={onToggle:t.func,strict:t.bool,open:t.bool},A});
+/*! @nrk/core-dialog v1.0.14 - Copyright (c) 2017-2018 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.CoreDialog=e(t.React,t.PropTypes)}(this,function(a,t){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a,t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,i=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}());function n(t,e,n,o){(void 0===o&&(o=!1),"undefined"==typeof window||window[t=t+"-"+e])||(i||"object"!=typeof o||(o=Boolean(o.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,o))}var p,f="prevent_recursive_dispatch_maximum_callstack";function g(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var u="data-@nrk/core-dialog-1.0.14".replace(/\W+/g,"-"),l=27,s=9,b=u+"-opener",d="\n  [tabindex]:not([disabled]),\n  a:not([disabled]),\n  button:not([disabled]),\n  input:not([disabled]),\n  select:not([disabled]),\n  textarea:not([disabled])";function c(t,e){var i="object"==typeof e?e:{open:e};return g(t).map(function(t){var e=g(d,t).length,n="BACKDROP"===(t.nextElementSibling||{}).nodeName,o="boolean"==typeof i.strict?i.strict:"true"===t.getAttribute(u);return t.setAttribute(u,o),t.setAttribute("role","dialog"),t.setAttribute("aria-modal",!0),t.setAttribute("aria-label",i.label||t.getAttribute("aria-label")),n||t.insertAdjacentElement("afterend",document.createElement("backdrop")),e||console.warn('@nrk/core-dialog initialized without focusable elements. Please add [tabindex="-1"] the main element of',t),y(t,i.open,i.opener),t})}n(u,"click",function(t){for(var e=t.target,n=void 0;e;e=e.parentElement){var o=e.getAttribute("data-core-dialog"),i=e.previousElementSibling,r=i&&"false"===i.getAttribute(u)&&(e=i);(n=n||r||"close"===o)?e.hasAttribute(u)&&y(e,!1):o&&c(document.getElementById(o),{open:!0,opener:e})}}),n(u,"transitionend",function(t){var e=t.target;e.hasAttribute&&e.hasAttribute(u)&&e.hasAttribute("open")?A(e):p&&setTimeout(function(){return p=p&&p.focus()},16)}),n(u,"keydown",function(t){var e,n,o,i,r=t.keyCode,a=(r===l||r===s)&&h();a&&r===s&&(n=t,o=g(d,e=a).filter(w),i=o[n.shiftKey?0:o.length-1],n.target!==i&&e.contains(n.target)||(n.preventDefault(),o[n.shiftKey?o.length-1:0].focus())),a&&r===l&&"false"===a.getAttribute(u)&&(t.defaultPrevented||y(a,!1),t.preventDefault())});var m=function(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n},v=function(){return g("["+b+"]").sort(function(t,e){return t.getAttribute(b)>e.getAttribute(b)}).pop()},h=function(){return g("["+u+"][open]").sort(function(t,e){return m(t)>m(e)}).pop()};function y(t,e,n){void 0===n&&(n=document.activeElement);var o=t.hasAttribute("open"),i="boolean"==typeof e?e:"toggle"===e?!o:o,r=void 0!==window.HTMLDialogElement&&"function"==typeof t.show,a=o===i||function(t,e,n){void 0===n&&(n={});var o,i=""+f+e;if(t[i])return!0;t[i]=!0,"function"==typeof window.CustomEvent?o=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(o=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);var r=t.dispatchEvent(o);return t[i]=null,r}(t,"dialog.toggle",{isOpen:o,willOpen:i}),u=a?i:t.hasAttribute("open"),l=t.nextElementSibling,s=a&&v();if(r?(t.open=!u,t[u?"show":"close"]()):t[u?"setAttribute":"removeAttribute"]("open",""),l[u?"removeAttribute":"setAttribute"]("hidden",""),a){var d=Number(s&&s.getAttribute(b))||0,c=Math.min(Math.max.apply(Math,g("*").map(m)),2e9);u?(t.style.zIndex=c+2,t.nextElementSibling.style.zIndex=c+1,n.setAttribute(b,d+1),A(t)):s&&(p=s).removeAttribute(b)}}function w(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}function A(t){t.contains(document.activeElement)||g("[autofocus]",t).concat(g(d,t)).concat(t).filter(w).every(function(t){return t.focus()})}var o=function(e){function r(t){e.call(this,t),this.onToggle=this.onToggle.bind(this)}e&&(r.__proto__=e),(r.prototype=Object.create(e&&e.prototype)).constructor=r;var t={defaultProps:{configurable:!0}};return t.defaultProps.get=function(){return{strict:null,onToggle:null}},r.prototype.componentDidMount=function(){c(this.el,this.props),this.el.addEventListener("dialog.toggle",this.onToggle)},r.prototype.componentDidUpdate=function(){c(this.el,this.props)},r.prototype.componentWillUnmount=function(){this.el.removeEventListener("dialog.toggle",this.onToggle)},r.prototype.onToggle=function(t){this.props.onToggle&&this.props.onToggle(t)},r.prototype.render=function(){var n,o,t,e=this,i=(n=this.props,o=r.defaultProps,void 0===(t={ref:function(t){return e.el=t}})&&(t={}),Object.keys(n).reduce(function(t,e){return o.hasOwnProperty(e)||(t[e]=n[e]),t},t));return a.createElement("dialog",i,this.props.children)},Object.defineProperties(r,t),r}(a.Component);return o.propTypes={onToggle:t.func,strict:t.bool,open:t.bool},o});
 //# sourceMappingURL=core-dialog.jsx.js.map

core-dialog.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-dialog v1.0.13 - Copyright (c) 2017-2018 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreDialog=e()}(this,function(){"use strict";var t="undefined"!=typeof window,o=(t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}());function e(t,e,n,i){(void 0===i&&(i=!1),"undefined"==typeof window||window[t=t+"-"+e])||(o||"object"!=typeof i||(i=Boolean(i.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,i))}var f,b="prevent_recursive_dispatch_maximum_callstack";function p(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var a="data-@nrk/core-dialog-1.0.13".replace(/\W+/g,"-"),d=27,l=9,v=a+"-opener",n="\n  [tabindex]:not([disabled]),\n  a:not([disabled]),\n  button:not([disabled]),\n  input:not([disabled]),\n  select:not([disabled]),\n  textarea:not([disabled])";function u(t,e){var i="object"==typeof e?e:{open:e};return p(t).map(function(t){var e="BACKDROP"===(t.nextElementSibling||{}).nodeName,n="boolean"==typeof i.strict?i.strict:"true"===t.getAttribute(a);return t.setAttribute(a,n),t.setAttribute("tabindex",-1),t.setAttribute("role","dialog"),t.setAttribute("aria-modal",!0),t.setAttribute("aria-label",i.label||t.getAttribute("aria-label")),e||t.insertAdjacentElement("afterend",document.createElement("backdrop")),s(t,i.open,i.opener),t})}e(a,"click",function(t){for(var e=t.target,n=void 0;e;e=e.parentElement){var i=e.getAttribute("data-core-dialog"),o=e.previousElementSibling,r=o&&"false"===o.getAttribute(a)&&(e=o);(n=n||r||"close"===i)?e.hasAttribute(a)&&s(e,!1):i&&u(document.getElementById(i),{open:!0,opener:e})}}),e(a,"transitionend",function(t){var e=t.target;e.hasAttribute&&e.hasAttribute(a)&&e.hasAttribute("open")?y(e):f&&setTimeout(function(){return f=f&&f.focus()},16)}),e(a,"keydown",function(t){var e,n,i,o,r=t.keyCode,u=(r===d||r===l)&&c();u&&r===l&&(n=t,i=A(e=u),o=i[n.shiftKey?0:i.length-1],n.target!==o&&e.contains(n.target)||(n.preventDefault(),i[n.shiftKey?i.length-1:0].focus())),u&&r===d&&"false"===u.getAttribute(a)&&(t.defaultPrevented||s(u,!1),t.preventDefault())});var m=function(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n},g=function(){return p("["+v+"]").sort(function(t,e){return t.getAttribute(v)>e.getAttribute(v)}).pop()},c=function(){return p("["+a+"][open]").sort(function(t,e){return m(t)>m(e)}).pop()};function s(t,e,n){void 0===n&&(n=document.activeElement);var i=t.hasAttribute("open"),o="boolean"==typeof e?e:"toggle"===e?!i:i,r=void 0!==window.HTMLDialogElement&&"function"==typeof t.show,u=i===o||function(t,e,n){void 0===n&&(n={});var i,o=""+b+e;if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);var r=t.dispatchEvent(i);return t[o]=null,r}(t,"dialog.toggle",{isOpen:i,willOpen:o}),a=u?o:t.hasAttribute("open"),d=t.nextElementSibling,l=u&&g();if(r?(t.open=!a,t[a?"show":"close"]()):t[a?"setAttribute":"removeAttribute"]("open",""),d[a?"removeAttribute":"setAttribute"]("hidden",""),u){var c=Number(l&&l.getAttribute(v))||0,s=Math.min(Math.max.apply(Math,p("*").map(m)),2e9);a?(t.style.zIndex=s+2,t.nextElementSibling.style.zIndex=s+1,n.setAttribute(v,c+1),y(t)):l&&(f=l).removeAttribute(v)}}function i(t){return t.filter(function(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")})}function A(t){return i(p(n,t))}function y(t){t.contains(document.activeElement)||(i(p("[autofocus]",t))[0]||A(t)[0]||t).focus()}return u});
+/*! @nrk/core-dialog v1.0.14 - Copyright (c) 2017-2018 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.coreDialog=e()}(this,function(){"use strict";var t="undefined"!=typeof window,o=(t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}());function e(t,e,n,i){(void 0===i&&(i=!1),"undefined"==typeof window||window[t=t+"-"+e])||(o||"object"!=typeof i||(i=Boolean(i.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,i))}var f,b="prevent_recursive_dispatch_maximum_callstack";function p(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var u="data-@nrk/core-dialog-1.0.14".replace(/\W+/g,"-"),l=27,d=9,m=u+"-opener",c="\n  [tabindex]:not([disabled]),\n  a:not([disabled]),\n  button:not([disabled]),\n  input:not([disabled]),\n  select:not([disabled]),\n  textarea:not([disabled])";function a(t,e){var o="object"==typeof e?e:{open:e};return p(t).map(function(t){var e=p(c,t).length,n="BACKDROP"===(t.nextElementSibling||{}).nodeName,i="boolean"==typeof o.strict?o.strict:"true"===t.getAttribute(u);return t.setAttribute(u,i),t.setAttribute("role","dialog"),t.setAttribute("aria-modal",!0),t.setAttribute("aria-label",o.label||t.getAttribute("aria-label")),n||t.insertAdjacentElement("afterend",document.createElement("backdrop")),e||console.warn('@nrk/core-dialog initialized without focusable elements. Please add [tabindex="-1"] the main element of',t),w(t,o.open,o.opener),t})}e(u,"click",function(t){for(var e=t.target,n=void 0;e;e=e.parentElement){var i=e.getAttribute("data-core-dialog"),o=e.previousElementSibling,r=o&&"false"===o.getAttribute(u)&&(e=o);(n=n||r||"close"===i)?e.hasAttribute(u)&&w(e,!1):i&&a(document.getElementById(i),{open:!0,opener:e})}}),e(u,"transitionend",function(t){var e=t.target;e.hasAttribute&&e.hasAttribute(u)&&e.hasAttribute("open")?h(e):f&&setTimeout(function(){return f=f&&f.focus()},16)}),e(u,"keydown",function(t){var e,n,i,o,r=t.keyCode,a=(r===l||r===d)&&s();a&&r===d&&(n=t,i=p(c,e=a).filter(y),o=i[n.shiftKey?0:i.length-1],n.target!==o&&e.contains(n.target)||(n.preventDefault(),i[n.shiftKey?i.length-1:0].focus())),a&&r===l&&"false"===a.getAttribute(u)&&(t.defaultPrevented||w(a,!1),t.preventDefault())});var v=function(t){for(var e=t,n=1;e;e=e.offsetParent)n+=Number(window.getComputedStyle(e).getPropertyValue("z-index"))||0;return n},g=function(){return p("["+m+"]").sort(function(t,e){return t.getAttribute(m)>e.getAttribute(m)}).pop()},s=function(){return p("["+u+"][open]").sort(function(t,e){return v(t)>v(e)}).pop()};function w(t,e,n){void 0===n&&(n=document.activeElement);var i=t.hasAttribute("open"),o="boolean"==typeof e?e:"toggle"===e?!i:i,r=void 0!==window.HTMLDialogElement&&"function"==typeof t.show,a=i===o||function(t,e,n){void 0===n&&(n={});var i,o=""+b+e;if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);var r=t.dispatchEvent(i);return t[o]=null,r}(t,"dialog.toggle",{isOpen:i,willOpen:o}),u=a?o:t.hasAttribute("open"),l=t.nextElementSibling,d=a&&g();if(r?(t.open=!u,t[u?"show":"close"]()):t[u?"setAttribute":"removeAttribute"]("open",""),l[u?"removeAttribute":"setAttribute"]("hidden",""),a){var c=Number(d&&d.getAttribute(m))||0,s=Math.min(Math.max.apply(Math,p("*").map(v)),2e9);u?(t.style.zIndex=s+2,t.nextElementSibling.style.zIndex=s+1,n.setAttribute(m,c+1),h(t)):d&&(f=d).removeAttribute(m)}}function y(t){return t.clientWidth&&t.clientHeight&&"hidden"!==window.getComputedStyle(t).getPropertyValue("visibility")}function h(t){t.contains(document.activeElement)||p("[autofocus]",t).concat(p(c,t)).concat(t).filter(y).every(function(t){return t.focus()})}return a});
 //# sourceMappingURL=core-dialog.min.js.map

jsx.js

@@ -9,3 +9,3 @@ 'use strict';
 var name = "@nrk/core-dialog";
-var version = "1.0.13";
+var version = "1.0.14";
 
@@ -111,2 +111,3 @@ var IS_BROWSER = typeof window !== 'undefined';
   return queryAll(dialogs).map(function (dialog) {
+    var hasFocusable = queryAll(FOCUSABLE_ELEMENTS, dialog).length;
     var hasBackdrop = (dialog.nextElementSibling || {}).nodeName === 'BACKDROP';
@@ -116,7 +117,7 @@ var isStrict = typeof options.strict === 'boolean' ? options.strict : dialog.getAttribute(UUID) === 'true';
     dialog.setAttribute(UUID, isStrict);
-    dialog.setAttribute('tabindex', -1);
     dialog.setAttribute('role', 'dialog');
     dialog.setAttribute('aria-modal', true);
     dialog.setAttribute('aria-label', options.label || dialog.getAttribute('aria-label'));
-    hasBackdrop || dialog.insertAdjacentElement('afterend', document.createElement('backdrop'));
+    if (!hasBackdrop) { dialog.insertAdjacentElement('afterend', document.createElement('backdrop')); }
+    if (!hasFocusable) { console.warn('@nrk/core-dialog initialized without focusable elements. Please add [tabindex="-1"] the main element of', dialog); }
 
@@ -210,18 +211,14 @@ setOpen(dialog, options.open, options.opener);
 
-function getVisibleElements (elements) {
-  return elements.filter(function (el) { return el.clientWidth &&
-    el.clientHeight &&
-    window.getComputedStyle(el).getPropertyValue('visibility') !== 'hidden'; }
-  )
+function isVisible (el) {
+  return el.clientWidth && el.clientHeight &&
+    window.getComputedStyle(el).getPropertyValue('visibility') !== 'hidden'
 }
 
-function queryFocusable (context) {
-  return getVisibleElements(queryAll(FOCUSABLE_ELEMENTS, context))
-}
-
 function setFocus (dialog) {
   if (dialog.contains(document.activeElement)) { return } // Do not move if focus is already inside
-  var autofocusElement = getVisibleElements(queryAll('[autofocus]', dialog))[0];
-  var focusElement = autofocusElement || queryFocusable(dialog)[0] || dialog;
-  focusElement.focus();
+  queryAll('[autofocus]', dialog)
+    .concat(queryAll(FOCUSABLE_ELEMENTS, dialog))
+    .concat(dialog)
+    .filter(isVisible)
+    .every(function (el) { return el.focus(); }); // Only focuses the first visible element
 }
@@ -236,3 +233,3 @@
 function keepFocus (dialog, event) {
-  var focusable = queryFocusable(dialog);
+  var focusable = queryAll(FOCUSABLE_ELEMENTS, dialog).filter(isVisible);
   var onEdge = focusable[event.shiftKey ? 0 : focusable.length - 1];
@@ -247,3 +244,3 @@
 
-var Dialog = (function (superclass) {
+var Dialog = /*@__PURE__*/(function (superclass) {
   function Dialog (props) {
@@ -250,0 +247,0 @@ superclass.call(this, props);

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-dialog.cjs.js",

readme.md

@@ -229,2 +229,11 @@ # Core Dialog
 
+### Required focusable element
+
+Your dialog must contain `<input>`, `<button>`, `<select>`, `<textarea>`, `<a>`
+or element with `tabindex="-1"` to ensure the user is navigated into the `@nrk/nrk-dialog`.
+As a best practice; if your dialog contains a form element, use `autofocus`.
+If you dialog is without form elements, start your dialog
+content with `<h1 tabindex="-1">Dialog title</h1>`.
+
+
 ### Supporting IE9
@@ -240,6 +249,2 @@ If you need `@nrk/core-dialog` to support IE9, add the following code in your `<head>` tag:
 
-### Autofocus
-
-If you have form elements inside a `@nrk/core-dialog`, you can optionally add an `autofocus` attribute to the most prominent form element. This helps the user navigate quickly when toggle is opened.
-
 ---
@@ -246,0 +251,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86159

increased by1.05%

Number of lines in readme file

278

increased by1.83%

Worsened metrics

Lines of code

694

decreased by-0.86%

No dependency changes