@govtechsg/oobee 0.10.93 → 0.10.94

package/dist/static/ejs/partials/components/header/aboutScanModal/ScanConfiguration.ejs

@@ -5,17 +5,17 @@
     </h2>
     <%- include('../../scannedPagesSegmentedTabs') %>
     <div class="seg-panels">
-      <div id="pages-scanned" role="tabpanel">
+      <div id="pages-scanned" role="tabpanel" aria-labelledby="seg-scanned">
         <ul id="pagesScannedList" class="unbulleted-list">
           <!-- dynamically populated -->
         </ul>
       </div>
-      <div id="pages-not-scanned" role="tabpanel" hidden>
+      <div id="pages-not-scanned" role="tabpanel" aria-labelledby="seg-not-scanned" hidden>
         <ul id="pagesNotScannedList" class="unbulleted-list">
           <!-- dynamically populated -->
         </ul>
       </div>
-      <div id="pages-unsupported" role="tabpanel" hidden>
+      <div id="pages-unsupported" role="tabpanel" aria-labelledby="seg-unsupported" hidden>
         <ul id="unsupportedDocsList" class="unbulleted-list">
           <!-- dynamically populated -->
         </ul>

package/dist/static/ejs/partials/components/header/aboutScanModal/ScanDetails.ejs

@@ -1,5 +1,5 @@
 <aside id="scan-about" class="about-scan-details-left">
-  <h1>About this scan</h1>
+  <h1 id="aboutScanModalLabel">About this scan</h1>
   <ul>
     <li>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,7 +33,9 @@
       </span>
     </li>
 
-    <hr class="about-scan-divider" />
+    <li class="about-scan-divider-item" aria-hidden="true">
+      <hr class="about-scan-divider" />
+    </li>
 
     <% if (viewport !== null) { %>
       <li>
@@ -64,7 +66,7 @@
         type="button"
         class="js-view-btn about-scan-toggle"
         aria-controls="view-crawl"
-        aria-selected="true"
+        aria-expanded="true"
       >
         <div class="d-flex">
           <div class="about-scan-link-row">
@@ -82,30 +84,33 @@
         <path d="M13.2346 8.78333C13.2668 8.53333 13.2828 8.275 13.2828 8C13.2828 7.73333 13.2668 7.46667 13.2266 7.21667L14.857 5.9C15.0016 5.78333 15.0418 5.55833 14.9534 5.39167L13.4113 2.625C13.315 2.44167 13.1142 2.38333 12.9375 2.44167L11.0179 3.24167C10.6163 2.925 10.1906 2.65833 9.71675 2.45833L9.42761 0.341667C9.39548 0.141667 9.23485 0 9.04209 0H5.95791C5.76515 0 5.61255 0.141667 5.58042 0.341667L5.29128 2.45833C4.81741 2.65833 4.3837 2.93333 3.99015 3.24167L2.07057 2.44167C1.89387 2.375 1.69308 2.44167 1.5967 2.625L0.0626475 5.39167C-0.0337329 5.56667 -0.00160615 5.78333 0.159028 5.9L1.78946 7.21667C1.7493 7.46667 1.71718 7.74167 1.71718 8C1.71718 8.25833 1.73324 8.53333 1.7734 8.78333L0.142964 10.1C-0.00160614 10.2167 -0.0417645 10.4417 0.0465841 10.6083L1.58867 13.375C1.68505 13.5583 1.88584 13.6167 2.06254 13.5583L3.98212 12.7583C4.3837 13.075 4.80938 13.3417 5.28325 13.5417L5.57239 15.6583C5.61255 15.8583 5.76515 16 5.95791 16H9.04209C9.23485 16 9.39548 15.8583 9.41958 15.6583L9.70872 13.5417C10.1826 13.3417 10.6163 13.075 11.0099 12.7583L12.9294 13.5583C13.1061 13.625 13.3069 13.5583 13.4033 13.375L14.9454 10.6083C15.0418 10.425 15.0016 10.2167 14.849 10.1L13.2346 8.78333ZM7.5 11C5.90972 11 4.60859 9.65 4.60859 8C4.60859 6.35 5.90972 5 7.5 5C9.09028 5 10.3914 6.35 10.3914 8C10.3914 9.65 9.09028 11 7.5 11Z" fill="#686868"/>
       </svg>
 
-      <div>
-        Advanced scan options enabled
+      <div class="advanced-group-content">
+        <div>
+          Advanced scan options enabled
+        </div>
+
+        <ul class="advanced-sublist">
+          <% if (advancedScanOptionsSummaryItems.showIncludeScreenshots) { %>
+            <li class="advanced-sublist-li">Include screenshots</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showAllowSubdomains) { %>
+            <li class="advanced-sublist-li">Allow subdomains for scans</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showEnableCustomChecks) { %>
+            <li class="advanced-sublist-li">Enable custom checks</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showEnableWcagAaa) { %>
+            <li class="advanced-sublist-li">Enable WCAG AAA checks</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showSlowScanMode) { %>
+            <li class="advanced-sublist-li">Slow scan mode</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showAdhereRobots) { %>
+            <li class="advanced-sublist-li">Adhere to robots.txt</li>
+          <% } %>
+        </ul>
       </div>
     </li>
-    <ul class="advanced-sublist">
-      <% if (advancedScanOptionsSummaryItems.showIncludeScreenshots) { %>
-        <li class="advanced-sublist-li">Include screenshots</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showAllowSubdomains) { %>
-        <li class="advanced-sublist-li">Allow subdomains for scans</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showEnableCustomChecks) { %>
-        <li class="advanced-sublist-li">Enable custom checks</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showEnableWcagAaa) { %>
-        <li class="advanced-sublist-li">Enable WCAG AAA checks</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showSlowScanMode) { %>
-        <li class="advanced-sublist-li">Slow scan mode</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showAdhereRobots) { %>
-        <li class="advanced-sublist-li">Adhere to robots.txt</li>
-      <% } %>
-    </ul>
 
     <li>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -115,7 +120,7 @@
         type="button"
         class="js-view-btn about-scan-toggle"
         aria-controls="view-wcag"
-        aria-selected="false"
+        aria-expanded="false"
       >
         <span class="wcag-criteria-label">
           WCAG Automated Testing
@@ -131,7 +136,9 @@
       </button>
     </li>
 
-    <hr class="about-scan-divider" />
+    <li class="about-scan-divider-item" aria-hidden="true">
+      <hr class="about-scan-divider" />
+    </li>
 
     <li>
       <span id="oobeeAppVersion" class="oobee-version-text">N/A</span>

package/dist/static/ejs/partials/components/ruleModal/ruleOffcanvas.ejs

@@ -129,6 +129,7 @@
                     <div
                       id="pagesAccordionContent"
                       class="accordion-collapse collapse"
+                      role="region"
                       aria-labelledby="pagesAccordionHeader"
                       data-bs-parent="#pagesAccordion"
                     >

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

@@ -1,9 +1,12 @@
 <div class="segmented-tabs" role="tablist" aria-label="Crawl views">
   <button
     type="button"
+    id="seg-scanned"
     class="seg-pill"
+    role="tab"
     aria-controls="pages-scanned"
     aria-selected="true"
+    tabindex="0"
     data-tab-target="#pages-scanned"
   >
     <span id="totalPagesScannedLabel">
@@ -18,8 +21,10 @@
     type="button"
     id="seg-not-scanned"
     class="seg-pill"
+    role="tab"
     aria-controls="pages-not-scanned"
     aria-selected="false"
+    tabindex="-1"
     data-tab-target="#pages-not-scanned"
   >
     <span id="totalPagesNotScannedLabel">
@@ -34,8 +39,10 @@
     type="button"
     id="seg-unsupported"
     class="seg-pill"
+    role="tab"
     aria-controls="pages-unsupported"
     aria-selected="false"
+    tabindex="-1"
     data-tab-target="#pages-unsupported"
   >
     <span id="totalUnsupportedDocsLabel">

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

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

package/dist/static/ejs/partials/scripts/header/aboutScanModal/AboutScanModal.ejs

@@ -6,8 +6,8 @@
     function showPane(targetId) {
       // hide all panes
       panes.forEach(p => p.hidden = true);
-      // deselect all buttons
-      btns.forEach(b => b.setAttribute('aria-selected', 'false'));
+      // collapse all buttons
+      btns.forEach(b => b.setAttribute('aria-expanded', 'false'));
 
       // show the requested pane
       const pane = document.getElementById(targetId);
@@ -16,7 +16,7 @@
 
         // mark the controlling button active
         const btn = btns.find(b => b.getAttribute('aria-controls') === targetId);
-        if (btn) btn.setAttribute('aria-selected', 'true');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
 
         // move focus to the pane heading for screen readers/keyboard users
         const h = pane.querySelector('h4, h3, h2, [role="heading"]');

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

@@ -84,11 +84,13 @@
                 : '';
 
             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 class="priority-issue-item" data-rule-id="${issue.ruleId}">
+                <button type="button" class="priority-issue-action d-flex g-one" aria-pressed="false">
+                  <div class="d-flex justify-content-between align-items-center w-90">
+                      <div class="priority-issue-title">${issue.description}</div>
+                      ${disabilityBadges}
+                  </div>
+                </button>
               </li>
             `;
           })
@@ -122,7 +124,7 @@
               data-bs-parent="#prioritiseIssuesAccordion"
             >
               <div class="accordion-body">
-                <ul class="priority-issues-list">
+                <ul class="priority-issues-list" aria-label="Priority issues">
                   ${issuesListHTML}
                 </ul>
               </div>
@@ -135,19 +137,25 @@
     accordionContainer.innerHTML = accordionHTML;
 
     document.querySelectorAll('.priority-issue-item').forEach(item => {
+      const actionButton = item.querySelector('.priority-issue-action');
+      if (!actionButton) return;
+
       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');
+          const button = el.querySelector('.priority-issue-action');
+          if (button) {
+            button.setAttribute('aria-pressed', 'false');
+          }
         });
         document.querySelectorAll('.priority-issue-title').forEach(el => {
           el.classList.remove('active');
         });
 
         item.classList.add('active');
-        item.setAttribute('aria-selected', 'true');
+        actionButton.setAttribute('aria-pressed', 'true');
         const title = item.querySelector('.priority-issue-title');
         if (title) {
           title.classList.add('active');
@@ -167,16 +175,7 @@
         }
       };
 
-      // Click handler
-      item.addEventListener('click', selectIssue);
-
-      // Keyboard handler
-      item.addEventListener('keydown', function (event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          selectIssue();
-        }
-      });
+      actionButton.addEventListener('click', selectIssue);
     });
 
     // Automatically open first accordion and select first issue
@@ -197,7 +196,10 @@
       const firstIssueItem = document.querySelector('.priority-issue-item');
       if (firstIssueItem) {
         firstIssueItem.classList.add('active');
-        firstIssueItem.setAttribute('aria-selected', 'true');
+        const firstIssueButton = firstIssueItem.querySelector('.priority-issue-action');
+        if (firstIssueButton) {
+          firstIssueButton.setAttribute('aria-pressed', 'true');
+        }
         const firstIssueTitle = firstIssueItem.querySelector('.priority-issue-title');
         if (firstIssueTitle) {
           firstIssueTitle.classList.add('active');

package/dist/static/ejs/partials/scripts/ruleModal/pageAccordionBuilder.ejs

@@ -451,7 +451,7 @@
             <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
               <div class="accordion-body p-3">
                 ${isCustomFlow
-                  ? createCustomFlowContent(page)
+                  ? createCustomFlowContent(page, ruleInCategory)
                   :
                   `<div class="d-flex align-items-center gap-1 accordion-link" style="    word-wrap: break-word; word-break: break-word;">
                     <a href="${page.url}" target="_blank">${page.url}
@@ -486,16 +486,46 @@
     return accordion;
   }
 
-  function createCustomFlowContent(page) {
+  function getCustomFlowPageScreenshot(page, ruleInCategory) {
+    if (page && page.pageImagePath) return page.pageImagePath;
+
+    // Use same source-of-truth as scanAboutModal.
+    const scannedPages =
+      typeof scanData !== 'undefined' &&
+      scanData &&
+      Array.isArray(scanData.pagesScanned)
+        ? scanData.pagesScanned
+        : [];
+
+    if (page) {
+      const matchByUrl = scannedPages.find((p) => p && p.url === page.url && p.pageImagePath);
+      if (matchByUrl) return matchByUrl.pageImagePath;
+
+      const matchByTitle = scannedPages.find(
+        (p) => p && p.pageTitle === page.pageTitle && p.pageImagePath,
+      );
+      if (matchByTitle) return matchByTitle.pageImagePath;
+    }
+
+    return '';
+  }
+
+  function createCustomFlowContent(page, ruleInCategory) {
+    const pageScreenshot = getCustomFlowPageScreenshot(page, ruleInCategory);
+
     return `
       <div class="custom-flow-screenshot-container">
           <div class="custom-flow-thumb">
-            <img
-              src="${page.pageImagePath}"
-              alt="Screenshot of ${page.url}"
-              class="custom-flow-screenshot"
-              onerror="this.onerror = null; this.remove();"
-            >
+            ${
+              pageScreenshot
+                ? `<img
+                    src="${pageScreenshot}"
+                    alt="Screenshot of ${page.url}"
+                    class="custom-flow-screenshot"
+                    onerror="this.onerror = null; this.remove();"
+                  >`
+                : ''
+            }
           </div>
           <div class="display-url-container">
             <div><a href="${page.url}" target="_blank">${page.url}</a></div>
@@ -538,6 +568,7 @@
 
   function setupCustomFlowScreenshot(accordion, page) {
     const customScreenshotElem = accordion.getElementsByClassName('custom-flow-screenshot')[0];
+    if (!customScreenshotElem) return;
 
     customScreenshotElem.onerror = function(event) {
       this.onerror = null;

package/dist/static/ejs/partials/scripts/scannedPagesSegmentedTabs.ejs

@@ -1,21 +1,27 @@
 <script>
   document.addEventListener('click', function (e) {
-    const btn = e.target.closest('.seg-pill');
+    const btn = e.target.closest('.seg-pill[role="tab"]');
     if (!btn) return;
 
-    const container = btn.closest('.segmented-tabs');
+    const container = btn.closest('.segmented-tabs[role="tablist"]');
+    if (!container) return;
+
     const targetSel = btn.getAttribute('data-tab-target');
     const panel = document.querySelector(targetSel);
     if (!panel) return;
 
-    container.querySelectorAll('.seg-pill').forEach((p) =>
-      p.setAttribute('aria-selected', 'false')
-    );
+    container.querySelectorAll('.seg-pill[role="tab"]').forEach((p) => {
+      p.setAttribute('aria-selected', 'false');
+      p.setAttribute('tabindex', '-1');
+    });
+
     btn.setAttribute('aria-selected', 'true');
+    btn.setAttribute('tabindex', '0');
 
     document
       .querySelectorAll('.seg-panels > [role="tabpanel"]')
       .forEach((p) => (p.hidden = true));
+
     panel.hidden = false;
   });
 

package/dist/static/ejs/partials/scripts/screenshotLightbox.ejs

@@ -6,18 +6,32 @@
   const lightboxContent = document.getElementsByClassName('lightbox-content')[0];
   const lightboxImg = document.getElementById('lightbox-image');
 
-  var customFlowScreenshots = document.getElementsByClassName('custom-flow-screenshot');
-  Array.from(customFlowScreenshots).forEach(screenshot => {
-    screenshot.onerror = function (event) {
-      screenshot.onerror = null;
-      screenshot.remove();
-    };
-    screenshot.onclick = event => {
-      event.preventDefault();
-      const pageTitle = screenshot.parentNode.getElementsByTagName('a')[0].textContent;
-      const pageUrl = screenshot.parentNode.getElementsByTagName('a')[0].href;
-      openLightbox(screenshot.src, pageTitle, pageUrl);
-    };
+  // Handle dynamically inserted custom-flow screenshots (about scan modal content is rendered later)
+  document.addEventListener(
+    'error',
+    event => {
+      const target = event.target;
+      if (target && target.classList && target.classList.contains('custom-flow-screenshot')) {
+        target.onerror = null;
+        target.remove();
+      }
+    },
+    true,
+  );
+
+  document.addEventListener('click', event => {
+    const screenshot = event.target.closest('.custom-flow-screenshot');
+    if (!screenshot) return;
+
+    event.preventDefault();
+
+    const container = screenshot.closest('.custom-flow-screenshot-container');
+    const link = container ? container.querySelector('.display-url-container a') : null;
+
+    const pageTitle = link?.textContent?.trim() || screenshot.getAttribute('alt') || 'Screenshot';
+    const pageUrl = link?.href || '';
+
+    openLightbox(screenshot.src, pageTitle, pageUrl);
   });
 
   lightbox.addEventListener('click', event => {
@@ -31,8 +45,9 @@
   });
 
   const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
+  let offcanvasItem = null;
   if (offcanvasElem) {
-    const offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
+    offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
     offcanvasItem._config.keyboard = false; // Disable default keyboard handling
   }
 
@@ -43,27 +58,30 @@
     pagesScannedModalItem._config.keyboard = false;
   }
 
-  document.addEventListener('keydown', event => {
-    if (event.key === 'Escape') {
-      if (offcanvasItem._isShown) {
-        if (lightbox.style.display === 'block') {
-          event.preventDefault(); // Prevent default bootstrap behaviour
-          closeLightbox();
-        } else {
-          offcanvasItem.hide();
-        }
+  // Use capture phase so lightbox handles Escape before Bootstrap modal/offcanvas handlers.
+  document.addEventListener(
+    'keydown',
+    event => {
+      if (event.key !== 'Escape') return;
+
+      if (lightbox.style.display === 'block') {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        closeLightbox();
+        return;
       }
 
-      if (pagesScannedModalItem._isShown) {
-        if (lightbox.style.display === 'block') {
-          event.preventDefault(); // Prevent default bootstrap behaviour
-          closeLightbox();
-        } else {
-          pagesScannedModalItem.hide();
-        }
+      if (offcanvasItem && offcanvasItem._isShown) {
+        offcanvasItem.hide();
       }
-    }
-  });
+
+      if (pagesScannedModalItem && pagesScannedModalItem._isShown) {
+        pagesScannedModalItem.hide();
+      }
+    },
+    true,
+  );
 
   function openLightbox(imgSrc, pageTitle, pageUrl) {
     lightbox.style.display = 'block';

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

@@ -112,7 +112,7 @@
 
   .link {
     color: var(--a11y-majorelle-blue);
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   .link:hover {

package/dist/static/ejs/partials/styles/header/aboutScanModal/ScanDetails.ejs

@@ -3,12 +3,16 @@
     word-break: break-word;
   }
 
-  #scan-about > ul > li:first-child {
-    padding-top: 0.5rem;
+  #aboutScanModalLabel {
+    margin-bottom: 1rem;
   }
 
-  #scan-about ul {
+  #scan-about > ul {
     padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 1rem;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   #scan-about li {
@@ -38,21 +42,28 @@
     margin-bottom: 0.3rem;
   }
 
-  .advanced-group {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0 !important;
+  #scan-about li.advanced-group {
+    align-items: flex-start;
+    margin-bottom: 0;
+  }
+
+  #scan-about li.advanced-group > .advanced-group-content {
+    min-width: 0;
+    flex: 1;
   }
 
-  .advanced-group + .advanced-sublist,
-  .advanced-group + ul {
-    list-style: disc !important;
-    margin-left: 3.125rem;
+  #scan-about li.advanced-group > .advanced-group-content > ul.advanced-sublist {
+    list-style: disc;
+    list-style-position: outside;
+    margin-left: 8px;
+    margin-top: 0.5rem;
+    padding-left: 12px;
+    text-indent: -2px;
   }
 
-  .advanced-group + .advanced-sublist li,
-  .advanced-group + ul li {
+  #scan-about li.advanced-group > .advanced-group-content > ul.advanced-sublist li {
     margin: 0;
+    list-style-position: outside !important;
   }
 
   .advanced-sublist-li {
@@ -85,10 +96,14 @@
 
   .about-scan-toggle .about-us-type-of-scan-text {
     color: var(--a11y-majorelle-blue) !important;
-    display: inline !important;
-    text-decoration: none;
+    display: inline;
+    text-decoration: underline;
     cursor: pointer;
   }
+
+  #pagesScannedModalToggleTxt {
+    color: var(--a11y-majorelle-blue) !important;
+  }
   .about-scan-toggle:hover .about-us-type-of-scan-text,
   .about-scan-toggle .about-us-type-of-scan-text:focus-visible {
     text-decoration: underline;
@@ -112,9 +127,14 @@
     line-height: 1.2;
   }
 
+  .about-scan-divider-item {
+    display: block !important;
+    margin-bottom: 2rem !important;
+  }
+
   .about-scan-link-text {
     color: var(--a11y-majorelle-blue);
-    text-decoration: none;
+    text-decoration: underline;
     cursor: pointer;
   }
 

package/dist/static/ejs/partials/styles/prioritiseIssues/PrioritiseIssues.ejs

@@ -120,15 +120,36 @@
 
   .priority-issue-item {
     padding: 0.75rem;
-    cursor: pointer;
     position: relative;
     padding-left: 1.5rem;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .priority-issue-action {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    text-align: left;
+    cursor: pointer;
+    color: inherit;
+    line-height: 1.5;
+  }
+
+  .priority-issue-action > .w-90 {
+    width: 100% !important;
   }
 
   .priority-issue-item::before {
     counter-increment: issue-counter;
     content: counter(issue-counter) '.';
     line-height: 1.5;
+    margin-right: 0.5rem;
+    flex-shrink: 0;
   }
 
   .priority-issue-item:hover:not(.active) {

package/dist/static/ejs/partials/styles/styles.ejs

@@ -98,7 +98,7 @@
 
   a {
     color: var(--a11y-majorelle-blue);
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   a:hover {