@govtechsg/oobee 0.10.20

package/src/static/ejs/partials/scripts/ruleOffcanvas.ejs

@@ -0,0 +1,801 @@
+<%# functions used to populate content in the rule offcanvas that appears when an item in the
+category summary is clicked %>
+
+<script>
+    let currentComboboxOptionIndex = 0;
+    let isListenerAttached = false;
+    let options;
+    let isOffCanvasComboboxOpen = false;
+
+    function generateWcagConformanceLinks(conformanceList) {
+      const wcagConformanceUrls = {
+        wcag111: 'https://www.w3.org/TR/WCAG22/#non-text-content',
+        wcag122: 'https://www.w3.org/TR/WCAG22/#captions-prerecorded',
+        wcag131: 'https://www.w3.org/TR/WCAG22/#info-and-relationships',
+        wcag134: 'https://www.w3.org/TR/WCAG22/#orientation',
+        wcag135: 'https://www.w3.org/TR/WCAG22/#identify-input-purpose',
+        wcag141: 'https://www.w3.org/TR/WCAG22/#use-of-color',
+        wcag142: 'https://www.w3.org/TR/WCAG22/#audio-control',
+        wcag143: 'https://www.w3.org/TR/WCAG22/#contrast-minimum',
+        wcag144: 'https://www.w3.org/TR/WCAG22/#resize-text',
+        wcag146: 'https://www.w3.org/TR/WCAG21/#contrast-enhanced',
+        wcag1410: 'https://www.w3.org/TR/WCAG22/#reflow',
+        wcag1412: 'https://www.w3.org/TR/WCAG22/#text-spacing',
+        wcag211: 'https://www.w3.org/TR/WCAG22/#keyboard',
+        wcag221: 'https://www.w3.org/TR/WCAG22/#timing-adjustable',
+        wcag222: 'https://www.w3.org/TR/WCAG22/#pause-stop-hide',
+        wcag224: 'https://www.w3.org/TR/WCAG21/#interruptions',
+        wcag241: 'https://www.w3.org/TR/WCAG22/#bypass-blocks',
+        wcag242: 'https://www.w3.org/TR/WCAG22/#page-titled',
+        wcag243: 'https://www.w3.org/TR/WCAG22/#focus-order',
+        wcag244: 'https://www.w3.org/TR/WCAG22/#link-purpose-in-context',
+        wcag249: 'https://www.w3.org/TR/WCAG21/#link-purpose-link-only',
+        wcag258: 'https://www.w3.org/TR/WCAG22/#target-size-minimum',
+        wcag311: 'https://www.w3.org/TR/WCAG22/#language-of-page',
+        wcag312: 'https://www.w3.org/TR/WCAG22/#language-of-parts',
+        wcag315: 'https://www.w3.org/TR/WCAG22/#reading-level',
+        wcag332: 'https://www.w3.org/TR/WCAG22/#labels-or-instructions',
+        wcag325: 'https://www.w3.org/TR/WCAG21/#change-on-request',
+        wcag411: 'https://www.w3.org/TR/WCAG22/#parsing',
+        wcag412: 'https://www.w3.org/TR/WCAG22/#name-role-value',
+      };
+
+      const links = [];
+      for (let i = 1; i < conformanceList.length; i++) {
+        const [wcagSection, subSection, ...sectionItem] = conformanceList[i].slice(4); // slice to get rid of 'wcag';
+        const formattedConformanceNumber = `${wcagSection}.${subSection}.${sectionItem.join('')}`;
+        links.push(
+          `<a href="${
+            wcagConformanceUrls[conformanceList[i]]
+          }" target="_blank">WCAG ${formattedConformanceNumber}</a>`,
+        );
+      }
+      return links.join('&nbsp&nbsp,&nbsp&nbsp&nbsp');
+    }
+
+    function expandRule(selectedCategory, selectedRule) {
+      const conformanceLevels = {
+        wcag2a: 'A',
+        wcag2aa: 'AA',
+        wcag21aa: 'AA',
+        wcag22aa: 'AA',
+        wcag2aaa: 'AAA',
+      };
+
+      document.getElementById('expandedRuleName').innerHTML = htmlEscapeString(
+        selectedRule.description,
+      );
+
+      const expandedRuleDescription = document.getElementById('expandedRuleDescription');
+      if (whyItMatters[selectedRule.rule]) {
+        expandedRuleDescription.hidden = false;
+        expandedRuleDescription.innerHTML = whyItMatters[selectedRule.rule];
+      } else {
+        expandedRuleDescription.hidden = true;
+      }
+
+      const expandedRuleHelpUrl = document.getElementById('expandedRuleHelpUrl');
+      if (selectedRule.helpUrl) {
+        expandedRuleHelpUrl.hidden = false;
+        expandedRuleHelpUrl.href = selectedRule.helpUrl;
+      } else {
+        expandedRuleHelpUrl.hidden = true;
+      }
+
+      // will be read out by screen readers but invisible on the page
+      const spanForSr = `<span class="visually-hidden">Level&nbsp;</span>`;
+      const wcagLevel = selectedRule.conformance[0];
+      const aLevel = conformanceLevels[wcagLevel]; // the actual level (i.e. "A", "AA")
+      const bestPracIcon = `<img src="data:image/svg+xml,<svg width='11' height='15' viewBox='0 0 11 15' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.27122 14.4973C3.32493 14.4973 2.55693 13.7293 2.55693 12.7831V9.35449H7.69979V12.7831C7.69979 13.7293 6.93179 14.4973 5.9855 14.4973H4.27122Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M7.69712 12.0171H5.98283V10.6234C5.98626 10.4297 6.00169 10.2497 6.03598 10.0766C6.14912 9.48343 6.47312 9.03771 6.79369 8.62971L7.20855 8.12057C7.38512 7.90457 7.5634 7.69029 7.7314 7.46743C8.43598 6.54171 8.67769 5.55257 8.47026 4.44343C8.18055 2.89371 6.74912 1.72114 5.14112 1.71429C3.5074 1.72114 2.07598 2.89371 1.78626 4.44343C1.58055 5.55257 1.82226 6.54171 2.52512 7.46743C2.69655 7.692 2.87483 7.90971 3.05483 8.12743L3.46283 8.63143C3.83312 9.08743 4.17255 9.50914 4.28226 10.0783C4.31483 10.2514 4.33026 10.4331 4.33369 10.6114V12.0171H2.6194V10.6234C2.61769 10.5566 2.61255 10.4794 2.59883 10.4023C2.56969 10.2531 2.38626 10.0269 2.22683 9.828L1.7314 9.216C1.53769 8.98114 1.34569 8.748 1.16055 8.50629C0.161118 7.19143 -0.195453 5.71886 0.101118 4.128C0.545118 1.74514 2.65198 0.0102857 5.10855 0C7.60455 0.0102857 9.7114 1.74514 10.1554 4.128C10.452 5.71886 10.0954 7.19143 9.09598 8.50629C8.91426 8.74457 8.72398 8.97771 8.53198 9.20914L8.1394 9.69429C7.94055 9.94457 7.75883 10.1863 7.7194 10.4006C7.70398 10.4811 7.69883 10.56 7.69712 10.6389V12.0171Z' fill='white'/></svg>" alt="" />`
+
+      document.getElementById('expandedRuleConformance').replaceChildren(
+        createElementFromString(`
+        <div class="d-flex align-items-center">
+          <div ${aLevel ? "" : "aria-hidden=\"true\""} class="conformance-bubble ${wcagLevel}">
+            ${aLevel ? spanForSr : ""}
+            ${aLevel ? aLevel : bestPracIcon}
+          </div>
+          ${
+            !aLevel
+              ? `<span>Best practice</span>`
+              : generateWcagConformanceLinks(selectedRule.conformance)
+          }
+        </div>
+      `),
+      );
+
+      if (oobeeAiRules.includes(selectedRule.rule)) {
+        document.querySelector('#expandedRuleAiFeedback').style.display = 'block';
+      } else {
+        document.querySelector('#expandedRuleAiFeedback').style.display = 'none';
+      }
+
+      const availableFixCategories = [];
+      const categorySelectors = [];
+      const comboboxCategorySelectors = [];
+
+      Object.keys(filteredItems).forEach(category => {
+        const ruleInCategory = filteredItems[category].rules.find(r => r.rule === selectedRule.rule);
+
+        if (ruleInCategory !== undefined && category !== 'passed') {
+          if (category !== 'passed') {
+            availableFixCategories.push(category);
+          }
+
+          // Create button / combobox option for each category based on availableCategories
+          const element = createElementFromString(`
+            <button id="${category}OffCanvasButtonSelector" aria-label="${getFormattedCategoryTitle(category)}, ${
+              ruleInCategory.totalItems
+              } ${ruleInCategory.totalItems === 1 ? 'occurrence' : 'occurrences'}" class="${category} category-selector">
+              <span class="d-flex align-items-center category-name">${getFormattedCategoryTitle(
+                category,
+              )}</span>
+              <span class="category-information">${ruleInCategory.totalItems} ${ruleInCategory.totalItems === 1 ? 'occurrence' : 'occurrences'}</span>
+            </button>
+          `);
+
+          const ruleOffCanvasComboboxOption = createElementFromString(`
+            <li
+              tabindex="-1"
+              id="${category}ExpandedRuleDropdownSelector"
+              class="${category} category-selector d-flex flex-row align-items-center gap-2 position-relative"
+              role="option"
+              >
+              <span
+                  id="${category}Title"
+                  class="d-flex align-items-center category-name fw-bold d-inline mb-0"
+              >
+              ${getFormattedCategoryTitle(category)}
+              </span>
+              <span id="${category}ItemsInformation" class="category-information">
+
+                (${ruleInCategory.totalItems} Occurrences)
+
+                  </span>
+            </li>`
+          );
+
+          // Populate the array of button / combobox option
+          categorySelectors.push(element);
+          comboboxCategorySelectors.push(ruleOffCanvasComboboxOption);
+
+          // Dynamically update the button / combobox option for categorySelectors
+          document.getElementById('expandedRuleCategorySelectors').replaceChildren(...categorySelectors);
+          document.getElementById('expandedRuleIssueTypeListbox').replaceChildren(...comboboxCategorySelectors);
+
+          // Iterate through each button / combobox option and add event listeners
+          document.getElementById('expandedRuleCategorySelectors').querySelectorAll("button").forEach(button => {
+            button.addEventListener('click', event => {
+
+              // Stops event listener from being added multiple times
+              event.stopImmediatePropagation()
+
+              removeSelectedClass()
+
+              event.currentTarget.classList.add('selected')
+
+              document.getElementById(`${event.currentTarget.classList[0]}ExpandedRuleDropdownSelector`).classList.add('selected')
+
+              updateExpandedRuleDropdownToggleContainer(`(${event.currentTarget.children[1].innerText})`)
+
+              ruleInfoText()
+
+              buildExpandedRuleCategoryContent(category, ruleInCategory);
+            })
+          })
+
+          document.getElementById('expandedRuleIssueTypeListbox').querySelectorAll("li").forEach(list => {
+            list.addEventListener('click', event => {
+
+              // Stops event listener from being added multiple times
+              event.stopImmediatePropagation()
+
+              removeSelectedClass()
+
+              event.currentTarget.classList.add('selected')
+
+              document.getElementById(`${event.currentTarget.classList[0]}OffCanvasButtonSelector`).classList.add('selected')
+
+              updateExpandedRuleDropdownToggleContainer(event.currentTarget.children[1].innerText)
+
+              ruleInfoText()
+
+              buildExpandedRuleCategoryContent(category, ruleInCategory);
+
+              toggleOffCanvasCombobox();
+            });
+          });
+
+          // Automatically click corresponding button / combobox option category in ruleOffCanvas
+          if (category === selectedCategory) {
+            element.click();
+
+            document.getElementById('expandedRuleDropdownToggleContainer').classList.replace(expandedRuleDropdownToggleContainer.classList[0], category);
+            document.getElementById('expandedRuleDropdownToggleCategoryTitle').innerText = getFormattedCategoryTitle(category)
+            document.getElementById('expandedRuleDropdownToggleCategoryInfo').innerText = `(${ruleInCategory.totalItems} Occurrences)`
+          }
+          if (category === selectedCategory) {
+            ruleOffCanvasComboboxOption.click();
+
+            document.getElementById('expandedRuleDropdownToggleContainer').classList.replace(expandedRuleDropdownToggleContainer.classList[0], category);
+            document.getElementById('expandedRuleDropdownToggleCategoryTitle').innerText = getFormattedCategoryTitle(category)
+            document.getElementById('expandedRuleDropdownToggleCategoryInfo').innerText = `(${ruleInCategory.totalItems} Occurrences)`
+          }
+        }
+
+        function ruleInfoText() {
+          document.getElementById('expandedRuleInfoText');
+          if (category === 'mustFix' && availableFixCategories.includes('goodToFix')) {
+            ruleInfoText.innerHTML =
+              '<p class="mb-4">There are also occurrences of this issue that falls under "Good to Fix”.</p>';
+          } else if (category === 'goodToFix' && availableFixCategories.includes('mustFix')) {
+            ruleInfoText.innerHTML =
+              '<p class="mb-4">There are also occurrences of this issue that falls under "Must Fix”.</p>';
+          } else if (category === 'passed' && availableFixCategories.length > 0) {
+            ruleInfoText.innerHTML = `<p class="mb-4">There are also occurrences of this issue that falls under ${availableFixCategories
+              .map(c => `"${getFormattedCategoryTitle(c)}"`)
+              .join(' and ')}.</p>`;
+          } else {
+            ruleInfoText.innerHTML = '';
+          }
+        }
+
+        function updateExpandedRuleDropdownToggleContainer(dropdownOccurrencesString){
+          document.getElementById('expandedRuleDropdownToggleContainer').classList.replace(expandedRuleDropdownToggleContainer.classList[0], event.currentTarget.classList[0]);
+          document.getElementById('expandedRuleDropdownToggleCategoryTitle').innerText = event.currentTarget.children[0].innerText.replace(/\n/g, '')
+          document.getElementById('expandedRuleDropdownToggleCategoryInfo').innerText = dropdownOccurrencesString
+        }
+      });
+      //  START Script expandedRuleDropdownCategorySelector
+  const offCanvasComboboxElements = {
+    button: document.getElementById('expandedRuleIssueTypeComboBox'),
+    wrapper: document.getElementById('expandedRuleIssueTypeComboBoxWrapper'),
+    dropdown: document.getElementById('expandedRuleIssueTypeListbox'),
+  };
+
+  function toggleOffCanvasCombobox() {
+  document.getElementById('expandedRuleIssueTypeListbox').classList.toggle('active');
+    isOffCanvasComboboxOpen = !isOffCanvasComboboxOpen;
+    document.getElementById('expandedRuleIssueTypeComboBox').setAttribute('aria-expanded', isOffCanvasComboboxOpen.toString());
+
+    if (isOffCanvasComboboxOpen) {
+      document.getElementById('expandedRuleIssueTypeComboBox').setAttribute('aria-activedescendant', 'expandedRuleIssueTypeListbox');
+    }
+  }
+
+  const handleKeyPressInOffCanvas = event => {
+      const { key } = event;
+      const openKeys = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
+
+      if (!isOffCanvasComboboxOpen && openKeys.includes(key)) {
+      toggleOffCanvasCombobox();
+      focusCurrentOption();
+    } else if (isOffCanvasComboboxOpen) {
+      switch (key) {
+        case 'Escape':
+          event.preventDefault();
+          toggleOffCanvasCombobox();
+          break;
+          case 'ArrowDown':
+          moveFocusDown();
+          break;
+          case 'ArrowUp':
+          moveFocusUp();
+          break;
+          case 'Enter':
+          case ' ':
+          const selectedComboboxRule = focusCurrentOption();
+          document.getElementById(`${selectedComboboxRule}ExpandedRuleDropdownSelector`).click();
+          break;
+        case 'Tab':
+          toggleOffCanvasCombobox();
+          break;
+        default:
+          break;
+      }
+    }
+    };
+
+  const handleOffCanvasComboboxInteraction = event => {
+      const isClickInsideButton = offCanvasComboboxElements.button.contains(event.target);
+      const isClickInsideDropdown = offCanvasComboboxElements.dropdown.contains(event.target);
+
+      if (isClickInsideButton || (!isClickInsideDropdown && isOffCanvasComboboxOpen)) {
+        toggleOffCanvasCombobox();
+      }
+
+      const clickedOffCanvasComboboxElement = event.target.closest('[role="option"]');
+
+      let clickedOffCanvasComboboxOption = null;
+      if (clickedOffCanvasComboboxElement && offCanvasComboboxElements.dropdown.contains(clickedOffCanvasComboboxElement)) {
+        clickedOffCanvasComboboxOption = clickedOffCanvasComboboxElement;
+      }
+
+      if (clickedOffCanvasComboboxOption) {
+        toggleOffCanvasCombobox();
+      }
+
+    };
+
+    const moveFocusDown = () => {
+      if (currentComboboxOptionIndex < document.getElementById('expandedRuleIssueTypeListbox').querySelectorAll('[role="option"]').length - 1) {
+        currentComboboxOptionIndex++;
+      } else {
+        currentComboboxOptionIndex = 0;
+      }
+      focusCurrentOption();
+    };
+
+    const moveFocusUp = () => {
+      if (currentComboboxOptionIndex > 0) {
+        currentComboboxOptionIndex--;
+      } else {
+        currentComboboxOptionIndex = document.getElementById('expandedRuleIssueTypeListbox').querySelectorAll('[role="option"]').length - 1;
+      }
+      focusCurrentOption();
+    };
+
+    const focusCurrentOption = () => {
+      const currentComboboxOption = document.getElementById('expandedRuleIssueTypeListbox').querySelectorAll('[role="option"]')[currentComboboxOptionIndex];
+
+      currentComboboxOption.focus();
+
+      currentComboboxOption.scrollIntoView({
+        block: 'nearest',
+      });
+      return currentComboboxOption.classList[0];
+    };
+
+    if (!isListenerAttached) {
+      offCanvasComboboxElements.wrapper.addEventListener('keydown', handleKeyPressInOffCanvas);
+      document.addEventListener('click', handleOffCanvasComboboxInteraction);
+      isListenerAttached = true;
+    }
+    // END Script expandedRuleDropdownCategorySelector
+    }
+
+    function removeSelectedClass() {
+      document.getElementById('expandedRuleCategorySelectors').querySelectorAll("button").forEach(button => {
+        button.classList.remove('selected');
+      });
+      document.getElementById('expandedRuleIssueTypeListbox').querySelectorAll("li").forEach(list => {
+        list.classList.remove('selected');
+      });
+    }
+
+    function buildExpandedRuleCategoryContent(category, ruleInCategory) {
+      const contentContainer = document.getElementById('expandedRuleCategoryContent');
+      const isCustomFlow = <%- isCustomFlow -%>;
+
+      if (category === 'passed') {
+        contentContainer.innerHTML = `You may find the list of passed HTML elements in <a href='./passed_items.json' target='_blank'>passed_items.json.txt</a>.`;
+        return;
+      }
+
+      const contentTitle = createElementFromString(`
+        <h4 id="issue-page-count" class="mb-4">
+          Pages with this issue (${ruleInCategory.pagesAffected.length})
+        </h4>`);
+
+      const accordionsList = createElementFromString(`<ul class="unbulleted-list"></ul>`);
+
+      ruleInCategory.pagesAffected.forEach((page, index) => {
+        const accordionId = `${ruleInCategory.rule}-${category}-page-${index}`;
+        var accordionAIId = `${ruleInCategory.rule}-${category}-accordion-AI-${index}`;
+        var buttonAIId = `${ruleInCategory.rule}-${category}-button-AI-${index}`;
+        var errorAIId = `${ruleInCategory.rule}-${category}-error-AI-${index}`;
+
+        const accordion = createElementFromString(`
+          <li>
+            <div class="accordion mt-2 ${category}">
+              <div class="accordion-item">
+                <div class="accordion-header" id="${accordionId}-title">
+                  <button
+                    aria-label="Page ${index + 1}: ${page.pageTitle}, ${page.items.length} ${page.items.length === 1 ? 'occurrence' : 'occurrences'}" class="accordion-button collapsed"
+                    type="button"
+
+                  >
+                    <span class="sr-only visually-hidden">${page.items.length} ${page.items.length === 1 ? 'occurrence' : 'occurrences'}</span>
+                    <div class="me-3">${page.metadata ? page.metadata : page.pageTitle}</div>
+                    <div class="ms-auto counter">${page.items.length}</div>
+                  </button>
+                </div>
+                <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
+                  <div class="accordion-body p-3">
+                    ${ isCustomFlow
+                      ?
+                      `
+                        <div class="custom-flow-screenshot-container">
+                          <img alt="Screenshot of ${page.url}" src="${page.pageImagePath}" class="custom-flow-screenshot"/>
+                          <div><a href="${page.url}" target="_blank">${page.url}</a></div>
+                        </div>
+                      `
+                      : `<a href="${page.url}" target="_blank">${page.url}</a>`
+                    }
+                    <div class="page-accordion-content-title">
+                      <span>${getFormattedCategoryTitle(category)} elements</span>
+                      <span class="page-items-count">${page.items.length}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        `);
+
+        accordion.querySelector('button').addEventListener('click', function(event) {
+          var accordionBody = accordion.querySelector(".accordion-body");
+
+          // So that It does not keep adding
+          if (!accordionBody.querySelector(".unbulleted-list"))
+          {
+            buildExpandedRuleCategoryContentAccordian(accordionId,category,ruleInCategory,page,index);
+
+            this.setAttribute('data-bs-target', '#' + accordionId+"-content");
+
+            // Remove the event listener temporarily
+            this.removeEventListener('click', arguments.callee);
+
+            // Programmatically trigger a click on the button to open the accordion
+            this.click();
+          }
+        });
+
+        accordion.querySelector('button').addEventListener('click', function(event) {
+          // Set data attributes
+          this.setAttribute('data-bs-toggle', 'collapse');
+          this.setAttribute('data-bs-target', '#' + accordionId + "-content");
+          this.setAttribute('aria-expanded', 'false');
+          this.setAttribute('aria-controls', accordionId + "-content");
+
+          // Initialize  the Collapse plugin on the button element
+          var collapse = new bootstrap.Collapse(this, {
+            toggle: false // Set to true if you want to toggle the collapsed state on initialization
+          });
+
+          // Remove the event listener temporarily
+          this.removeEventListener('click', arguments.callee);
+
+          // Programmatically trigger a click on the button to open the accordion
+          setTimeout(() => { // Delaying to ensure the content is added before triggering the click
+              this.click();
+          }, 0);
+
+        })
+
+        if (isCustomFlow) {
+          const customScreenshotElem = accordion.getElementsByClassName(`custom-flow-screenshot`)[0];
+          customScreenshotElem.onerror = function(event) {
+            this.onerror = null;
+            this.remove();
+          }
+          customScreenshotElem.onclick = function(event) {
+            event.preventDefault();
+            openLightbox(this.src, page.pageTitle, page.url);
+          }
+        }
+
+        accordionsList.appendChild(accordion);
+        return accordion;
+      });
+      contentContainer.replaceChildren(contentTitle, accordionsList);
+
+      hljs.highlightAll();
+    }
+
+    function generateItemMessageElement(displayNeedsReview, rawMessage) {
+      if (rawMessage.includes('\n\nFix')) {
+        rawMessage = rawMessage.replace('\n\nFix', '\n  Fix');
+      }
+
+      const htmlEscapedMessageArray = rawMessage.split('\n  ').map(m => htmlEscapeString(m));
+
+      if (displayNeedsReview) {
+        if (htmlEscapedMessageArray.length === 1) {
+          return `<p class="mb-0">${htmlEscapedMessageArray[0]}</p>`;
+        } else {
+          return `<ul>${htmlEscapedMessageArray.map(m => `<li>${m}</li>`).join('')}</ul>`;
+        }
+      } else {
+        let i = 0;
+        const elements = [];
+        while (i < htmlEscapedMessageArray.length) {
+          if (htmlEscapedMessageArray[i].startsWith('Fix ')) {
+            elements.push(`<p class="mb-0">${htmlEscapedMessageArray[i]}</p>`);
+            i++;
+          } else {
+            const fixesList = [];
+            while (
+              i < htmlEscapedMessageArray.length &&
+              !htmlEscapedMessageArray[i].startsWith('Fix a')
+            ) {
+              fixesList.push(`<li>${htmlEscapedMessageArray[i]}</li>`);
+              i++;
+            }
+            elements.push(`<ul>${fixesList.join('')}</ul>`);
+          }
+        }
+
+        return elements.join('');
+      }
+    }
+
+    function buildExpandedRuleCategoryContentAccordian(accordionId, ruleInCategory)
+    {
+      console.log('Accordion ID:', accordionId);
+      console.log('ruleInCategory',JSON.stringify(ruleInCategory))
+    }
+
+    function buildExpandedRuleCategoryContentAccordian(accordionId,category,ruleInCategory,page,index)
+    {
+      var accordionAIId = `${ruleInCategory.rule}-${category}-accordion-AI-${index}`;
+      var buttonAIId = `${ruleInCategory.rule}-${category}-button-AI-${index}`;
+      var errorAIId = `${ruleInCategory.rule}-${category}-error-AI-${index}`;
+      let accordion = document.getElementById(`${accordionId}-title`).parentElement.parentElement.parentElement
+
+
+      const accordionBody = accordion.getElementsByClassName('accordion-body')[0];
+        const elementCardsList = createElementFromString('<ul class="unbulleted-list"></ul>');
+
+        page.items.forEach(async (item, index) => {
+          const accordionDivToAppendAI = `${accordionAIId}-${index}`;
+          const buttonDivForAiFeedback = `${buttonAIId}-${index}`;
+          const aiErrorDiv = `${errorAIId}-${index}`;
+          let itemCard;
+          const isPurpleAiRule = oobeeAiRules.includes(ruleInCategory.rule);
+          let oobeeAiQueryLabel;
+          if (isPurpleAiRule) {
+            oobeeAiQueryLabel = await checkPurpleAiQueryLabel(ruleInCategory.rule, item.html);
+          }
+
+          itemCard = createElementFromString(`
+            <li>
+              <div class="card mt-3">
+                ${item.displayNeedsReview ? `<div class="needsReview">This occurrence might be a false positive that needs to be verified by a human.</div>` : ``}
+                <div class="p-3">
+                  ${item.screenshotPath
+                    ?
+                  `
+                  <div class="hide-on-img-error">
+                    <div class="d-flex justify-content-between g-one">
+                      <div class="fw-bold">Screenshot</div>
+                      <div class="page-item-card-section-content bg-grey-w-border">
+                        <img
+                          src=${item.screenshotPath}
+                          onerror="this.onerror = null; this.closest('div.hide-on-img-error').remove();"
+                          alt="Screenshot of affected element" />
+                      </div>
+                    </div>
+                    <hr/>
+                  </div>
+                  `
+                    : ``
+                  }
+                  ${ item.xpath
+                    ?
+                    `
+                    <div class="d-flex justify-content-between g-one">
+                      <div class="fw-bold">Path</div>
+                      <div class="page-item-card-section-content">
+                          <div class="g-one path-container">
+                            ${item.xpath}
+                            <button
+                              aria-label="Copy path to clipboard"
+                              class="copy-button"
+                              data-bs-toggle="tooltip"
+                              data-bs-placement="top"
+                              data-bs-original-title="Copy"
+                            >
+                              <svg class="copy-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M14.2188 2.5H7.65625C7.15897 2.5 6.68206 2.69754 6.33042 3.04917C5.97879 3.40081 5.78125 3.87772 5.78125 4.375C5.28397 4.375 4.80706 4.57254 4.45542 4.92417C4.10379 5.27581 3.90625 5.75272 3.90625 6.25V15.625C3.90625 16.1223 4.10379 16.5992 4.45542 16.9508C4.80706 17.3025 5.28397 17.5 5.78125 17.5H12.3438C12.841 17.5 13.3179 17.3025 13.6696 16.9508C14.0212 16.5992 14.2188 16.1223 14.2188 15.625C14.716 15.625 15.1929 15.4275 15.5446 15.0758C15.8962 14.7242 16.0938 14.2473 16.0938 13.75V4.375C16.0938 3.87772 15.8962 3.40081 15.5446 3.04917C15.1929 2.69754 14.716 2.5 14.2188 2.5ZM14.2188 14.6875V6.25C14.2188 5.75272 14.0212 5.27581 13.6696 4.92417C13.3179 4.57254 12.841 4.375 12.3438 4.375H6.71875C6.71875 4.12636 6.81752 3.8879 6.99334 3.71209C7.16915 3.53627 7.40761 3.4375 7.65625 3.4375H14.2188C14.4674 3.4375 14.7058 3.53627 14.8817 3.71209C15.0575 3.8879 15.1562 4.12636 15.1562 4.375V13.75C15.1562 13.9986 15.0575 14.2371 14.8817 14.4129C14.7058 14.5887 14.4674 14.6875 14.2188 14.6875ZM4.84375 6.25C4.84375 6.00136 4.94252 5.7629 5.11834 5.58709C5.29415 5.41127 5.53261 5.3125 5.78125 5.3125H12.3438C12.5924 5.3125 12.8308 5.41127 13.0067 5.58709C13.1825 5.7629 13.2812 6.00136 13.2812 6.25V15.625C13.2812 15.8736 13.1825 16.1121 13.0067 16.2879C12.8308 16.4637 12.5924 16.5625 12.3438 16.5625H5.78125C5.53261 16.5625 5.29415 16.4637 5.11834 16.2879C4.94252 16.1121 4.84375 15.8736 4.84375 15.625V6.25Z" fill="#26241b"/>
+                              </svg>
+                            </button>
+                          </div>
+                      </div>
+                    </div>
+                    <hr/>
+                    `
+                    :``
+                  }
+                  <div class="d-flex justify-content-between g-one">
+                    ${
+                      item.html
+                        ? `
+                        <div class="fw-bold">HTML element</div>
+                        <pre class="page-item-card-section-content">
+                          <code class="language-html">
+                            ${htmlEscapeString(item.html)}
+                          </code>
+                        </pre>`
+                        : `
+                        <div class="fw-bold">Location</div>
+                        <div class="page-item-card-section-content">
+                            ${item.page > 0 ? `Page ${item.page}` : 'Document'}
+                        </div>`
+                    }
+                  </div>
+                  <hr />
+                  <div class="d-flex justify-content-between g-one">
+                    <div class="fw-bold page-item-card-section-title">${
+                      item.displayNeedsReview ? 'Details' : 'How to fix'
+                    }</div>
+                    <div class="page-item-card-section-content">
+                      ${generateItemMessageElement(item.displayNeedsReview, item.message)}
+                    </div>
+                  </div>
+                  ${isPurpleAiRule ? `
+                  <hr />
+                  <div class="d-flex g-one">
+                    <div class="fw-bold page-item-card-section-title">AI suggestion</div>
+                    <div id="${accordionDivToAppendAI}" class="page-item-card-section-content">
+                      ${oobeeAiQueryLabel.hasNetworkError ?
+                        `<button
+                          id=${buttonDivForAiFeedback}
+                          class="aiGenerateResponseButton"
+                          onClick="handleOfflinePurpleAi(
+                            '${ruleInCategory.rule}',
+                            '${accordionDivToAppendAI}',
+                            '${escapeHtmlStringForArg(item.html)}',
+                            '${buttonDivForAiFeedback}',
+                            '${aiErrorDiv}')"
+                          >
+                            Generate response
+                          </button>
+                          <div id=${aiErrorDiv}></div>` :
+                          (oobeeAiQueryLabel.label ?
+                            `<button
+                            id=${buttonDivForAiFeedback}
+                            class="aiGenerateResponseButton"
+                            onClick="getPurpleAiAnswer(
+                              '${ruleInCategory.rule}',
+                              '${accordionDivToAppendAI}',
+                              '${oobeeAiQueryLabel.label}',
+                              '${buttonDivForAiFeedback}',
+                              '${aiErrorDiv}')"
+                            >
+                              Generate response
+                            </button>
+                            <div id=${aiErrorDiv}></div>` :
+                            `<span class="processAI">
+                              Processing AI suggestions, please check back later.
+                            </span>`
+                          )
+                        }
+                    </div>
+                  </div>` : ``
+                  }
+                </div>
+              </div>
+            <li>
+          `);
+          elementCardsList.appendChild(itemCard);
+
+          const copyButtonElem = itemCard.getElementsByClassName('copy-button')[0];
+          const copyTooltipItem = new bootstrap.Tooltip(copyButtonElem);
+          const textToCopy = createElementFromString(`<textarea>${item.xpath}</textarea>`)
+          copyButtonElem.onclick = event => {
+            textToCopy.select();
+            // Copy the text inside the text field
+            navigator.clipboard.writeText(textToCopy.value);
+
+            copyButtonElem.setAttribute('data-bs-original-title', 'Copied');
+            copyTooltipItem.update();
+            copyTooltipItem.show();
+
+            setTimeout(() => {
+              copyButtonElem.setAttribute('data-bs-original-title', 'Copy');
+              copyTooltipItem.update();
+            }, 1500)
+          };
+          copyButtonElem.onmousedown = event => {
+            event.preventDefault();
+          }
+
+          hljs.configure({
+            ignoreUnescapedHTML: true
+          });
+          hljs.highlightAll();
+        });
+
+        accordionBody.appendChild(elementCardsList);
+
+    }
+
+    const whyItMatters = {
+      'accesskeys': '<p>\n  Specifying a <code>accesskey</code> attribute value for some part of a\n  document allows users to quickly activate or move the focus to a specific\n  element by pressing the specified key (usually in combination with the\n  <code><kbd>alt</kbd></code> key). Duplicating <code>accesskey</code> values\n  creates unexpected effects that ultimately make the page less accessible.\n</p>',
+      'area-alt': '<p>\n  Screen readers have no way of translating images into words. It is important\n  that all images, including image maps, have <code>alt</code> text values.\n</p>',
+      'aria-allowed-attr': '<p>\n  Using ARIA attributes in roles where they are not allowed can interfere with\n  the accessibility of the web page. Using an invalid role-attribute combination\n  will, at best, result in no effect on the accessibility of the application\n  and, at worst, may trigger behavior that disables accessibility for entire\n  portions of an application.\n</p>',
+      'aria-command-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;link&quot;</code>, <code>role=&quot;button&quot;</code>, or\n  <code>role=&quot;menuitem&quot;</code> that do not have an accessible name.\n</p>',
+      'aria-dialog-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;dialog&quot;</code> or <code>role=&quot;alertdialog&quot;</code> that do not have\n  an accessible name.\n</p>',
+      'aria-hidden-focus': '<p>\n  Using the <code>aria-hidden=&quot;true&quot;</code> attribute on an element removes the\n  element and ALL of its child nodes from the accessibility API making it\n  completely inaccessible to screen readers and other assistive technologies.\n  Aria-hidden may be used with extreme caution to hide visibly rendered content\n  from assistive technologies only if the act of hiding this content is intended\n  to improve the experience for users of assistive technologies by removing\n  redundant or extraneous content. If aria-hidden is used to hide visible\n  content from screen readers, the identical or equivalent meaning and\n  functionality must be exposed to assistive technologies.\n</p>',
+      'aria-input-field-name': '<p>\n  This new rule ensures every ARIA input field has an accessible name.\n  Accessible names must exist for the following input field roles:\n</p>\n<ul>\n  <li>combobox</li>\n  <li>listbox</li>\n  <li>searchbox</li>\n  <li>slider</li>\n  <li>spinbutton</li>\n  <li>textbox</li>\n</ul>',
+      'aria-meter-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;meter&quot;</code> that do not have an accessible name.\n</p>',
+      'aria-progressbar-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;progressbar&quot;</code> that do not have an accessible name.\n</p>',
+      'aria-required-children': '<p>\n  For each role, WAI-ARIA explicitly defines which child and parent roles are\n  allowable and/or required. ARIA <code>role</code>s missing required child\n  <code>role</code>s will not be able to perform the accessibility functions\n  intended by the developer.\n</p>',
+      'aria-required-parent': '<p>\n  For each role, WAI-ARIA explicitly defines which child and parent roles are\n  allowable and/or required. Elements containing ARIA <code>role</code> values\n  missing required parent element <code>role</code> values will not enable\n  assistive technology to function as intended by the developer.\n</p>',
+      'aria-roledescription': '<p>\n  Inappropriate <code>aria-roledescription</code> attribute values that conflict\n  with an element&apos;s implied or explicit <code>role</code> value can interfere\n  with the accessibility of the web page. A conflicting\n  <code>aria-roledescription</code> attribute value may result in no effect on\n  the accessibility of the application and may trigger behavior that disables\n  accessibility for entire portions of an application.\n</p>',
+      'aria-text': '<p>\n  When a text node is split by markup (e.g.\n  <code>&lt;h1&gt;Hello &lt;span&gt;World&lt;/span&gt;&lt;/h1&gt;</code>)\n  VoiceOver will treat it as two separate phrases instead of just one. Adding\n  <code>role=&quot;text&quot;</code> around the elements solves the problem. However, it\n  also overrides the role of the element and all descendants and treats them all\n  as text nodes. If one of the descendant elements is also focusable it would\n  create an empty tab stop. That is, you could tab to the element but VoiceOver\n  would not announce its name, role, or value.\n</p>',
+      'aria-toggle-field-name': '<p>\n  Ensures every element with a semantic role also has an accessible name.\n  Semantic roles include:\n</p>\n<ul>\n  <li>checkbox</li>\n  <li>menu</li>\n  <li>menuitemcheckbox</li>\n  <li>menuitemradio</li>\n  <li>radio</li>\n  <li>radiogroup</li>\n  <li>switch</li>\n</ul>',
+      'aria-tooltip-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;tooltip&quot;</code> that do not have an accessible name.\n</p>',
+      'aria-treeitem-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;treeitem&quot;</code> that do not have an accessible name.\n</p>',
+      'aria-valid-attr-value': '<p>\n  ARIA attributes (i.e. starting with <code>aria-</code>) must contain valid\n  values. These values must be spelled correctly and correspond to values that\n  make sense for a particular attribute to perform the intended accessibility\n  function.\n</p>',
+      'aria-valid-attr': '<p>\n  If the developer uses a non-existent or misspelled ARIA attribute, the\n  attribute will not be able to perform the accessibility function intended by\n  the developer.\n</p>',
+      'autocomplete-valid': '<p>\n  Failure to provide autocomplete values in form fields results in inaccessible\n  content. Screen readers do not read identified autocomplete form fields if the\n  appropriate autocomplete attribute values are missing. Users cannot correctly\n  navigate forms when screen readers cannot provide adequate information to the\n  user regarding form field interaction requirements.\n</p>',
+      'avoid-inline-spacing': '<p>\n  Many people with cognitive disabilities have trouble tracking lines of text\n  when a block of text is single spaced. Providing spacing between 1.5 to 2\n  allows them to start a new line more easily once they have finished the\n  previous one.\n</p>',
+      'blink': '<p>\n  As the name suggests, <code>blink</code> tags cause content to flash. Though\n  you may like the effect, blinking text can be difficult to read, and blinking\n  objects (links, buttons, etc.) can be difficult to activate, especially for\n  users with imprecise or limited dexterity.\n</p>',
+      'definition-list': '<p>\n  Screen readers have a specific way of announcing definition lists. When such\n  lists are not properly marked up, this creates the opportunity for confusing\n  or inaccurate screen reader output.\n</p>',
+      'dlitem': '<p>\n  A definition list item must be wrapped in parent <code>dl</code> elements,\n  otherwise it will be invalid.\n</p>',
+      'duplicate-id-active': '<p>\n  The ID attribute uniquely identifies focusable elements on a page. It does not\n  make sense to duplicate an active ID.\n</p>',
+      'empty-table-header': '<p>\n  Table header elements should have visible text that describes the purpose of\n  the row or column to both sighted users and screen reader users.\n</p>',
+      'frame-focusable-content': '<p>\n  When a frame has a negative tabindex, the browser is prevented from\n  redirecting the focus to the content inside that frame. This causes all its\n  content from getting skipped in keyboard navigation, and if the frame is\n  scrollable also prevents the focus from reaching any element from which the\n  frame can be scrolled with the keyboard.\n</p>',
+      'frame-tested': '<p>\n  Without the axe-core script, it is not possible for the tool to perform\n  violation checking on multiple levels of nested iframes.\n</p>',
+      'frame-title-unique': '<p>\n  Screen reader users rely on a frame title to describe the contents of the\n  <code>frame</code>. Navigating through frames and iframes can quickly become\n  difficult and confusing for users of this technology if the frames are not\n  marked with a <code>title</code> attribute.\n</p>',
+      'frame-title': '<p>\n  Screen reader users rely on a frame title to describe the contents of the\n  <code>frame</code>. Navigating through <code>frame</code> and\n  <code>iframe</code> elements quickly becomes difficult and confusing for users\n  of this technology if the markup does not contain a\n  <code>title</code> attribute.\n</p>',
+      'html-xml-lang-mismatch': '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Multiple languages are an issue for users who speak\n  and access websites in multiple languages. It is essential to specify a\n  default language and ensure that it is valid for screen readers to function\n  correctly.\n</p>',
+      'image-alt': '<p>\n  Screen readers have no way of translating an image into words that gets read\n  to the user, even if the image only consists of text. As a result, it&apos;s\n  necessary for images to have short, descriptive <code>alt</code> text so\n  screen reader users clearly understand the image&apos;s contents and purpose.\n</p>',
+      'image-redundant-alt': '<p>\n  It is unnecessary and potentially confusing to have alternative text for a\n  link or image to be repeated in text adjacent to the link or image since it\n  would be read twice by a screen reader.\n</p>',
+      'input-button-name': '<p>\n  Screen reader users are not able to discern the purpose of an\n  <code>input type=&quot;button&quot;</code> without an accessible name.\n</p>',
+      'input-image-alt': '<p>\n  An <code>&lt;input type=&quot;image&quot;&gt;</code> button must have\n  alternate text, otherwise screen reader users will not know the button&apos;s\n  purpose. Even if the image contains only text, it still requires alternate\n  text, since a screen reader cannot translate images of words into output.\n</p>',
+      'landmark-banner-is-top-level': '<p>\n  If the banner landmark is not the top-level landmark (and is contained within\n  another landmark), it does not effectively designate the pre-defined header\n  portion of the layout in the design and therefore prevents screen reader users\n  from being able to easily find their way around the layout.\n</p>',
+      'landmark-complementary-is-top-level': '<p>\n  Complementary content is ancillary content to the main theme of a document or\n  page. Screen reader users have the option to skip over complementary content\n  when it appears at the top level of the accessibility API. Embedding an\n  <code>&lt;aside&gt;</code> element in another landmark may disable screen\n  reader functionality allowing users to navigate through complementary content.\n</p>',
+      'landmark-contentinfo-is-top-level': '<p>\n  The purpose of the <code>contentinfo</code> landmark can be defeated when\n  placed within another landmark, as it can prevent blind screen reader users\n  from being able to quickly find and navigate to the appropriate landmark.\n</p>',
+      'landmark-main-is-top-level': '<p>\n  Navigating a web page is far simpler for screen reader users if the content\n  splits between some high-level sections. Content outside of these sections is\n  difficult to find, and its purpose may be unclear.\n</p>',
+      'landmark-no-duplicate-banner': '<p>\n  Landmarks allow blind users to navigate and find content quickly. Missing\n  landmarks require screen reader users to sort through too much extra\n  information to find anything.\n</p>',
+      'landmark-no-duplicate-contentinfo': '<p>\n  One of the main purposes of landmarks is to allow blind users to quickly find\n  and navigate to the appropriate landmark, so you should keep the total number\n  of landmarks relatively low. If you don&apos;t, screen reader users will have to\n  sort through too much extra information to find what they&apos;re looking for.\n</p>',
+      'landmark-no-duplicate-main': '<p>\n  Navigating a web page is far simpler for screen reader users if all of the\n  content splits between one or more high-level sections. Content outside of\n  these sections is difficult to find, and its purpose may be unclear.\n</p>',
+      'landmark-unique': '<p>\n  <code>landmark-unique</code> is a new best practice rule ensures that\n  landmarks have a unique role or accessible name (i.e. role, label, title)\n  combination.\n</p>',
+      'list': '<p>\n  Screen readers have a specific way of announcing lists. This feature makes\n  lists clearer to understand, but will only work if lists are properly\n  structured.\n</p>',
+      'listitem': '<p>\n  For a list to be valid, it must have both parent and child elements. Parent\n  elements can either be a set of <code>ul</code> tags or a set of\n  <code>ol</code> tags. Child elements must be declared inside of these tags\n  using the <code>li</code> tag.\n</p>',
+      'marquee': '<p>\n  The <code>marquee</code> element creates scrolling text that is difficult to\n  read and click on. Beyond that, it can be distracting to viewers, especially\n  to those with low vision, cognitive disabilities, or attention deficits.\n</p>',
+      'meta-refresh': '<p>\n  Since users do not expect a page to refresh automatically, such refreshing can\n  be disorienting. Refreshing also moves the programmatic focus back to the top\n  of the page, away from where the user had it. Such resetting is frustrating\n  for users.\n</p>',
+      'object-alt': '<p>\n  Screen readers have no way of translating non-text content into text announced\n  to users. Instead, they read out alternative text. For screen reader users to\n  obtain the information contained in embedded <code>object</code> elements\n  which must contain short, descriptive alternative text.\n</p>',
+      'presentation-role-conflict': '<p>\n  There are certain cases where the semantic role of an element with\n  <code>role=&quot;none&quot;</code> or <code>role=&quot;presentation&quot;</code> does not resolve\n  to none or presentation (respectively). When this happens, the element is not\n  removed from the accessibility tree (as expected) and screen readers are able\n  to interact with it.\n</p>',
+      'role-img-alt': '<p>\n  Screen readers have no way of translating an image into words that gets read\n  to the user, even if the image only consists of text. As a result, it&apos;s\n  necessary for images to have short, descriptive and accessible alternative\n  text so screen reader users clearly understand the image&apos;s contents and\n  purpose.\n</p>',
+      'scope-attr-valid': '<p>\n  The <code>scope</code> attribute makes table navigation much easier for screen\n  reader users, provided that it is used correctly. Incorrectly used,\n  <code>scope</code> can make table navigation much harder and less efficient.\n</p>',
+      'scrollable-region-focusable': '<p>\n  Checks scrollable content for focusable elements enabling keyboard navigation.\n  Keyboard navigation should not fail when focus moves to an element within a\n  scrollable region.\n</p>',
+      'select-name': '<p>\n  Effective form labels are required to make forms accessible. The purpose of\n  form elements such as checkboxes, radio buttons, input fields, etcetera, is\n  often apparent to sighted users, even if the form element is not\n  programmatically labeled. Screen readers users require useful form labels to\n  identify form fields. Adding a label to all form elements eliminates ambiguity\n  and contributes to a more accessible product.\n</p>',
+      'server-side-image-map': '<p>\n  Server-side image maps are not keyboard accessible; mouse clicks are required\n  to access the links contained in the image, making the image inaccessible to\n  people who only use keyboards for their navigation.\n</p>',
+      'skip-link': '<p>\n  Screen readers announce content sequentially as it appears in the HTML file.\n  What this means for users of assistive technology is that the content at the\n  top of the page, typically including the entire navigation, is read out to the\n  user before reaching any of the main content. Since content at the top of the\n  page can often be very lengthy, it can be time-consuming to listen to or tab\n  through all of it when the user is only interested in the main content.\n  Including a skip link in an HTML page is beneficial to blind users, users with\n  low vision, and mouse-only users.\n</p>',
+      'svg-img-alt': "<p>\n If you can't see, images are completely useless without a digital text alternative. The same is true in varying degrees for people with low vision or colour-blindness. \n</p>",
+      'tabindex': '<p>\n  Using <code>tabindex</code> with a value greater than 0 can create as many\n  problems as it solves. It creates an unexpected tab order, which makes the\n  page less intuitive and can give the appearance of skipping certain elements\n  entirely.\n</p>',
+      'table-duplicate-name': '<p>\n  When tables have summary and caption text that is identical, screen reader\n  users can be confused and find it difficult to know the name and purpose of\n  the table.\n</p>',
+      'td-headers-attr': "<p>\n  Sighted users can usually tell at a glance what the table's headers are and\n  what their relationship to the data is. For non-sighted users this must be\n  done in the markup.\n</p>",
+      'th-has-data-cells': '<p>\n  When tables are not marked up semantically and do not have the correct header\n  structure, screen reader users cannot correctly perceive the relationships\n  between the cells and their contents visually.\n</p>',
+      'valid-lang': '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes it is the\n  default language set by the user. Language selection becomes an issue for\n  users who speak multiple languages and access the website in more than one\n  language. It is essential to specify a language and ensure that it is valid so\n  website text is pronounced correctly.\n</p>',
+      'video-caption': '<p>\n  If a video has no caption, deaf users have limited or no access to the\n  information contained in it. Even if a captions track is available, ensure\n  that it contains all meaningful information in the video, not just dialogue.\n</p>',
+      'no-autoplay-audio': '<p>\n  People who are blind or have low vision and use screen reading software can\n  find it hard to hear the screen reader&apos;s speech output if there is other audio\n  playing at the same time. If automatically playing audio lasts more than three\n  seconds, an easily located, accessible mechanism must be provided to pause or\n  stop the audio or control the audio volume. An audio control allows screen\n  reader users to hear the screen reader without other sounds playing.\n</p>',
+      'aria-hidden-body': '<p>\n  Screen readers do not read content marked with the <code>aria-hidden="true"</code> attribute value. Users can still tab to focusable elements in the hidden objects, but screen readers remain silent.\n</p>',
+      'aria-required-attr': '<p>\n  ARIA widget roles require additional attributes that describe the state of the\n  widget. The state of the widget is not communicated to screen reader users if\n  a required attribute is omitted.\n</p>',
+      'bypass': '<p>\n  Since web sites often display secondary, repeated content on multiple pages\n  (such as navigation links, heading graphics, and advertising frames),\n  keyboard-only users benefit from faster, more direct access to the primary\n  content on a page. This reduces keystrokes and minimizes associated physical\n  pain.\n</p>',
+      'color-contrast': '<p>\n  Some people with low vision experience low contrast, meaning that there aren&apos;t\n  very many bright or dark areas. Everything tends to appear about the same\n  brightness, which makes it hard to distinguish outlines, borders, edges, and\n  details. Text that is too close in luminance (brightness) to the background\n  can be hard to read.\n</p>',
+      'document-title': '<p>\n  Screen reader users use page titles to get an overview of the contents of the\n  page. Navigating through pages can quickly become difficult and confusing for\n  screen reader users if the pages are not marked with a title. The page\n  <code>title</code> element is the first thing screen reader users hear when\n  first loading a web page.\n</p>',
+      'duplicate-id-aria': '<p>\n  Duplicate IDs are common validation errors that may break the accessibility of\n  labels, e.g., ARIA elements, form fields, table header cells.\n</p>',
+      'duplicate-id': "<p>\n  The ID attribute uniquely identifies elements on a page. It does not make\n  sense to duplicate an ID.\n</p>\n\n<p>\n  Duplicate ID's can break the accessibility of labels for forms, table header\n  cells, etc., by the second instance being skipped by screen readers, or by\n  client-side scripts. They are common markup validation errors that can\n  eliminate possible sources of accessibility problems, when not breaking\n  accessibility.\n</p>",
+      'empty-heading': '<p>\n  Screen readers alert users to the presence of a heading tag. If the heading is\n  empty or the text cannot be accessed, this could either confuse users or even\n  prevent them from accessing information on the page&apos;s structure.\n</p>',
+      'form-field-multiple-labels': '<p>\n  Assigning multiple labels to the same form field can cause problems for some\n  combinations of screen readers and browsers, and the results are inconsistent\n  from one combination to the next. Some combinations will read the first label.\n  Some will read the last label. Others will read both labels.\n</p>',
+      'heading-order': '<p>\n  The underlying purpose of headers is to convey the structure of the page. For\n  sighted users, the same purpose is achieved using different sizes of text.\n  Text size, however, is not helpful for users of screen readers, because a\n  screen reader identifies a header only if it is properly marked-up. When\n  heading elements are applied correctly, the page becomes much easier to\n  navigate for screen reader users and sighted users alike.\n</p>',
+      'html-has-lang': '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Language settings become an issue for users who\n  speak multiple languages and access website in more than one language. It is\n  essential to specify a language and ensure that it is valid so website text is\n  pronounced correctly.\n</p>',
+      'html-lang-valid': '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Language settings are an issue for users who speak\n  multiple languages and access website in more than one language. It is\n  essential to specify a language and ensure that it is valid so website text is\n  pronounced correctly.\n</p>',
+      'label-title-only': '<p>\n  The <code>title</code> and <code>aria-describedby</code> attributes are used\n  to provide additional information such as a hint. Hints are exposed to\n  accessibility APIs differently than labels and as such, this can cause\n  problems with assistive technologies.\n</p>',
+      'link-in-text-block': '<p>\n  Some people with low vision experience low contrast, meaning that there aren&apos;t\n  very many bright or dark areas. Everything tends to appear about the same\n  brightness, which makes it hard to distinguish outlines, borders, edges, and\n  details. Text that is too close in luminance (brightness) to the background\n  can be hard to read.\n</p>',
+      'link-name': '<p>\n Inaccessible link elements pose barriers to accessibility, as they are a fundamental component of a website.\n </p>',
+      'meta-viewport-large': '<p>\n  The <code>user-scalable=&quot;no&quot;</code> parameter inside the\n  <code>content</code> attribute of\n  <code>&lt;meta name=&quot;viewport&quot;&gt;</code> element disables zooming on a page.\n  The <code>maximum-scale</code> parameter limits the amount the user can zoom.\n  This is problematic for people with low vision who rely on screen magnifiers\n  to properly see the contents of a web page.\n</p>',
+      'meta-viewport': '<p>\n  The <code>user-scalable=&quot;no&quot;</code> parameter inside the\n  <code>content</code> attribute of\n  <code>&lt;meta name=&quot;viewport&quot;&gt;</code> element disables zooming on a page.\n  The <code>maximum-scale</code> parameter limits the amount the user can zoom.\n  This is problematic for people with low vision who rely on screen magnifiers\n  to properly see the contents of a web page.\n</p>',
+      'nested-interactive': '<p>\n  Focusable elements with an interactive control ancestor (any element that\n  accepts user input such as button or anchor elements) are not announced by\n  screen readers and create an empty tab stop. That is, you could tab to the\n  element but the screen reader will not announce its name, role, or state.\n</p>',
+      'page-has-heading-one': '<p>\n  Screen reader users can use keyboard shortcuts to navigate directly to the\n  first <code>h1</code>, which, in principle, should allow them to jump directly\n  to the main content of the web page. If there is no <code>h1</code>, or if the\n  <code>h1</code> appears somewhere other than at the start of the main content,\n  screen reader users must listen to more of the web page to understand its\n  structure, wasting valuable time.\n</p>',
+      'region': '<p>\n  Navigating a web page is far simpler for screen reader users if the content\n  splits between multiple high-level sections. Content outside of sections is\n  difficult to find, and the content&apos;s purpose may be unclear.\n</p>',
+      'button-name': '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;link&quot;</code>, <code>role=&quot;button&quot;</code>, or\n  <code>role=&quot;menuitem&quot;</code> that do not have an accessible name.\n</p>',
+      'aria-allowed-role': '<p>\n  Intended accessible technology behavior by a developer is not enabled when an\n  assigned WAI-ARIA role value is invalid for the parent element.\n</p>',
+      'aria-roles': '<p>\n  Elements assigned invalid ARIA role values are not interpreted by assistive\n  technology as intended by the developer.\n</p>',
+      'label': '<p>\n  Effective form labels are required to make forms accessible. The purpose of\n  form elements such as checkboxes, radio buttons, input fields, etcetera, is\n  often apparent to sighted users, even if the form element is not\n  programmatically labeled. Screen readers users require useful form labels to\n  identify form fields. Adding a label to all form elements eliminates ambiguity\n  and contributes to a more accessible product.\n</p>',
+      'landmark-one-main': '<p>\n  Navigating a web page is far simpler for screen reader users if all of the\n  content splits between one or more high-level sections. Content outside of\n  these sections is difficult to find, and its purpose may be unclear.\n</p>',
+      'aria-braille-equivalent': '<p class="rule-desc-text">\nARIA braille attributes were introduced to allow adjusting how labels and role descriptions are rendered on a braille display. They cannot be the only attribute providing a label, or a role description. When used without a corresponding label or role description ARIA says to ignore these attributes, although this may not happen consistently in screen readers and other assistive technologies.\n</p>',
+      'aria-conditional-attr': '<p class="rule-desc-text">\nUsing ARIA attributes on elements where they are not expected can result in unpredictable behavior for assistive technologies. This can lead to a poor user experience for people with disabilities who rely on these technologies. It is important to follow the ARIA specification to ensure that assistive technologies can properly interpret and communicate the intended meaning of the content.\n</p>',
+      'aria-deprecated-role': '<p class="rule-desc-text">\nUsing deprecated WAI-ARIA roles is bad for accessibility. They will not be recognized or correctly processed by screen readers and other assistive technologies. Using these means not everyone will be able to access essential information.\n</p>',
+      'aria-prohibited-attr': '<p class="rule-desc-text">\nUsing ARIA attributes in roles where they are prohibited can mean that important information is not communicated to users of assistive technologies. assistive technologies may also attempt to compensate for the issue, resulting in inconsistent and confusing behavior of these tools.\n</p>',
+      'target-size' : '<p>\n Touch targets must have sufficient size and spacing in order to "be easily activated without accidentally activating an adjacent target." When touch targets are too small or too close together, it becomes difficult for users to activate them.\n</p>',
+      'oobee-confusing-alt-text' : '<p>\n Alt text should be clear and concise. It should relay informative content / function of the image. If the alt text is too long or confusing, it can be difficult for screen reader users to understand the image.\n</p>',
+      'oobee-accessible-label' : '<p>\n Unlabelled clickable elements are inaccessible because it prevents screen readers from effectively conveying the purpose of the element. This causes challenges for screen reader users to navigate and understand the webpage. Clickable elements should also be made focusable by screen readers unless deliberately excluded (e.g. decorative or functionally redundant).\n</p>',
+      'oobee-grading-text-contents' : '<p>\n Text content should be easy to understand for individuals with education levels up to university graduates. If the text content is difficult to understand, provide supplemental content or a version that is easy to understand.\n</p>',
+    };
+</script>