@area17/fractal-axe-a11y - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

assets/ui.js

 (function (d) {
-  function FractalAxeA11yUI(){
-    this.loadData();
+  function FractalAxeA11yUI() {
 
-    window.addEventListener("message", this.receiveMessage.bind(this), false);
-    window.addEventListener('a11yPanelLoad', this.loadData.bind(this), false);
-  }
+    let selectors = [];
 
-  FractalAxeA11yUI.prototype.iframe = document.querySelector('.Preview-iframe').contentWindow;
+    const run = function () {
+      document.querySelector('.Preview-iframe').contentWindow.postMessage({ message: 'a11yRun'});
+    };
 
-  FractalAxeA11yUI.prototype.selectors = [];
+    const receiveMessage = function (e) {
+      if( e.data.message === 'a11yResults'){
+        parseResults(e.data.results);
 
-  FractalAxeA11yUI.prototype.run = function () {
-    this.iframe.postMessage({ message: 'a11yRun'});
-  };
+        saveData(e.data.results);
+      }
+    };
 
-  FractalAxeA11yUI.prototype.receiveMessage = function (e) {
+    const parseResults = function (results) {
+      const resultsContainer = document.querySelector('.axe-a11y__results');
 
-    if( e.data.message === 'a11yResults'){
-      this.parseResults(e.data.results);
+      clearElement(resultsContainer);
 
-      this.saveData(e.data.results);
-    }
-  };
+      if( results.violations.length > 0){
+        const title = `${results.violations.length} ${results.violations.length == 1 ? 'Violation' : 'Violations'}`;
 
-  FractalAxeA11yUI.prototype.parseResults = function (results) {
-    const resultsContainer = document.querySelector('.axe-a11y__results');
+        resultsContainer.innerHTML += buildGroup(title, 'violations', results.violations);
+      }
 
-    this.clearElement(resultsContainer);
+      if( results.passes.length > 0){
+        const title = `${results.passes.length} ${results.passes.length == 1 ? 'Pass' : 'Passes'}`;
 
-    if( results.violations.length > 0){
-      const title = `${results.violations.length} ${results.violations.length == 1 ? 'Violation' : 'Violations'}`;
+        resultsContainer.innerHTML += buildGroup(title, 'passes', results.passes);
+      }
 
-      resultsContainer.innerHTML += this.buildGroup(title, 'violations', results.violations);
-    }
+      if( results.incomplete.length > 0){
+        const title = `${results.incomplete.length} Incomplete`;
 
-    if( results.passes.length > 0){
-      const title = `${results.passes.length} ${results.passes.length == 1 ? 'Pass' : 'Passes'}`;
+        resultsContainer.innerHTML += buildGroup(title, 'incomplete', results.incomplete);
+      }
 
-      resultsContainer.innerHTML += this.buildGroup(title, 'passes', results.passes);
-    }
+      initExpanders();
+      initHighlights();
+    };
 
-    if( results.incomplete.length > 0){
-      const title = `${results.incomplete.length} Incomplete`;
+    const initHighlights = function (){
+      const highlighters = document.querySelectorAll('[data-a11y-highlight]');
 
-      resultsContainer.innerHTML += this.buildGroup(title, 'incomplete', results.incomplete);
-    }
+      highlighters.forEach(item => {
+        item.addEventListener('change', (e) => {
+          const el = e.target;
+          if( el.checked){
+            if(!selectors.includes(el.value)){
+              selectors.push(el.value);
+            }
+          }else{
+            selectors = selectors.filter(selector => selector !== el.value);
+          }
 
-    this.initExpanders();
-    this.initHighlights();
-  };
+          const linkedInputs = document.querySelectorAll(`[data-a11y-highlight][value="${parseString(el.value)}"]`);
 
-  FractalAxeA11yUI.prototype.initHighlights = function (){
-    const highlighters = document.querySelectorAll('[data-a11y-highlight]');
+          linkedInputs.forEach(linkedInput => (linkedInput.checked = el.checked));
 
-    highlighters.forEach(item => {
-      item.addEventListener('change', (e) => {
-        const el = e.target;
-        if( el.checked){
-          if(!this.selectors.includes(el.value)){
-            this.selectors.push(el.value);
-          }
-        }else{
-          this.selectors = this.selectors.filter(selector => selector !== el.value);
-        }
+          updateHighlightStyles();
+        });
+      });
+    };
 
-        const linkedInputs = document.querySelectorAll(`[data-a11y-highlight][value="${this.parseString(el.value)}"]`);
+    const updateHighlightStyles = function (){
+      document.querySelector('.Preview-iframe').contentWindow.postMessage({ message: 'a11yUpdateHighlight', selectors: selectors});
+    };
 
-        linkedInputs.forEach(linkedInput => (linkedInput.checked = el.checked));
+    const initExpanders = function (){
+      const expanders = document.querySelectorAll('[data-a11y-expander]');
 
-        this.updateHighlightStyles();
-      });
-    });
-  };
+      expanders.forEach(item => {
+        const trigger = item.querySelector('[data-a11y-expander-trigger]');
+        const content = item.querySelector('[data-a11y-expander-content]');
+        const contentInner = item.querySelector('[data-a11y-expander-content-inner]');
 
-  FractalAxeA11yUI.prototype.updateHighlightStyles = function (){
-    this.iframe.postMessage({ message: 'a11yUpdateHighlight', selectors: this.selectors});
-  };
+        trigger.addEventListener('click', (e) => {
+          const isActive = item.classList.contains('axe-a11y__expander--active');
+          const contentHeight = contentInner.clientHeight;
 
-  FractalAxeA11yUI.prototype.initExpanders = function (){
-    const expanders = document.querySelectorAll('[data-a11y-expander]');
+          if( isActive ){
+            content.style.height = `${contentHeight}px`;
+            item.classList.remove('axe-a11y__expander--active');
 
-    expanders.forEach(item => {
-      const trigger = item.querySelector('[data-a11y-expander-trigger]');
-      const content = item.querySelector('[data-a11y-expander-content]');
-      const contentInner = item.querySelector('[data-a11y-expander-content-inner]');
+            setTimeout(() => {
+              content.style.height = '';
+            }, 1);
+          }else{
+            content.style.height = `${contentHeight}px`;
 
-      trigger.addEventListener('click', (e) => {
-        const isActive = item.classList.contains('axe-a11y__expander--active');
-        const contentHeight = contentInner.clientHeight;
+            item.classList.add('axe-a11y__expander--active');
 
-        if( isActive ){
-          content.style.height = `${contentHeight}px`;
-          item.classList.remove('axe-a11y__expander--active');
+            setTimeout(() => {
+              content.style.height = `auto`;
+            }, 300);
+          }
 
-          setTimeout(() => {
-            content.style.height = '';
-          }, 1);
-        }else{
-          content.style.height = `${contentHeight}px`;
+          e.preventDefault();
+        }, false);
+      })
+    };
 
-          item.classList.add('axe-a11y__expander--active');
+    const parseString = function (str){
+      if(!str) return;
 
-          setTimeout(() => {
-            content.style.height = `auto`;
-          }, 300);
-        }
+      return str.replace(/[&<>\'\"]/g,
+        tag =>
+          ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            "'": '&#39;',
+            '"': '&quot;'
+          }[tag] || tag)).replace(/(\r\n|\n\r|\r|\n)/g, '<br>');
+    }
 
-        e.preventDefault();
-      }, false);
-    })
-  };
+    const buildItem = function (item) {
+      const tags = item.tags.map((tag) => {
+        return `<li>${parseString(tag)}</li>`;
+      }).join('');
 
-  FractalAxeA11yUI.prototype.parseString = function (str){
-    if(!str) return;
 
-    return str.replace(/[&<>\'\"]/g,
-      tag =>
-        ({
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          "'": '&#39;',
-          '"': '&quot;'
-        }[tag] || tag)).replace(/(\r\n|\n\r|\r|\n)/g, '<br>');
-  }
+      const nodes = item.nodes.map((el) => {
+        if( !el.failureSummary) return;
 
-  FractalAxeA11yUI.prototype.buildItem = function (item) {
-    const tags = item.tags.map((tag) => {
-      return `<li>${this.parseString(tag)}</li>`;
-    }).join('');
+        return `
+          <li>
+            <div class="axe-a11y__node-header">
+              <code>${parseString(el.target[0])}</code>
 
+              <label class="axe-a11y__highlight">
+                <span>Highlight</span>
+                <input type="checkbox" name="highlight" value="${parseString(el.target[0])}" data-a11y-highlight />
+              </label>
+            </div>
 
-    const nodes = item.nodes.map((el) => {
-      if( !el.failureSummary) return;
+            ${el.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${el.impact}">${parseString(el.impact)}</span>` : ``}
 
+            ${el.failureSummary ? `<p>${parseString(el.failureSummary)}</p>` : ``}
+          </li>
+        `;
+      }).join('');
+
       return `
-        <li>
-          <div class="axe-a11y__node-header">
-            <code>${this.parseString(el.target[0])}</code>
+      <li class="axe-a11y__item axe-a11y__expander" data-a11y-expander>
+        <button class="axe-a11y__expander-trigger" data-a11y-expander-trigger>
+          <span class="axe-a11y__expander-icon"></span>
 
-            <label class="axe-a11y__highlight">
-              <span>Highlight</span>
-              <input type="checkbox" name="highlight" value="${this.parseString(el.target[0])}" data-a11y-highlight />
-            </label>
-          </div>
+          <span class="axe-a11y__expander-title">${parseString(item.help)}</span>
 
-          ${el.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${el.impact}">${this.parseString(el.impact)}</span>` : ``}
+          ${item.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${item.impact}">${parseString(item.impact)}</span>` : ``}
+        </button>
 
-          ${el.failureSummary ? `<p>${this.parseString(el.failureSummary)}</p>` : ``}
-        </li>
-      `;
-    }).join('');
+        <div class="axe-a11y__expander-content" data-a11y-expander-content>
+          <div class="axe-a11y__expander-content-inner" data-a11y-expander-content-inner>
+            <p>${parseString(item.description)}</p>
 
-    return `
-    <li class="axe-a11y__item axe-a11y__expander" data-a11y-expander>
-      <button class="axe-a11y__expander-trigger" data-a11y-expander-trigger>
-        <span class="axe-a11y__expander-icon"></span>
+            <p><a href="${item.helpUrl}" target="_blank" aria-label="More info. Opens in a new tab." class="axe-a11y__cta">More info</a></p>
 
-        <span class="axe-a11y__expander-title">${this.parseString(item.help)}</span>
+            ${nodes ? `
+              <div class="axe-a11y__item-nodes-wrapper">
+                <span class="axe-a11y__subtitle">Issues</span>
 
-        ${item.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${item.impact}">${this.parseString(item.impact)}</span>` : ``}
-      </button>
+                <ol class="axe-a11y__item-nodes">
+                  ${nodes}
+                </ol>
+              </div>
+            ` : ``}
 
-      <div class="axe-a11y__expander-content" data-a11y-expander-content>
-        <div class="axe-a11y__expander-content-inner" data-a11y-expander-content-inner>
-          <p>${this.parseString(item.description)}</p>
+            <div class="axe-a11y__item-tags-wrapper">
+              <span class="axe-a11y__subtitle">Tags</span>
 
-          <p><a href="${item.helpUrl}" target="_blank" aria-label="More info. Opens in a new tab." class="axe-a11y__cta">More info</a></p>
-
-          ${nodes ? `
-            <div class="axe-a11y__item-nodes-wrapper">
-              <span class="axe-a11y__subtitle">Issues</span>
-
-              <ol class="axe-a11y__item-nodes">
-                ${nodes}
-              </ol>
+              <ul class="axe-a11y__item-tags">
+                ${tags}
+              </ul>
             </div>
-          ` : ``}
+          </div>
+        </li>
+      `
+    };
 
-          <div class="axe-a11y__item-tags-wrapper">
-            <span class="axe-a11y__subtitle">Tags</span>
+    const buildGroup = function (title, variation, data) {
+      const elements = data.map((item) => {
+        return buildItem(item);
+      }).join('');
 
-            <ul class="axe-a11y__item-tags">
-              ${tags}
-            </ul>
-          </div>
+      return `
+        <div class="axe-a11y__group axe-a11y__group--${variation}">
+          <h2 class="axe-a11y__group-title">${title}</h2>
+          <ul class="axe-a11y__items">${elements}</ul>
         </div>
-      </li>
-    `
-  };
+      `;
+    };
 
-  FractalAxeA11yUI.prototype.buildGroup = function (title, variation, data) {
-    const elements = data.map((item) => {
-      return this.buildItem(item);
-    }).join('');
+    const clearElement = function (element) {
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      return element;
+    };
 
-    return `
-      <div class="axe-a11y__group axe-a11y__group--${variation}">
-        <h2 class="axe-a11y__group-title">${title}</h2>
-        <ul class="axe-a11y__items">${elements}</ul>
-      </div>
-    `;
-  };
+    const setDate = function (date) {
+      const latestDate = date ? new Date(date) : new Date();
+      const parsedDate = latestDate.toLocaleDateString();
+      const parsedTime = latestDate.toLocaleTimeString();
+      const dateElement = document.querySelector('.axe-a11y__date');
 
-  FractalAxeA11yUI.prototype.clearElement = function (element) {
-    while (element.firstChild) {
-      element.removeChild(element.firstChild);
-    }
-    return element;
-  };
+      dateElement.innerHTML = `Last updated: ${parsedDate} - ${parsedTime}`;
+    };
 
-  FractalAxeA11yUI.prototype.setDate = function (date) {
-    const latestDate = date ? new Date(date) : new Date();
-    const parsedDate = latestDate.toLocaleDateString();
-    const parsedTime = latestDate.toLocaleTimeString();
-    const dateElement = document.querySelector('.axe-a11y__date');
+    const loadData = function () {
+      if(!window.localStorage) return;
 
-    dateElement.innerHTML = `Last updated: ${parsedDate} - ${parsedTime}`;
-  };
+      const storeId = getStoreId();
 
-  FractalAxeA11yUI.prototype.loadData = function () {
-    if(!window.localStorage) return;
+      const data = window.localStorage.getItem(storeId);
 
-    const storeId = this.getStoreId();
+      if(!data) return;
 
-    const data = window.localStorage.getItem(storeId);
+      const parsedData = JSON.parse(data);
 
-    if(!data) return;
+      setDate(parsedData.date);
+      parseResults(parsedData.results);
+    };
 
-    const parsedData = JSON.parse(data);
+    const saveData = function (data) {
+      if(!window.localStorage) return;
 
-    this.setDate(parsedData.date);
-    this.parseResults(parsedData.results);
-  };
+      const storeId = getStoreId();
+      const date = new Date();
 
-  FractalAxeA11yUI.prototype.saveData = function (data) {
-    if(!window.localStorage) return;
+      const storeData = {
+        date,
+        results: data
+      };
 
-    const storeId = this.getStoreId();
-    const date = new Date();
+      window.localStorage.setItem(storeId, JSON.stringify(storeData));
 
-    const storeData = {
-      date,
-      results: data
+      setDate(date);
     };
 
-    window.localStorage.setItem(storeId, JSON.stringify(storeData));
+    const getStoreId = function () {
+      const wrapper = document.querySelector('.Browser-axe-a11y');
+      const entityId = wrapper.getAttribute('data-entity-id');
+      const entityHandle = wrapper.getAttribute('data-entity-handle');
 
-    this.setDate(date);
-  };
+      return `fractal-a11y-${entityHandle}-${entityId}`;
+    };
 
-  FractalAxeA11yUI.prototype.getStoreId = function () {
-    const wrapper = document.querySelector('.Browser-axe-a11y');
-    const entityId = wrapper.getAttribute('data-entity-id');
-    const entityHandle = wrapper.getAttribute('data-entity-handle');
+    loadData();
 
-    return `fractal-a11y-${entityHandle}-${entityId}`;
-  };
+    window.addEventListener('message', receiveMessage, false);
+    window.addEventListener('a11yPanelLoad', loadData, false);
 
+    return {
+      run: run
+    }
+  }
+
   window.FractalAxeA11yUI = new FractalAxeA11yUI();
 }(document));

package.json

 {
   "name": "@area17/fractal-axe-a11y",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "AREA 17",
@@ -5,0 +5,0 @@ "description": "A Fractal add on to test your components for accessibility issues using Axe",

src/ui.js

 (function (d) {
-  function FractalAxeA11yUI(){
-    this.loadData();
+  function FractalAxeA11yUI() {
 
-    window.addEventListener('message', this.receiveMessage.bind(this), false);
-    window.addEventListener('a11yPanelLoad', this.loadData.bind(this), false);
-  }
+    let selectors = [];
 
-  FractalAxeA11yUI.prototype.iframe = document.querySelector('.Preview-iframe').contentWindow;
+    const run = function () {
+      document.querySelector('.Preview-iframe').contentWindow.postMessage({ message: 'a11yRun'});
+    };
 
-  FractalAxeA11yUI.prototype.selectors = [];
+    const receiveMessage = function (e) {
+      if( e.data.message === 'a11yResults'){
+        parseResults(e.data.results);
 
-  FractalAxeA11yUI.prototype.run = function () {
-    this.iframe.postMessage({ message: 'a11yRun'});
-  };
+        saveData(e.data.results);
+      }
+    };
 
-  FractalAxeA11yUI.prototype.receiveMessage = function (e) {
+    const parseResults = function (results) {
+      const resultsContainer = document.querySelector('.axe-a11y__results');
 
-    if( e.data.message === 'a11yResults'){
-      this.parseResults(e.data.results);
+      clearElement(resultsContainer);
 
-      this.saveData(e.data.results);
-    }
-  };
+      if( results.violations.length > 0){
+        const title = `${results.violations.length} ${results.violations.length == 1 ? 'Violation' : 'Violations'}`;
 
-  FractalAxeA11yUI.prototype.parseResults = function (results) {
-    const resultsContainer = document.querySelector('.axe-a11y__results');
+        resultsContainer.innerHTML += buildGroup(title, 'violations', results.violations);
+      }
 
-    this.clearElement(resultsContainer);
+      if( results.passes.length > 0){
+        const title = `${results.passes.length} ${results.passes.length == 1 ? 'Pass' : 'Passes'}`;
 
-    if( results.violations.length > 0){
-      const title = `${results.violations.length} ${results.violations.length == 1 ? 'Violation' : 'Violations'}`;
+        resultsContainer.innerHTML += buildGroup(title, 'passes', results.passes);
+      }
 
-      resultsContainer.innerHTML += this.buildGroup(title, 'violations', results.violations);
-    }
+      if( results.incomplete.length > 0){
+        const title = `${results.incomplete.length} Incomplete`;
 
-    if( results.passes.length > 0){
-      const title = `${results.passes.length} ${results.passes.length == 1 ? 'Pass' : 'Passes'}`;
+        resultsContainer.innerHTML += buildGroup(title, 'incomplete', results.incomplete);
+      }
 
-      resultsContainer.innerHTML += this.buildGroup(title, 'passes', results.passes);
-    }
+      initExpanders();
+      initHighlights();
+    };
 
-    if( results.incomplete.length > 0){
-      const title = `${results.incomplete.length} Incomplete`;
+    const initHighlights = function (){
+      const highlighters = document.querySelectorAll('[data-a11y-highlight]');
 
-      resultsContainer.innerHTML += this.buildGroup(title, 'incomplete', results.incomplete);
-    }
+      highlighters.forEach(item => {
+        item.addEventListener('change', (e) => {
+          const el = e.target;
+          if( el.checked){
+            if(!selectors.includes(el.value)){
+              selectors.push(el.value);
+            }
+          }else{
+            selectors = selectors.filter(selector => selector !== el.value);
+          }
 
-    this.initExpanders();
-    this.initHighlights();
-  };
+          const linkedInputs = document.querySelectorAll(`[data-a11y-highlight][value="${parseString(el.value)}"]`);
 
-  FractalAxeA11yUI.prototype.initHighlights = function (){
-    const highlighters = document.querySelectorAll('[data-a11y-highlight]');
+          linkedInputs.forEach(linkedInput => (linkedInput.checked = el.checked));
 
-    highlighters.forEach(item => {
-      item.addEventListener('change', (e) => {
-        const el = e.target;
-        if( el.checked){
-          if(!this.selectors.includes(el.value)){
-            this.selectors.push(el.value);
-          }
-        }else{
-          this.selectors = this.selectors.filter(selector => selector !== el.value);
-        }
+          updateHighlightStyles();
+        });
+      });
+    };
 
-        const linkedInputs = document.querySelectorAll(`[data-a11y-highlight][value="${this.parseString(el.value)}"]`);
+    const updateHighlightStyles = function (){
+      document.querySelector('.Preview-iframe').contentWindow.postMessage({ message: 'a11yUpdateHighlight', selectors: selectors});
+    };
 
-        linkedInputs.forEach(linkedInput => (linkedInput.checked = el.checked));
+    const initExpanders = function (){
+      const expanders = document.querySelectorAll('[data-a11y-expander]');
 
-        this.updateHighlightStyles();
-      });
-    });
-  };
+      expanders.forEach(item => {
+        const trigger = item.querySelector('[data-a11y-expander-trigger]');
+        const content = item.querySelector('[data-a11y-expander-content]');
+        const contentInner = item.querySelector('[data-a11y-expander-content-inner]');
 
-  FractalAxeA11yUI.prototype.updateHighlightStyles = function (){
-    this.iframe.postMessage({ message: 'a11yUpdateHighlight', selectors: this.selectors});
-  };
+        trigger.addEventListener('click', (e) => {
+          const isActive = item.classList.contains('axe-a11y__expander--active');
+          const contentHeight = contentInner.clientHeight;
 
-  FractalAxeA11yUI.prototype.initExpanders = function (){
-    const expanders = document.querySelectorAll('[data-a11y-expander]');
+          if( isActive ){
+            content.style.height = `${contentHeight}px`;
+            item.classList.remove('axe-a11y__expander--active');
 
-    expanders.forEach(item => {
-      const trigger = item.querySelector('[data-a11y-expander-trigger]');
-      const content = item.querySelector('[data-a11y-expander-content]');
-      const contentInner = item.querySelector('[data-a11y-expander-content-inner]');
+            setTimeout(() => {
+              content.style.height = '';
+            }, 1);
+          }else{
+            content.style.height = `${contentHeight}px`;
 
-      trigger.addEventListener('click', (e) => {
-        const isActive = item.classList.contains('axe-a11y__expander--active');
-        const contentHeight = contentInner.clientHeight;
+            item.classList.add('axe-a11y__expander--active');
 
-        if( isActive ){
-          content.style.height = `${contentHeight}px`;
-          item.classList.remove('axe-a11y__expander--active');
+            setTimeout(() => {
+              content.style.height = `auto`;
+            }, 300);
+          }
 
-          setTimeout(() => {
-            content.style.height = '';
-          }, 1);
-        }else{
-          content.style.height = `${contentHeight}px`;
+          e.preventDefault();
+        }, false);
+      })
+    };
 
-          item.classList.add('axe-a11y__expander--active');
+    const parseString = function (str){
+      if(!str) return;
 
-          setTimeout(() => {
-            content.style.height = `auto`;
-          }, 300);
-        }
+      return str.replace(/[&<>\'\"]/g,
+        tag =>
+          ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            "'": '&#39;',
+            '"': '&quot;'
+          }[tag] || tag)).replace(/(\r\n|\n\r|\r|\n)/g, '<br>');
+    }
 
-        e.preventDefault();
-      }, false);
-    })
-  };
+    const buildItem = function (item) {
+      const tags = item.tags.map((tag) => {
+        return `<li>${parseString(tag)}</li>`;
+      }).join('');
 
-  FractalAxeA11yUI.prototype.parseString = function (str){
-    if(!str) return;
 
-    return str.replace(/[&<>\'\"]/g,
-      tag =>
-        ({
-          '&': '&amp;',
-          '<': '&lt;',
-          '>': '&gt;',
-          "'": '&#39;',
-          '"': '&quot;'
-        }[tag] || tag)).replace(/(\r\n|\n\r|\r|\n)/g, '<br>');
-  }
+      const nodes = item.nodes.map((el) => {
+        if( !el.failureSummary) return;
 
-  FractalAxeA11yUI.prototype.buildItem = function (item) {
-    const tags = item.tags.map((tag) => {
-      return `<li>${this.parseString(tag)}</li>`;
-    }).join('');
+        return `
+          <li>
+            <div class="axe-a11y__node-header">
+              <code>${parseString(el.target[0])}</code>
 
+              <label class="axe-a11y__highlight">
+                <span>Highlight</span>
+                <input type="checkbox" name="highlight" value="${parseString(el.target[0])}" data-a11y-highlight />
+              </label>
+            </div>
 
-    const nodes = item.nodes.map((el) => {
-      if( !el.failureSummary) return;
+            ${el.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${el.impact}">${parseString(el.impact)}</span>` : ``}
 
+            ${el.failureSummary ? `<p>${parseString(el.failureSummary)}</p>` : ``}
+          </li>
+        `;
+      }).join('');
+
       return `
-        <li>
-          <div class="axe-a11y__node-header">
-            <code>${this.parseString(el.target[0])}</code>
+      <li class="axe-a11y__item axe-a11y__expander" data-a11y-expander>
+        <button class="axe-a11y__expander-trigger" data-a11y-expander-trigger>
+          <span class="axe-a11y__expander-icon"></span>
 
-            <label class="axe-a11y__highlight">
-              <span>Highlight</span>
-              <input type="checkbox" name="highlight" value="${this.parseString(el.target[0])}" data-a11y-highlight />
-            </label>
-          </div>
+          <span class="axe-a11y__expander-title">${parseString(item.help)}</span>
 
-          ${el.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${el.impact}">${this.parseString(el.impact)}</span>` : ``}
+          ${item.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${item.impact}">${parseString(item.impact)}</span>` : ``}
+        </button>
 
-          ${el.failureSummary ? `<p>${this.parseString(el.failureSummary)}</p>` : ``}
-        </li>
-      `;
-    }).join('');
+        <div class="axe-a11y__expander-content" data-a11y-expander-content>
+          <div class="axe-a11y__expander-content-inner" data-a11y-expander-content-inner>
+            <p>${parseString(item.description)}</p>
 
-    return `
-    <li class="axe-a11y__item axe-a11y__expander" data-a11y-expander>
-      <button class="axe-a11y__expander-trigger" data-a11y-expander-trigger>
-        <span class="axe-a11y__expander-icon"></span>
+            <p><a href="${item.helpUrl}" target="_blank" aria-label="More info. Opens in a new tab." class="axe-a11y__cta">More info</a></p>
 
-        <span class="axe-a11y__expander-title">${this.parseString(item.help)}</span>
+            ${nodes ? `
+              <div class="axe-a11y__item-nodes-wrapper">
+                <span class="axe-a11y__subtitle">Issues</span>
 
-        ${item.impact ? `<span class="axe-a11y__impact axe-a11y__impact--${item.impact}">${this.parseString(item.impact)}</span>` : ``}
-      </button>
+                <ol class="axe-a11y__item-nodes">
+                  ${nodes}
+                </ol>
+              </div>
+            ` : ``}
 
-      <div class="axe-a11y__expander-content" data-a11y-expander-content>
-        <div class="axe-a11y__expander-content-inner" data-a11y-expander-content-inner>
-          <p>${this.parseString(item.description)}</p>
+            <div class="axe-a11y__item-tags-wrapper">
+              <span class="axe-a11y__subtitle">Tags</span>
 
-          <p><a href="${item.helpUrl}" target="_blank" aria-label="More info. Opens in a new tab." class="axe-a11y__cta">More info</a></p>
-
-          ${nodes ? `
-            <div class="axe-a11y__item-nodes-wrapper">
-              <span class="axe-a11y__subtitle">Issues</span>
-
-              <ol class="axe-a11y__item-nodes">
-                ${nodes}
-              </ol>
+              <ul class="axe-a11y__item-tags">
+                ${tags}
+              </ul>
             </div>
-          ` : ``}
+          </div>
+        </li>
+      `
+    };
 
-          <div class="axe-a11y__item-tags-wrapper">
-            <span class="axe-a11y__subtitle">Tags</span>
+    const buildGroup = function (title, variation, data) {
+      const elements = data.map((item) => {
+        return buildItem(item);
+      }).join('');
 
-            <ul class="axe-a11y__item-tags">
-              ${tags}
-            </ul>
-          </div>
+      return `
+        <div class="axe-a11y__group axe-a11y__group--${variation}">
+          <h2 class="axe-a11y__group-title">${title}</h2>
+          <ul class="axe-a11y__items">${elements}</ul>
         </div>
-      </li>
-    `
-  };
+      `;
+    };
 
-  FractalAxeA11yUI.prototype.buildGroup = function (title, variation, data) {
-    const elements = data.map((item) => {
-      return this.buildItem(item);
-    }).join('');
+    const clearElement = function (element) {
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      return element;
+    };
 
-    return `
-      <div class="axe-a11y__group axe-a11y__group--${variation}">
-        <h2 class="axe-a11y__group-title">${title}</h2>
-        <ul class="axe-a11y__items">${elements}</ul>
-      </div>
-    `;
-  };
+    const setDate = function (date) {
+      const latestDate = date ? new Date(date) : new Date();
+      const parsedDate = latestDate.toLocaleDateString();
+      const parsedTime = latestDate.toLocaleTimeString();
+      const dateElement = document.querySelector('.axe-a11y__date');
 
-  FractalAxeA11yUI.prototype.clearElement = function (element) {
-    while (element.firstChild) {
-      element.removeChild(element.firstChild);
-    }
-    return element;
-  };
+      dateElement.innerHTML = `Last updated: ${parsedDate} - ${parsedTime}`;
+    };
 
-  FractalAxeA11yUI.prototype.setDate = function (date) {
-    const latestDate = date ? new Date(date) : new Date();
-    const parsedDate = latestDate.toLocaleDateString();
-    const parsedTime = latestDate.toLocaleTimeString();
-    const dateElement = document.querySelector('.axe-a11y__date');
+    const loadData = function () {
+      if(!window.localStorage) return;
 
-    dateElement.innerHTML = `Last updated: ${parsedDate} - ${parsedTime}`;
-  };
+      const storeId = getStoreId();
 
-  FractalAxeA11yUI.prototype.loadData = function () {
-    if(!window.localStorage) return;
+      const data = window.localStorage.getItem(storeId);
 
-    const storeId = this.getStoreId();
+      if(!data) return;
 
-    const data = window.localStorage.getItem(storeId);
+      const parsedData = JSON.parse(data);
 
-    if(!data) return;
+      setDate(parsedData.date);
+      parseResults(parsedData.results);
+    };
 
-    const parsedData = JSON.parse(data);
+    const saveData = function (data) {
+      if(!window.localStorage) return;
 
-    this.setDate(parsedData.date);
-    this.parseResults(parsedData.results);
-  };
+      const storeId = getStoreId();
+      const date = new Date();
 
-  FractalAxeA11yUI.prototype.saveData = function (data) {
-    if(!window.localStorage) return;
+      const storeData = {
+        date,
+        results: data
+      };
 
-    const storeId = this.getStoreId();
-    const date = new Date();
+      window.localStorage.setItem(storeId, JSON.stringify(storeData));
 
-    const storeData = {
-      date,
-      results: data
+      setDate(date);
     };
 
-    window.localStorage.setItem(storeId, JSON.stringify(storeData));
+    const getStoreId = function () {
+      const wrapper = document.querySelector('.Browser-axe-a11y');
+      const entityId = wrapper.getAttribute('data-entity-id');
+      const entityHandle = wrapper.getAttribute('data-entity-handle');
 
-    this.setDate(date);
-  };
+      return `fractal-a11y-${entityHandle}-${entityId}`;
+    };
 
-  FractalAxeA11yUI.prototype.getStoreId = function () {
-    const wrapper = document.querySelector('.Browser-axe-a11y');
-    const entityId = wrapper.getAttribute('data-entity-id');
-    const entityHandle = wrapper.getAttribute('data-entity-handle');
+    loadData();
 
-    return `fractal-a11y-${entityHandle}-${entityId}`;
-  };
+    window.addEventListener('message', receiveMessage, false);
+    window.addEventListener('a11yPanelLoad', loadData, false);
 
+    return {
+      run: run
+    }
+  }
+
   window.FractalAxeA11yUI = new FractalAxeA11yUI();
 }(document));

No alert changes

Improved metrics

Lines of code

24155

0.02%

Worsened metrics

Total package byte prevSize

896992

-0.02%

No dependency changes