@govtechsg/oobee 0.10.70 → 0.10.72

package/src/static/ejs/partials/scripts/prioritiseIssues/IssueDetailCard.ejs

@@ -0,0 +1,137 @@
+<script>
+  (function initIssueDetailCard() {
+    window.populateIssueDetailCard = function (issue) {
+      const detailCard = document.getElementById('a11yIssueDetailCard');
+      if (!detailCard) return;
+
+      detailCard.style.display = 'block';
+
+      const titleElement = document.getElementById('issueDetailTitle');
+      if (titleElement) {
+        titleElement.textContent = issue.description || 'Issue';
+      }
+
+      const imageElement = document.getElementById('issueDetailImage');
+      const imageContainer = imageElement?.closest('.issue-detail-image-container');
+      
+      if (imageElement && imageContainer) {
+        let imageSrc = null;
+        
+        if (issue.conformance && issue.conformance.length > 0) {
+          const wcagConformance = issue.conformance.filter(c => c.startsWith('wcag'));
+          const wcagCriteriaLabels = scanData?.wcagCriteriaLabels || {};
+          
+          for (const wcag of wcagConformance) {
+            const formattedWcag = formatWcagId(wcag);
+
+            if (wcagCriteriaLabels[formattedWcag]) {
+              const svg = window.getWcagSvg ? window.getWcagSvg(formattedWcag) : null;
+              if (svg) {
+                imageSrc = window.svgToDataUrl ? window.svgToDataUrl(svg) : svg;
+                break;
+              }
+            }
+          }
+        }
+        
+        if (!imageSrc) {
+          imageContainer.style.display = 'none';
+        } else {
+          imageContainer.style.display = 'flex';
+          imageElement.src = imageSrc;
+          imageElement.alt = issue.description || 'Issue illustration';
+        }
+      }
+
+      // Populate conformance badges
+      const conformanceContainer = document.getElementById('issueDetailConformance');
+      if (conformanceContainer && issue.conformance && issue.conformance.length > 0) {
+        const wcagConformance = issue.conformance.filter(c => c.startsWith('wcag'));
+        const wcagCriteriaLabels = scanData?.wcagCriteriaLabels || {};
+
+        const criteriaNumbers = [];
+        let level = null;
+
+        wcagConformance.forEach(wcag => {
+          const formattedWcag = formatWcagId(wcag);
+
+          if (wcagCriteriaLabels[formattedWcag]) {
+            criteriaNumbers.push(formattedWcag);
+            if (!level) {
+              level = wcagCriteriaLabels[formattedWcag];
+            }
+          }
+        });
+
+        const badges = criteriaNumbers.map(
+          criteria => `<span class="issue-detail-conformance-badge">${criteria}</span>`,
+        );
+
+        if (level) {
+          badges.push(`<span class="issue-detail-conformance-badge">Level ${level}</span>`);
+        }
+
+        conformanceContainer.innerHTML = badges.join('');
+      }
+
+      // Populate long description
+      const longDescriptionElement = document.getElementById('issueDetailLongDescription');
+      const a11yRuleLongDescriptionMap = scanData?.a11yRuleLongDescriptionMap || {};
+      if (longDescriptionElement) {
+        const longDescription = a11yRuleLongDescriptionMap[issue.ruleId] || '';
+        longDescriptionElement.textContent = longDescription;
+      }
+
+      // Populate disability impact
+      const disabilitySection = document.getElementById('issueDetailDisabilitySection');
+      const disabilityMessage = document.getElementById('issueDetailDisabilityMessage');
+      const disabilityBadgesMap = scanData?.disabilityBadgesMap || {};
+      const disabilities = disabilityBadgesMap[issue.ruleId] || [];
+
+      if (disabilityMessage && disabilities.length > 0) {
+        let disabilityText = '';
+        if (disabilities.length === 1) {
+          disabilityText = `${disabilities[0]} Disability `;
+        } else if (disabilities.length === 2) {
+          disabilityText = `${disabilities[0]} and ${disabilities[1]} Disability`;
+        } else {
+          const boldedDisabilities = disabilities.map(d => `${d}`);
+          const lastDisability = boldedDisabilities.pop();
+          disabilityText = `${boldedDisabilities.join(', ')} and ${lastDisability} Disability`;
+        }
+
+        disabilityMessage.innerHTML = `This issue prevents users with <span class="disability-text">${disabilityText}</span> from navigating your website.`;
+        disabilitySection.style.display = 'block';
+      } else {
+        disabilitySection.style.display = 'none';
+      }
+
+      // Handle "View issue details" button
+      const viewDetailsBtn = document.getElementById('viewIssueDetailsBtn');
+      if (viewDetailsBtn) {
+        const newBtn = viewDetailsBtn.cloneNode(true);
+        viewDetailsBtn.parentNode.replaceChild(newBtn, viewDetailsBtn);
+
+        newBtn.addEventListener('click', function () {
+          const category = issue.category || 'mustFix';
+          const ruleData = scanItems[category]?.rules?.find(r => r.rule === issue.ruleId);
+
+          if (ruleData && typeof expandRule === 'function') {
+            expandRule(category, ruleData);
+
+            const modalElement = document.getElementById('expandedRule');
+            if (modalElement) {
+              const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+              modal.show();
+            }
+          }
+        });
+      }
+    };
+
+    const detailCard = document.getElementById('a11yIssueDetailCard');
+    if (detailCard) {
+      detailCard.style.display = 'none';
+    }
+  })();
+</script>

package/src/static/ejs/partials/scripts/prioritiseIssues/PrioritiseIssues.ejs

@@ -0,0 +1,214 @@
+<script>
+  (function populatePrioritiseIssues() {
+    const a11yRuleShortDescriptionMap = scanData?.a11yRuleShortDescriptionMap || {};
+    const disabilityBadgesMap = scanData?.disabilityBadgesMap || {};
+    const wcagLinks = scanData?.wcagLinks || {};
+    const wcagViolations = scanData?.wcagViolations || [];
+    const wcagClauses = scanData?.wcagClauses || {};
+    const mustFixRules = scanItems?.mustFix?.rules || [];
+
+    const wcagCriteriaMap = new Map();
+
+    mustFixRules.forEach(rule => {
+      const ruleId = rule.rule;
+      const wcagCriteria = rule.conformance?.filter(c => c.startsWith('wcag')) || [];
+
+      wcagCriteria.forEach(wcag => {
+        const formattedWcag = formatWcagId(wcag);
+
+        if (!wcagCriteriaMap.has(formattedWcag)) {
+          const clauseKey = formattedWcag.replace('WCAG ', '');
+          wcagCriteriaMap.set(formattedWcag, {
+            id: formattedWcag,
+            name: wcagClauses[clauseKey] || formattedWcag,
+            issues: [],
+            totalIssueCount: 0,
+          });
+        }
+
+        const criteria = wcagCriteriaMap.get(formattedWcag);
+        const displayName = a11yRuleShortDescriptionMap[ruleId] || rule.description;
+
+        criteria.issues.push({
+          ruleId: ruleId,
+          description: displayName,
+          originalDescription: rule.description,
+          totalItems: rule.totalItems || 0,
+          helpUrl: rule.helpUrl || '',
+          axeImpact: rule.axeImpact || '',
+          conformance: rule.conformance || [],
+          pagesAffected: rule.pagesAffected || [],
+        });
+
+        criteria.totalIssueCount = criteria.issues.length || 0;
+      });
+    });
+
+    const sortedCriteria = Array.from(wcagCriteriaMap.values()).sort((a, b) => {
+      if (a.totalIssueCount !== b.totalIssueCount) {
+        return a.totalIssueCount - b.totalIssueCount;
+      }
+      return a.id.localeCompare(b.id);
+    });
+
+    const failedCriteria = sortedCriteria.filter(criteria =>
+      wcagViolations.some(v => formatWcagId(v) === criteria.id),
+    );
+
+    const cardElement = document.getElementById('prioritiseIssuesCard');
+    if (failedCriteria.length === 0) {
+      if (cardElement) {
+        cardElement.style.display = 'none';
+      }
+      return;
+    }
+
+    const accordionContainer = document.getElementById('prioritiseIssuesAccordion');
+    if (!accordionContainer) return;
+
+    const accordionHTML = failedCriteria
+      .map((criteria, index) => {
+        const wcagScore = criteria.id.replace('WCAG ', '');
+        const issueWord = criteria.issues.length === 1 ? 'issue' : 'issues';
+
+        const issuesListHTML = criteria.issues
+          .map(issue => {
+            const disabilities = disabilityBadgesMap[issue.ruleId] || [];
+            const disabilityBadges =
+              disabilities.length > 0
+                ? `
+              <div class="priority-issue-badges">
+                ${disabilities.map(disability => `<span class="disability-badge">${disability} Disability</span>`).join('')}
+              </div>
+            `
+                : '';
+
+            return `
+              <li class="priority-issue-item d-flex g-one" data-rule-id="${issue.ruleId}" role="button" tabindex="0">
+                <div class="d-flex justify-content-between align-items-center w-90">
+                    <div class="priority-issue-title">${issue.description}</div>
+                    ${disabilityBadges}
+                </div>
+              </li>
+            `;
+          })
+          .join('');
+
+        return `
+          <div class="accordion-item">
+            <h3 class="accordion-header" id="heading${index}">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapse${index}"
+                aria-expanded="false"
+                aria-controls="collapse${index}"
+              >
+                <span class="h4 mb-0">WCAG ${wcagScore} -&nbsp;</span>
+                <span class="h4 fw-normal mb-0">${criteria.issues.length} ${issueWord}</span>
+                <span class="wcag-score-badge">-1 WCAG Score</span>
+                <svg class="accordion-icon-collapsed" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z" fill="#5735DF"/>
+                </svg>
+                <svg class="accordion-icon-expanded" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002L7.41 15.4102Z" fill="#5735DF"/>
+                </svg>
+              </button>
+            </h3>
+            <div
+              id="collapse${index}"
+              class="accordion-collapse collapse"
+              data-bs-parent="#prioritiseIssuesAccordion"
+            >
+              <div class="accordion-body">
+                <ul class="priority-issues-list">
+                  ${issuesListHTML}
+                </ul>
+              </div>
+            </div>
+          </div>
+        `;
+      })
+      .join('');
+
+    accordionContainer.innerHTML = accordionHTML;
+
+    document.querySelectorAll('.priority-issue-item').forEach(item => {
+      const selectIssue = function () {
+        const ruleId = item.getAttribute('data-rule-id');
+
+        document.querySelectorAll('.priority-issue-item').forEach(el => {
+          el.classList.remove('active');
+          el.setAttribute('aria-selected', 'false');
+        });
+        document.querySelectorAll('.priority-issue-title').forEach(el => {
+          el.classList.remove('active');
+        });
+
+        item.classList.add('active');
+        item.setAttribute('aria-selected', 'true');
+        const title = item.querySelector('.priority-issue-title');
+        if (title) {
+          title.classList.add('active');
+        }
+
+        let selectedRule = null;
+        for (const criteria of failedCriteria) {
+          const issue = criteria.issues.find(i => i.ruleId === ruleId);
+          if (issue) {
+            selectedRule = issue;
+            break;
+          }
+        }
+
+        if (selectedRule && typeof window.populateIssueDetailCard === 'function') {
+          window.populateIssueDetailCard(selectedRule);
+        }
+      };
+
+      // Click handler
+      item.addEventListener('click', selectIssue);
+
+      // Keyboard handler
+      item.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          selectIssue();
+        }
+      });
+    });
+
+    // Automatically open first accordion and select first issue
+    if (failedCriteria.length > 0 && failedCriteria[0].issues.length > 0) {
+      const firstAccordionButton = document.querySelector(
+        '#prioritiseIssuesAccordion .accordion-button',
+      );
+      const firstAccordionCollapse = document.querySelector(
+        '#prioritiseIssuesAccordion .accordion-collapse',
+      );
+
+      if (firstAccordionButton && firstAccordionCollapse) {
+        firstAccordionButton.classList.remove('collapsed');
+        firstAccordionButton.setAttribute('aria-expanded', 'true');
+        firstAccordionCollapse.classList.add('show');
+      }
+
+      const firstIssueItem = document.querySelector('.priority-issue-item');
+      if (firstIssueItem) {
+        firstIssueItem.classList.add('active');
+        firstIssueItem.setAttribute('aria-selected', 'true');
+        const firstIssueTitle = firstIssueItem.querySelector('.priority-issue-title');
+        if (firstIssueTitle) {
+          firstIssueTitle.classList.add('active');
+        }
+
+        const firstIssue = failedCriteria[0].issues[0];
+
+        if (typeof window.populateIssueDetailCard === 'function') {
+          window.populateIssueDetailCard(firstIssue);
+        }
+      }
+    }
+  })();
+</script>