@govtechsg/oobee 0.10.75 → 0.10.77

package/dist/static/ejs/partials/components/wcagCompliance/WcagCompliance.ejs

@@ -0,0 +1,16 @@
+<div id="wcag-compliance-card" class="wcag-card">
+  <div class="wcag-row">
+    <div>
+      <h2 class="wcag-title">WCAG Score</h2>
+
+      <p class="wcag-sub">Based on Automated Checks</p>
+
+      <p id="wcagStatus" class="wcag-status" hidden>
+        This website does not meet the minimum accessibility standards.
+      </p>
+    </div>
+
+    <div><%- include('WcagGaugeBar') %></div>
+  </div>
+  <div><%- include('FailedCriteria') %></div>
+</div>

package/dist/static/ejs/partials/components/wcagCompliance/WcagGaugeBar.ejs

@@ -0,0 +1,16 @@
+<figure id="wcagGauge"
+				class="wcag-gauge"
+				role="img"
+				aria-label="WCAG A & AA automated checks passed">
+	<svg viewBox="0 0 100 60" aria-hidden="true" focusable="false">
+		<path class="gauge-track" d="M10,50 A40,40 0 0 1 90,50" />
+		<path class="gauge-fill" id="gaugeFill" d="M10,50 A40,40 0 0 1 90,50" />
+	</svg>
+
+	<figcaption class="gauge-center">
+		<span class="gauge-number">
+			<span id="gaugeValueNumber" class="gauge-value-number">0</span>/<span id="gaugeValueTotal">0</span>
+		</span>
+	</figcaption>
+	<div class="gauge-caption">Target to meet: <span id="gaugeTarget">20</span></div>
+</figure>

package/dist/static/ejs/partials/components/wcagCoverageDetails.ejs

@@ -0,0 +1,18 @@
+<div id="wcagCoverage" class="my-3">
+  <h5 class="fw-semibold mb-2">
+    <span id="wcagAALabelCount">20</span> (A &amp; AA) WCAG Success Criteria
+  </h5>
+  <div class="wcag-box">
+    <ul id="wcagLinksListAA" class="wcag-grid list-unstyled m-0">
+      <!-- dynamically populated -->
+    </ul>
+  </div>
+  <h5 class="fw-semibold mt-4 mb-2">
+    <span id="wcagAAALabelCount">6</span> (AAA) WCAG Success Criteria
+  </h5>
+  <div class="wcag-box">
+    <ul id="wcagLinksListAAA" class="wcag-grid list-unstyled m-0">
+      <!-- dynamically populated -->
+    </ul>
+  </div>
+</div>

package/dist/static/ejs/partials/footer.ejs

@@ -0,0 +1,24 @@
+<footer aria-label="Report footer" id="footer" class="card w-100">
+  <div class="row mx-0">
+    <div class="col-sm-6 text-sm-start">
+      <%
+        const encodedUrlScanned = encodeURIComponent(urlScanned);
+        const encodedVersionNumber = encodeURIComponent(oobeeAppVersion);
+    
+        // Use %0A for line breaks in the body
+        const mailtoAddress = `oobee@wogaa.gov.sg`;
+        const mailtoSubject = encodeURIComponent(`Support Request - Oobee Version ${oobeeAppVersion}`);
+        const mailtoBody = encodeURIComponent(`URL Scanned: ${urlScanned}\nVersion: ${oobeeAppVersion}`);
+        const feedbackEmail = `mailto:${mailtoAddress}?subject=${mailtoSubject}&body=${mailtoBody}`;
+      %>
+    
+        <a href="<%=feedbackEmail%>" aria-label="Send feedback to <%=mailtoAddress%>" target="_blank">Help us improve</a>
+        <hr class="d-sm-none" />
+    </div>
+    <div class="col-sm-6 text-sm-end">
+      Created by
+      <a href="https://go.gov.sg/a11y" target="_blank">GovTech Accessibility Enabling Team</a> |
+      <a href="https://go.gov.sg/oobee-report-third-party-licenses" target="_blank">Third-Party Licenses</a>
+    </div>
+  </div>
+</footer>

package/dist/static/ejs/partials/header.ejs

@@ -0,0 +1,14 @@
+<header class="w-100">
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z"
+      fill="white"
+    />
+    <path
+      d="M24 9C13.5686 9 12 13.2831 12 20.0321V27.9679C12 34.7169 13.5686 39 24 39C34.4314 39 36 34.7169 36 27.9679V20.0136C36 13.2645 34.4314 9 24 9ZM25.7647 16.157V33.2151H22.2353V14.7849H27.902L25.7647 16.157Z"
+      fill="#5735DF"
+    />
+  </svg>
+
+  <h1 class="header-title">Accessibility Report</h1>
+</header>

package/dist/static/ejs/partials/main.ejs

@@ -0,0 +1,29 @@
+<div class="d-flex flex-grow-1 align-items-stretch main-container">
+  <%- include("components/screenshotLightbox") %>
+  <main class="d-flex flex-grow-1" style="min-width: 0;">
+    <section class="w-100 m-4" style="max-width: calc(100% - 3rem); box-sizing: border-box;">
+      <%- include("components/header/SiteInfo") %>
+      <div class="compliance-summary gap-4 mt-4">
+        <div class="col card rounded"><%- include("components/wcagCompliance/WcagCompliance") %></div>
+        <div class="col card rounded"><%- include("components/topTen") %></div>
+      </div>
+      <%- include("components/prioritiseIssues/PrioritiseIssues") %>
+      <!-- jsOffMessage -->
+      <p id="jsOffMessage" class="mx-3">
+        Please open this file in a browser to experience the report's full functionality.
+      </p>
+      <%- include("components/allIssues/AllIssues") %>
+      <div id="jsOn" class="d-none">
+        <%- include("components/ruleModal/ruleOffcanvas") %>
+        <p id="containsAISuggestions" class="d-none">Tooltip: Contains AI suggestions.</p>
+        <p id="mustFixAriaDescription" class="d-none">Tooltip: <%= items.mustFix.description %></p>
+        <p id="goodToFixAriaDescription" class="d-none">
+          Tooltip: <%= items.goodToFix.description %>
+        </p>
+        <p id="passedAriaDescription" class="d-none">Tooltip: <%= items.passed.description %></p>
+      </div>
+    </section>
+  </main>
+</div>
+<%- include("footer") %>
+<%- include("components/header/aboutScanModal/AboutScanModal") %>

package/dist/static/ejs/partials/scripts/allIssues/AllIssues.ejs

@@ -0,0 +1,376 @@
+<script>
+  (function initAllIssues() {
+    let allIssues = [];
+    let filteredIssues = [];
+    let currentSort = { column: 'occurrence', direction: 'desc' };
+    let currentCategory = 'mustFix';
+    const a11yRuleShortDescriptionMap = scanData?.a11yRuleShortDescriptionMap;
+    const wcagCriteriaLabels = scanData?.wcagCriteriaLabels;
+    const disabilityBadgesMap = scanData?.disabilityBadgesMap;
+
+    window.addEventListener('DOMContentLoaded', () => {
+      initializeIssues();
+      populateCriteriaFilter();
+      renderTable();
+      updateTotalCount();
+      initializeSortableHeaders();
+
+      document.getElementById('severityFilter').addEventListener('change', handleFilterChange);
+      document.getElementById('criteriaFilter').addEventListener('change', handleFilterChange);
+      document.getElementById('disabilityFilter').addEventListener('change', handleFilterChange);
+      document.getElementById('issuesSearchInput').addEventListener('input', handleSearch);
+    });
+
+    function initializeIssues() {
+      const categories = ['mustFix', 'goodToFix', 'needsReview'];
+      allIssues = [];
+
+      categories.forEach(category => {
+        if (scanItems[category] && scanItems[category].rules) {
+          scanItems[category].rules.forEach(rule => {
+            allIssues.push({
+              category,
+              ruleId: rule.rule,
+              description: a11yRuleShortDescriptionMap[rule.rule] || rule.description,
+              totalItems: rule.totalItems,
+              conformance: rule.conformance || [],
+              pagesAffected: rule.pagesAffected || [],
+              axeImpact: rule.axeImpact || '',
+              helpUrl: rule.helpUrl || '',
+              disabilities: disabilityBadgesMap[rule.rule] || [],
+            });
+          });
+        }
+      });
+
+      filteredIssues = [...allIssues];
+    }
+
+    function initializeSortableHeaders() {
+      const headers = [
+        { element: document.querySelector('.issues-table th:nth-child(1)'), column: 'severity' },
+        { element: document.querySelector('.issues-table th:nth-child(2)'), column: 'issueName' },
+        { element: document.querySelector('.issues-table th:nth-child(3)'), column: 'occurrence' }
+      ];
+
+      headers.forEach(({ element, column }) => {
+        if (!element) return;
+
+        const sortHeader = function() {
+          window.sortTable(column);
+        };
+
+        // Click handler
+        element.addEventListener('click', sortHeader);
+
+        // Keyboard handler
+        element.addEventListener('keydown', function(event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            sortHeader();
+          }
+        });
+      });
+    }
+
+    function populateCriteriaFilter() {
+      const criteriaFilter = document.getElementById('criteriaFilter');
+      const criteriaSet = new Set();
+
+      allIssues.forEach(issue => {
+        if (issue.conformance) {
+          issue.conformance.forEach(conf => {
+            if (conf.startsWith('wcag')) {
+              const formatted = formatWcagId(conf);
+              if (wcagCriteriaLabels[formatted]) criteriaSet.add(formatted);
+            }
+          });
+        }
+      });
+
+      const sortedCriteria = Array.from(criteriaSet).sort((a, b) => {
+        const aNum = a.replace(/[^\d]/g, '');
+        const bNum = b.replace(/[^\d]/g, '');
+        return aNum.localeCompare(bNum, undefined, { numeric: true });
+      });
+
+      sortedCriteria.forEach(criteria => {
+        const option = document.createElement('option');
+        option.value = criteria;
+        option.textContent = criteria;
+        criteriaFilter.appendChild(option);
+      });
+    }
+
+    window.filterByCategory = function (category) {
+      currentCategory = category;
+
+      // Update active badge
+      document.querySelectorAll('.category-badge').forEach(badge => {
+        badge.classList.remove('active');
+      });
+      document.getElementById(category + 'Badge').classList.add('active');
+
+      // Update severity filter
+      const severityMap = {
+        mustFix: 'mustFix',
+        goodToFix: 'goodToFix',
+        needsReview: 'needsReview',
+      };
+      document.getElementById('severityFilter').value = severityMap[category];
+
+      handleFilterChange();
+    };
+
+    function handleFilterChange() {
+      const severityFilter = document.getElementById('severityFilter').value;
+      const criteriaFilter = document.getElementById('criteriaFilter').value;
+      const disabilityFilter = document.getElementById('disabilityFilter').value;
+      const searchValue = document.getElementById('issuesSearchInput').value.toLowerCase();
+
+      filteredIssues = allIssues.filter(issue => {
+        // Severity filter
+        if (severityFilter !== 'all' && issue.category !== severityFilter) {
+          return false;
+        }
+
+        // Criteria filter
+        if (criteriaFilter !== 'all') {
+          const hasCriteria =
+            issue.conformance &&
+            issue.conformance.some(conf => {
+              return formatWcagId(conf) === criteriaFilter;
+            });
+          if (!hasCriteria) return false;
+        }
+
+        // Disability filter
+        if (disabilityFilter !== 'all') {
+          const disabilities = disabilityBadgesMap[issue.ruleId] || [];
+          if (!disabilities.includes(disabilityFilter)) return false;
+        }
+
+        // Search filter
+        if (searchValue && !issue.description.toLowerCase().includes(searchValue)) {
+          return false;
+        }
+
+        return true;
+      });
+
+      renderTable();
+      updateTotalCount();
+    }
+
+    function handleSearch(event) {
+      handleFilterChange();
+    }
+
+    window.sortTable = function (column) {
+      if (currentSort.column === column) {
+        currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+      } else {
+        currentSort.column = column;
+        currentSort.direction = 'desc';
+      }
+
+      // Update sort indicators
+      document.querySelectorAll('.issues-table th[aria-sort]').forEach(th => {
+        th.setAttribute('aria-sort', 'none');
+        const sortIcon = th.querySelector('.sort-icon');
+        if (sortIcon) {
+          sortIcon.classList.remove('active');
+          const paths = th.querySelectorAll('.sort-icon path');
+          if (paths.length === 2) {
+            paths[0].setAttribute('opacity', '0.3');
+            paths[1].setAttribute('opacity', '1');
+          }
+        }
+      });
+
+      const columnIndex = {
+        severity: 1,
+        issueName: 2,
+        occurrence: 3
+      };
+
+      const sortedTh = document.querySelector(`.issues-table th:nth-child(${columnIndex[column]})`);
+      if (sortedTh) {
+        sortedTh.setAttribute(
+          'aria-sort',
+          currentSort.direction === 'asc' ? 'ascending' : 'descending',
+        );
+        const sortIcon = sortedTh.querySelector('.sort-icon');
+        if (sortIcon) {
+          sortIcon.classList.add('active');
+
+          const paths = sortedTh.querySelectorAll('.sort-icon path');
+          if (paths.length === 2) {
+            if (currentSort.direction === 'asc') {
+              paths[0].setAttribute('opacity', '1');
+              paths[1].setAttribute('opacity', '0.3');
+            } else {
+              paths[0].setAttribute('opacity', '0.3');
+              paths[1].setAttribute('opacity', '1');
+            }
+          }
+        }
+      }
+
+      sortIssues();
+      renderTable();
+    };
+
+    function sortIssues() {
+      filteredIssues.sort((a, b) => {
+        let aValue, bValue;
+
+        switch (currentSort.column) {
+          case 'severity':
+            const severityOrder = { mustFix: 1, goodToFix: 2, needsReview: 3 };
+            aValue = severityOrder[a.category];
+            bValue = severityOrder[b.category];
+            break;
+          case 'issueName':
+            aValue = a.description.toLowerCase();
+            bValue = b.description.toLowerCase();
+            break;
+          case 'occurrence':
+            aValue = a.totalItems;
+            bValue = b.totalItems;
+            break;
+        }
+
+        if (aValue < bValue) return currentSort.direction === 'asc' ? -1 : 1;
+        if (aValue > bValue) return currentSort.direction === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    function renderTable() {
+      const tbody = document.getElementById('issuesTableBody');
+      const emptyState = document.getElementById('emptyState');
+      const table = document.querySelector('.issues-table');
+
+      if (filteredIssues.length === 0) {
+        table.style.display = 'none';
+        emptyState.style.display = 'block';
+        return;
+      }
+
+      table.style.display = 'table';
+      emptyState.style.display = 'none';
+
+      tbody.innerHTML = filteredIssues
+        .map(issue => {
+          const severityLabel = {
+            mustFix: 'Must Fix',
+            goodToFix: 'Good to Fix',
+            needsReview: 'Manual Test',
+          }[issue.category];
+
+          const severityClass = issue.category.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+          const conformanceBadges = issue.conformance
+            .filter(c => c.startsWith('wcag'))
+            .slice(0, 3)
+            .map(conf => {
+              const formatted = formatWcagId(conf);
+              if (wcagCriteriaLabels[formatted]) {
+                return `<span class="conformance-badge" title="${formatted}">${formatted}</span>`;
+              }
+            })
+            .join('');
+
+          const disabilitiesBadges = issue.disabilities
+            .map(disability => {
+              return `<span class="conformance-badge" title="${disability}">${disability} Disability</span>`;
+            })
+            .join('');
+
+          return `
+          <tr class="issue-row" data-category="${issue.category}" data-rule-id="${issue.ruleId}" role="button" tabindex="0" aria-label="${issue.description}, ${severityLabel}, ${issue.totalItems} occurrences">
+            <td>
+              <span class="category-badge ${severityClass}">${severityLabel}</span>
+            </td>
+            <td>
+              <div class="issue-name-cell">
+                <div class="issue-description">${htmlEscapeString(issue.description)}</div>
+                <div class="issue-conformance-badges">
+                  ${conformanceBadges}${disabilitiesBadges}
+                </div>
+              </div>
+            </td>
+            <td>
+              <span class="occurrence-count">${issue.totalItems} occ.</span>
+            </td>
+            <td>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <g clip-path="url(#clip0_263_236)">
+                  <path d="M8.58984 16.59L13.1698 12L8.58984 7.41L9.99984 6L15.9998 12L9.99984 18L8.58984 16.59Z" fill="#5735DF"/>
+                </g>
+                <defs>
+                  <clipPath id="clip0_263_236">
+                    <rect width="24" height="24" fill="white"/>
+                  </clipPath>
+                </defs>
+              </svg>
+            </td>
+          </tr>
+        `;
+        })
+        .join('');
+
+      // Add event listeners after rendering
+      document.querySelectorAll('.issue-row').forEach(row => {
+        const openIssue = function() {
+          const category = row.getAttribute('data-category');
+          const ruleId = row.getAttribute('data-rule-id');
+          const issue = filteredIssues.find(i => i.ruleId === ruleId && i.category === category);
+          
+          if (issue) {
+            window.openIssueDetails(category, issue);
+          }
+        };
+
+        // Click handler
+        row.addEventListener('click', openIssue);
+
+        // Keyboard handler
+        row.addEventListener('keydown', function(event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openIssue();
+          }
+        });
+      });
+    }
+
+    function updateTotalCount() {
+      const countElement = document.getElementById('totalIssuesCount');
+      const totalCount = filteredIssues.length;
+      const allCount = allIssues.length;
+
+      if (totalCount === allCount) {
+        countElement.textContent = `Total ${totalCount} issues`;
+      } else {
+        countElement.textContent = `Showing ${totalCount} issues`;
+      }
+    }
+
+    window.openIssueDetails = function (category, issueData) {
+      const issue = typeof issueData === 'string' ? JSON.parse(issueData) : issueData;
+      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();
+        }
+      }
+    };
+  })();
+</script>