@nrk/core-toggle - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

core-toggle.cjs.js

@@ -169,2 +169,6 @@ 'use strict';
   } : function (el, css) {
+    // IE jumps to shadow SVG DOM on clicking an SVG defined by <use>.
+    // If so, jump back to <use> element and traverse real DOM
+    if (el.correspondingUseElement) el = el.correspondingUseElement;
+
     for (; el; el = el.parentElement) {
@@ -171,0 +175,0 @@ if (match.call(el, css)) return el;

core-toggle.jsx.js

@@ -175,2 +175,6 @@ (function (global, factory) {
     } : function (el, css) {
+      // IE jumps to shadow SVG DOM on clicking an SVG defined by <use>.
+      // If so, jump back to <use> element and traverse real DOM
+      if (el.correspondingUseElement) el = el.correspondingUseElement;
+
       for (; el; el = el.parentElement) {
@@ -365,3 +369,3 @@ if (match.call(el, css)) return el;
 
-  var version = "3.0.5";
+  var version = "3.0.6";
 
@@ -368,0 +372,0 @@ /**

core-toggle.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-toggle v3.0.5 - Copyright (c) 2017-2019 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreToggle=e()}(this,function(){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function s(t,e){return(s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,n){return(o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&s(o,n.prototype),o}).apply(null,arguments)}function a(t){var i="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(e=t,-1===Function.toString.call(e).indexOf("[native code]")))return t;var e;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==i){if(i.has(t))return i.get(t);i.set(t,n)}function n(){return o(t,arguments,c(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),s(n,t)})(t)}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window,f=t&&/(android)/i.test(navigator.userAgent),h=t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){r(this,t)}}());var e,n,d=(e="undefined"==typeof window?{}:window.Element.prototype,n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector,e.closest?function(t,e){return t.closest(e)}:function(t,e){for(;t;t=t.parentElement)if(n.call(t,e))return t;return null});function p(t,e){var n,i=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},o="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[o])return!0;t[o]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i);var r=t.dispatchEvent(n);return t[o]=null,r}function b(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}return function(t){function e(){return r(this,e),l(this,c(e).apply(this,arguments))}var n,i,o;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&s(t,e)}(e,a(HTMLElement)),n=e,o=[{key:"observedAttributes",get:function(){return["hidden"]}}],(i=[{key:"connectedCallback",value:function(){h&&(document.documentElement.style.cursor="pointer"),f||this.setAttribute("aria-labelledby",this.button.id=this.button.id||b()),this.value=this.button.textContent,this.setAttribute("role","group"),this.button.setAttribute("aria-expanded",this._open=!this.hidden),this.button.setAttribute("aria-controls",this.id=this.id||b()),document.addEventListener("keydown",this,!0),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){this._button=null,document.removeEventListener("keydown",this,!0),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(){if(this._open===this.hidden){this.button.setAttribute("aria-expanded",this._open=!this.hidden);try{this.querySelector("[autofocus]").focus()}catch(t){}p(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:d(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=d(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&d(t.target,this.nodeName)===this?p(this,"toggle.select",e):e&&e.getAttribute("aria-controls")===this.id?this.hidden=!this.hidden:this.popup&&!this.contains(t.target)&&(this.hidden=!0)}}}},{key:"button",get:function(){return this._button&&this._button.getAttribute("for")===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("popup")||this.getAttribute("popup")||this.hasAttribute("popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("popup",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){!function(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:!this.hasAttribute(e);!n===t.hasAttribute(e)&&t[n?"setAttribute":"removeAttribute"](e,"")}(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(){var t=0<arguments.length&&void 0!==arguments[0]&&arguments[0];if(this.button&&this.popup.length){var e=this.button,n=(e.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],i=t.textContent||t||"";n===this.popup&&(e.value=t.value||i,e[t.innerHTML?"innerHTML":"textContent"]=t.innerHTML||i,e.setAttribute("aria-label","".concat(e.textContent,",").concat(this.popup)))}}}])&&u(n.prototype,i),o&&u(n,o),e}()}),window.customElements.define("core-toggle",coreToggle);
+/*! @nrk/core-toggle v3.0.6 - Copyright (c) 2017-2019 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).coreToggle=e()}(this,function(){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function r(t,e){return(r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t,e,n){return(u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&r(o,n.prototype),o}).apply(null,arguments)}function c(t){var n="function"==typeof Map?new Map:void 0;return(c=function(t){if(null===t||!function(t){return-1!==Function.toString.call(t).indexOf("[native code]")}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return u(t,arguments,o(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r(e,t)})(t)}function n(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var t="undefined"!=typeof window,s=t&&/(android)/i.test(navigator.userAgent),a=t&&/iPad|iPhone|iPod/.test(String(navigator.platform));t||global.HTMLElement||(global.HTMLElement=function(){return function t(){e(this,t)}}());var l,f,h=(l="undefined"==typeof window?{}:window.Element.prototype,f=l.matches||l.msMatchesSelector||l.webkitMatchesSelector,l.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(f.call(t,e))return t;return null});function d(t,e,n){var i,o=2<arguments.length&&void 0!==n?n:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var u=t.dispatchEvent(i);return t[r]=null,u}function p(){return Date.now().toString(36)+Math.random().toString(36).slice(2,5)}return function(){function t(){return e(this,t),n(this,o(t).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}(t,c(HTMLElement)),function(t,e,n){e&&i(t.prototype,e),n&&i(t,n)}(t,[{key:"connectedCallback",value:function(){a&&(document.documentElement.style.cursor="pointer"),s||this.setAttribute("aria-labelledby",this.button.id=this.button.id||p()),this.value=this.button.textContent,this.setAttribute("role","group"),this.button.setAttribute("aria-expanded",this._open=!this.hidden),this.button.setAttribute("aria-controls",this.id=this.id||p()),document.addEventListener("keydown",this,!0),document.addEventListener("click",this)}},{key:"disconnectedCallback",value:function(){this._button=null,document.removeEventListener("keydown",this,!0),document.removeEventListener("click",this)}},{key:"attributeChangedCallback",value:function(){if(this._open===this.hidden){this.button.setAttribute("aria-expanded",this._open=!this.hidden);try{this.querySelector("[autofocus]").focus()}catch(t){}d(this,"toggle")}}},{key:"handleEvent",value:function(t){if(!t.defaultPrevented){if("keydown"===t.type&&27===t.keyCode)if(t.target.getAttribute&&"true"===t.target.getAttribute("aria-expanded")?t.target===this.button:h(t.target,this.nodeName)===this)return this.hidden=!0,this.button.focus(),t.preventDefault();if("click"===t.type){var e=h(t.target,"a,button");e&&!e.hasAttribute("aria-expanded")&&h(t.target,this.nodeName)===this?d(this,"toggle.select",e):e&&e.getAttribute("aria-controls")===this.id?this.hidden=!this.hidden:this.popup&&!this.contains(t.target)&&(this.hidden=!0)}}}},{key:"button",get:function(){return this._button&&this._button.getAttribute("for")===this.id?this._button:(this._button=this.id&&document.querySelector('[for="'.concat(this.id,'"]')))||this.previousElementSibling}},{key:"popup",get:function(){return"true"===this.getAttribute("popup")||this.getAttribute("popup")||this.hasAttribute("popup")},set:function(t){this[!1===t?"removeAttribute":"setAttribute"]("popup",t)}},{key:"hidden",get:function(){return this.hasAttribute("hidden")},set:function(t){!function(t,e,n){var i=2<arguments.length&&void 0!==n?n:!this.hasAttribute(e);!i===t.hasAttribute(e)&&t[i?"setAttribute":"removeAttribute"](e,"")}(this,"hidden",t)}},{key:"value",get:function(){return this.button.value||this.button.textContent},set:function(t){var e=0<arguments.length&&void 0!==t&&t;if(this.button&&this.popup.length){var n=this.button,i=(n.getAttribute("aria-label")||",".concat(this.popup)).split(",")[1],o=e.textContent||e||"";i===this.popup&&(n.value=e.value||o,n[e.innerHTML?"innerHTML":"textContent"]=e.innerHTML||o,n.setAttribute("aria-label","".concat(n.textContent,",").concat(this.popup)))}}}],[{key:"observedAttributes",get:function(){return["hidden"]}}]),t}()}),window.customElements.define("core-toggle",coreToggle);
 //# sourceMappingURL=core-toggle.min.js.map

core-toggle.test.js

@@ -1,161 +0,180 @@
-import test from 'ava'
+import fs from 'fs'
 import path from 'path'
-import puppeteer from 'puppeteer'
+import { prop, attr } from '../test-utils'
 
-async function withPage (t, run) {
-  const browser = await puppeteer.launch()
-  const page = await browser.newPage()
-  page.on('console', msg => console.log(msg._text))
-  await page.addScriptTag({ path: path.join(__dirname, 'core-toggle.min.js') })
-  try {
-    await run(t, page)
-  } finally {
-    await page.close()
-    await browser.close()
-  }
-}
+const coreToggle = fs.readFileSync(path.resolve(__dirname, 'core-toggle.min.js'), 'utf-8')
+const customElements = fs.readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8')
 
-test('sets up all properties', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle hidden></core-toggle>
-  `)
-  t.is(await page.$eval('button', el => el.getAttribute('aria-expanded')), 'false')
-  t.true(await page.$eval('button', el => el.getAttribute('aria-controls') === document.querySelector('core-toggle').id))
-  t.true(await page.$eval('core-toggle', el => el.hasAttribute('hidden')))
-  t.true(await page.$eval('core-toggle', el => el.getAttribute('aria-labelledby') === document.querySelector('button').id))
-})
+describe('core-toggle', () => {
+  beforeEach(async () => {
+    await browser.refresh()
+    await browser.executeScript(customElements)
+    await browser.executeScript(coreToggle)
+  })
 
-test('opens and closes toggle', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle hidden></core-toggle>
-  `)
-  await page.click('button')
-  t.is(await page.$eval('button', el => el.getAttribute('aria-expanded')), 'true')
-  await page.click('button')
-  t.is(await page.$eval('button', el => el.getAttribute('aria-expanded')), 'false')
-  await page.click('button')
-  t.is(await page.$eval('button', el => el.getAttribute('aria-expanded')), 'true')
-  await page.click('button')
-  t.is(await page.$eval('button', el => el.getAttribute('aria-expanded')), 'false')
-})
+  it('sets up all properties', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle hidden></core-toggle>
+      `
+    })
+    await expect(attr('button', 'aria-expanded')).toMatch(/null|false/)
+    const toggleId = await attr('core-toggle', 'id')
+    await expect(attr('button', 'aria-controls')).toEqual(toggleId)
+    await expect(prop('core-toggle', 'hidden')).toMatch(/true/i)
+    const buttonId = await attr('button', 'id')
+    await expect(attr('core-toggle', 'aria-labelledby')).toEqual(buttonId)
+  })
 
-test('opens and closes nested toggle', withPage, async (t, page) => {
-  await page.setContent(`
-    <button id="outer">Toggle outer</button>
-    <core-toggle hidden>
-      <button id="inner">Toggle inner</button>
-      <core-toggle hidden>
-        <div>Inner content</div>
-      </core-toggle>
-    </core-toggle>
-  `)
-  await page.click('button#outer')
-  await page.click('button#inner')
-  t.false(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-  t.false(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-  await page.click('button#inner')
-  t.true(await page.$eval('button#inner + core-toggle', el => el.hasAttribute('hidden')))
-  t.false(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-  await page.click('button#outer')
-  t.true(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-})
+  it('opens and closes toggle', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle hidden></core-toggle>
+      `
+    })
+    await $('button').click()
+    await expect(attr('button', 'aria-expanded')).toMatch(/true/i)
+    await expect(prop('core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await $('button').click()
+    await expect(attr('button', 'aria-expanded')).toEqual('false')
+    await expect(prop('core-toggle', 'hidden')).toMatch(/true/i)
+  })
 
-test('closes nested toggle with esc', withPage, async (t, page) => {
-  await page.setContent(`
-    <button id="outer">Toggle outer</button>
-    <core-toggle hidden>
-      <button id="inner">Toggle inner</button>
-      <core-toggle hidden>
-        <div>Inner content</div>
-      </core-toggle>
-    </core-toggle>
-  `)
-  await page.click('button#outer')
-  await page.click('button#inner')
-  t.false(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-  t.false(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-  await page.keyboard.press('Escape')
-  t.true(await page.$eval('button#inner + core-toggle', el => el.hasAttribute('hidden')))
-  t.false(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-  await page.keyboard.press('Escape')
-  t.true(await page.$eval('button#outer + core-toggle', el => el.hasAttribute('hidden')))
-})
+  it('opens and closes nested toggle', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button id="outer">Toggle outer</button>
+        <core-toggle hidden>
+          <button id="inner">Toggle inner</button>
+          <core-toggle hidden>
+            <div>Inner content</div>
+          </core-toggle>
+        </core-toggle>
+      `
+    })
+    await $('button#outer').click()
+    await $('button#inner').click()
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await $('button#inner').click()
+    await expect(prop('button#inner + core-toggle', 'hidden')).toMatch(/true/i)
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await $('button#outer').click()
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/true/i)
+  })
 
-test('closes on outside click with popup', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle popup hidden></core-toggle>
-  `)
-  await page.click('button')
-  t.false(await page.$eval('core-toggle', el => el.hasAttribute('hidden')))
-  await page.click('body')
-  t.true(await page.$eval('core-toggle', el => el.hasAttribute('hidden')))
-})
+  it('closes nested toggle with esc', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button id="outer">Toggle outer</button>
+        <core-toggle hidden>
+          <button id="inner">Toggle inner</button>
+          <core-toggle hidden>
+            <div>Inner content</div>
+          </core-toggle>
+        </core-toggle>
+      `
+    })
+    await $('button#outer').click()
+    await $('button#inner').click()
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await $('button#inner').sendKeys(protractor.Key.ESCAPE)
+    await expect(prop('button#inner + core-toggle', 'hidden')).toMatch(/true/i)
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await $('button#inner').sendKeys(protractor.Key.ESCAPE)
+    await expect(prop('button#outer + core-toggle', 'hidden')).toMatch(/true/i)
+  })
 
-test('respects "for" attribute', withPage, async (t, page) => {
-  await page.setContent(`
-    <div><button for="content">Toggle</button></div>
-    <core-toggle id="content" hidden></core-toggle>
-  `)
-  t.true(await page.$eval('core-toggle', el => el.button.getAttribute('for') === el.id))
-  t.true(await page.$eval('core-toggle', el => el.button.getAttribute('aria-controls') === el.id))
-})
+  it('closes popup on click outside', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle popup hidden></core-toggle>
+      `
+    })
+    await $('button').click()
+    await expect(prop('core-toggle', 'hidden')).toMatch(/(null|false)/i)
+    await $('body').click()
+    await expect(prop('core-toggle', 'hidden')).toMatch(/true/i)
+  })
 
-test('respects exisiting aria-label with popup and value', withPage, async (t, page) => {
-  await page.setContent(`
-    <button aria-label="Label">Toggle</button>
-    <core-toggle popup="Another label" hidden></core-toggle>
-  `)
-  await page.$eval('core-toggle', el => (el.value = 'Button text'))
-  t.is(await page.$eval('button', el => el.textContent), await page.$eval('core-toggle', el => el.value))
-  t.is(await page.$eval('button', el => el.getAttribute('aria-label')), 'Label')
-})
+  it('respects "for" attribute', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <div><button for="content">Toggle</button></div>
+        <core-toggle id="content" hidden></core-toggle>
+      `
+    })
+    const toggleId = await attr('core-toggle', 'id')
+    await expect(attr('button', 'for')).toEqual(toggleId)
+    await expect(attr('button', 'aria-controls')).toEqual(toggleId)
+  })
 
-test('sets aria-label with popup attr and value', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle popup="Some label" hidden></core-toggle>
-  `)
-  await page.$eval('core-toggle', el => (el.value = 'Button text'))
-  t.is(await page.$eval('button', el => el.textContent), await page.$eval('core-toggle', el => el.value))
-  t.is(await page.$eval('button', el => el.getAttribute('aria-label')), 'Button text,Some label')
-})
+  it('respects exisiting aria-label with popup and value', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button aria-label="Label">Toggle</button>
+        <core-toggle popup="Another label" hidden></core-toggle>
+      `
+    })
+    await browser.executeScript(() => (document.querySelector('core-toggle').value = 'Button text'))
+    const toggleValue = await prop('core-toggle', 'value')
+    await expect(prop('button', 'textContent')).toEqual(toggleValue)
+    await expect(attr('button', 'aria-label')).toEqual('Label')
+  })
 
-test('sets aria-label with popup prop and value', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle hidden></core-toggle>
-  `)
-  await page.$eval('core-toggle', el => (el.popup = 'Some label'))
-  await page.$eval('core-toggle', el => (el.value = 'Button text'))
-  t.is(await page.$eval('button', el => el.textContent), await page.$eval('core-toggle', el => el.value))
-  t.is(await page.$eval('button', el => el.getAttribute('aria-label')), 'Button text,Some label')
-})
+  it('sets aria-label with popup attr and value', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle popup="Some label" hidden></core-toggle>
+      `
+    })
+    await browser.executeScript(() => (document.querySelector('core-toggle').value = 'Button text'))
+    const toggleValue = await prop('core-toggle', 'value')
+    await expect(prop('button', 'textContent')).toEqual(toggleValue)
+    await expect(attr('button', 'aria-label')).toEqual('Button text,Some label')
+  })
 
-test('triggers toggle event', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle hidden></core-toggle>
-  `)
-  await page.evaluate(() => {
-    return new Promise((resolve, reject) => {
-      window.addEventListener('toggle', resolve)
+  it('sets aria-label with popup prop and value', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle hidden></core-toggle>
+      `
+    })
+    await browser.executeScript(() => (document.querySelector('core-toggle').popup = 'Some label'))
+    await browser.executeScript(() => (document.querySelector('core-toggle').value = 'Button text'))
+    const toggleValue = await prop('core-toggle', 'value')
+    await expect(prop('button', 'textContent')).toEqual(toggleValue)
+    await expect(attr('button', 'aria-label')).toEqual('Button text,Some label')
+  })
+
+  it('triggers toggle event', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle hidden></core-toggle>
+      `
+      document.addEventListener('toggle', () => (window.triggered = true))
       document.querySelector('core-toggle').hidden = false
     })
+    const triggered = await browser.executeScript(() => window.triggered)
+    await expect(triggered).toEqual(true)
   })
-  t.pass()
-})
 
-test('triggers select event', withPage, async (t, page) => {
-  await page.setContent(`
-    <button>Toggle</button>
-    <core-toggle hidden>
-      <button id="item">Select me</button>
-    </core-toggle>
-  `)
-  const selected = await page.evaluate(() => {
-    return new Promise((resolve, reject) => {
-      window.addEventListener('toggle.select', ({ detail }) => resolve(detail.id))
+  it('triggers select event', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <button>Toggle</button>
+        <core-toggle hidden>
+          <button id="my-item">Select me</button>
+        </core-toggle>
+      `
+    })
+    await browser.executeScript(() => {
+      document.addEventListener('toggle.select', (event) => (window.itemId = event.detail.id))
       const toggle = document.querySelector('core-toggle')
@@ -165,4 +184,5 @@ toggle.hidden = false
     })
+    const itemId = await browser.wait(() => browser.executeScript(() => window.itemId))
+    await expect(itemId).toEqual('my-item')
   })
-  t.is(selected, 'item')
 })

jsx.js

@@ -173,2 +173,6 @@ 'use strict';
   } : function (el, css) {
+    // IE jumps to shadow SVG DOM on clicking an SVG defined by <use>.
+    // If so, jump back to <use> element and traverse real DOM
+    if (el.correspondingUseElement) el = el.correspondingUseElement;
+
     for (; el; el = el.parentElement) {
@@ -363,3 +367,3 @@ if (match.call(el, css)) return el;
 
-var version = "3.0.5";
+var version = "3.0.6";
 
@@ -366,0 +370,0 @@ /**

package.json

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

readme.md

@@ -78,2 +78,5 @@ # Core Toggle
 
+Remember to [polyfill](https://github.com/webcomponents/polyfills#custom-elements) custom elements if needed.
+
+
 ## Usage
@@ -80,0 +83,0 @@

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

134407

increased by17.62%

Number of package files

12

increased by9.09%

Lines of code

1925

increased by37.5%

Number of lines in readme file

279

increased by1.09%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes