+ ${item.xpath}
+
+
+ <%- include("components/wcagCompliance") %>
@@ -18,6 +19,9 @@
<%# dynamically generated section from scripts/categorySummary %>
<%- include("components/ruleOffcanvas") %> <%- include("footer") %>
+ + Tooltip: Copy +
Tooltip: Contains AI suggestions.
diff --git a/static/ejs/partials/scripts/categorySummary.ejs b/static/ejs/partials/scripts/categorySummary.ejs index 747de68c..f20834d2 100644 --- a/static/ejs/partials/scripts/categorySummary.ejs +++ b/static/ejs/partials/scripts/categorySummary.ejs @@ -38,7 +38,7 @@ scanItems[category].rules.forEach((rule, index) => { const buttonAriaLabel = `${rule.description}, ${rule.totalItems} occurrences`; const purpleAiSvgId = `${category}-${rule.rule}-${index}`; - const isPurpleAiRule = purpleAiRules.includes(rule.rule) && showPurpleAi; + const isPurpleAiRule = purpleAiRules.includes(rule.rule); const ruleItem = createElementFromString(`
- ${
- page.url
- }
+ ${ isCustomFlow
+ ?
+ `
+
+ 
+ ${page.url}
+
+ `
+ : `${page.url}`
+ }
${getFormattedCategoryTitle(category)} elements
${page.items.length}
@@ -208,6 +214,18 @@ category summary is clicked %>
`);
+ 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);
+ }
+ }
+
accordionsList.appendChild(accordion);
const accordionBody = accordion.getElementsByClassName('accordion-body')[0];
@@ -218,7 +236,7 @@ category summary is clicked %>
const buttonDivForAiFeedback = `${buttonAIId}-${index}`;
const aiErrorDiv = `${errorAIId}-${index}`;
let itemCard;
- const isPurpleAiRule = purpleAiRules.includes(ruleInCategory.rule) && showPurpleAi;
+ const isPurpleAiRule = purpleAiRules.includes(ruleInCategory.rule);
let purpleAiQueryLabel;
if (isPurpleAiRule) {
purpleAiQueryLabel = await checkPurpleAiQueryLabel(ruleInCategory.rule, item.html);
@@ -247,6 +265,40 @@ category summary is clicked %>
`
: ``
}
+ ${ item.xpath
+ ?
+ `
+
+ ` + :`` + }
+
+ Path
+
+
+ + ` + :`` + }
${
item.html
@@ -278,13 +330,39 @@ category summary is clicked %>
` : ``
}
@@ -294,6 +372,35 @@ category summary is clicked %>
`);
elementCardsList.appendChild(itemCard);
+ const copyTooltip = itemCard.querySelector('.copy-icon');
+ const copyTooltipItem = new bootstrap.Tooltip(copyTooltip);
+
+ const copyButtonElem = itemCard.getElementsByClassName('copy-button')[0];
+ const textToCopy = createElementFromString(``)
+ copyButtonElem.onclick = event => {
+ textToCopy.select();
+ // Copy the text inside the text field
+ navigator.clipboard.writeText(textToCopy.value);
+
+ copyTooltip.setAttribute('data-bs-original-title', 'Copied');
+ copyTooltipItem.update();
+ copyTooltipItem.show();
+
+ setTimeout(() => {
+ copyTooltip.setAttribute('data-bs-original-title', 'Copy');
+ copyTooltipItem.update();
+ }, 1500)
+ };
+ copyButtonElem.onmouseover = event => {
+ copyTooltip.dispatchEvent(new MouseEvent('mouseover'));
+ };
+ copyButtonElem.onmouseout = event => {
+ copyTooltip.dispatchEvent(new MouseEvent('mouseout'));
+ }
+ copyButtonElem.onmousedown = event => {
+ event.preventDefault();
+ }
+
hljs.configure({
ignoreUnescapedHTML: true
});
@@ -433,9 +540,9 @@ category summary is clicked %>
'aria-roles': '
AI suggestion
- ${purpleAiQueryLabel ? `
-
- ` : `
- Processing AI suggestions, please check back later.`
- }
+ ${purpleAiQueryLabel.hasNetworkError ?
+ `
+ ` :
+ (purpleAiQueryLabel.label ?
+ `
+ ` :
+ `
+ Processing AI suggestions, please check back later.
+ `
+ )
+ }
\n Elements assigned invalid ARIA role values are not interpreted by assistive\n technology as intended by the developer.\n
', label: '\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
', 'landmark-one-main': '\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
', - 'aria-braille-equivalent': '\nARIA braille attributes were introduced to adjust how labels and role descriptions appear on braille displays, but they cannot be the only attribute providing a label, or a role description. aria-braillelabel must only be applied to elements with an accessible name, like aria-label , and aria-brailleroledescription should only be used with aria-roledescription.\n
\nARIA attributes should be used according to their specified roles for elements, as using them incorrectly 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.\n
', - 'aria-deprecated-role': '\nDeprecated ARIA roles are not recognized or properly processed by screen readers and other assistive technologies. Using these means may hinder some users access to essential information. Always assign values to role that align with current, non-deprecated or abstract ARIA roles.\n
', - 'aria-prohibited-attr': '\nThis rule specifically checks that none of the attributes used with a particular role are marked as "prohibited" for that role in the latest version of ARIA. For instance, attributes like aria-label and aria-labelledby are not permitted on roles like presentation and none, as well as on text-like roles such as code, insertion, strong and others.\n
\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
', + 'aria-conditional-attr': '\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
', + 'aria-deprecated-role': '\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
', + 'aria-prohibited-attr': '\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
' }; \ No newline at end of file diff --git a/static/ejs/partials/scripts/screenshotLightbox.ejs b/static/ejs/partials/scripts/screenshotLightbox.ejs new file mode 100644 index 00000000..30822885 --- /dev/null +++ b/static/ejs/partials/scripts/screenshotLightbox.ejs @@ -0,0 +1,66 @@ +<%# functions used to show lightbox of screenshot when thumbnail is clicked on %> + \ No newline at end of file diff --git a/static/ejs/partials/scripts/utils.ejs b/static/ejs/partials/scripts/utils.ejs index 9345d403..eb51120f 100644 --- a/static/ejs/partials/scripts/utils.ejs +++ b/static/ejs/partials/scripts/utils.ejs @@ -215,7 +215,7 @@ }) .catch((error) => { delete ongoingPromise[key]; // remove the promise from the queue in case of an error - throw error; + throw new Error('Network Error'); }); // add the promise to the queue @@ -232,26 +232,19 @@ getRuleIdData: (ruleId) => `https://govtechsg.github.io/purple-ai/results/${ruleId}.json` } - const hasProxy = `<%=proxy%>`; + const isOffline = () => !window.navigator.onLine; - const checkPurpleAiAvail = async () => { - // check if catalog is empty - try { - return api(apiUrls.catalog).then(catalogData => { - const catalogHasData = Object.keys(catalogData).length > 1; - return catalogHasData; - }) - } catch (e) { - console.error('Unable to fetch Purple AI catalog'); - return false; + const checkPurpleAiQueryLabel = async (ruleId, ruleHtml) => { + const purpleAiQueryLabel = { + label: null, + hasNetworkError: false, + hasGenericError: false } - } - const checkPurpleAiQueryLabel = async (ruleId, ruleHtml) => { return api(apiUrls.catalog).then(catalogData => { // no information for current rule if (!catalogData[ruleId] || catalogData[ruleId].length === 0) { - return null; + return purpleAiQueryLabel; } if (rulesUsingRoles.includes(ruleId)) { @@ -262,7 +255,8 @@ if (roleForHtml) { const currentLabel = `${htmlElement}_${roleForHtml}`; const foundLabel = catalogData[ruleId].find(label => label === currentLabel); - return foundLabel ? escapeHtmlForAI(currentLabel) : null; + purpleAiQueryLabel.label = foundLabel ? escapeHtmlForAI(currentLabel) : null; + return purpleAiQueryLabel; } } @@ -272,7 +266,8 @@ const currentLabel = currentLabelList.join('_'); if (catalogData[ruleId].includes(currentLabel)) { - return escapeHtmlForAI(currentLabel); + purpleAiQueryLabel.label = escapeHtmlForAI(currentLabel); + return purpleAiQueryLabel; } // count the number of elements in keyArr that @@ -286,15 +281,53 @@ return attrMatch.length >= 3; }) - return foundLabel ? escapeHtmlForAI(foundLabel) : null; + purpleAiQueryLabel.label = foundLabel ? escapeHtmlForAI(foundLabel) : null; + return purpleAiQueryLabel; }) .catch(err => { console.error(`An error has occured while checking if ${ruleId} needs AI query`); - return null; + if (err.message === 'Network Error') { + return { + label: null, + hasNetworkError: true, + hasGenericError: false + } + } else { + return { + label: null, + hasNetworkError: false, + hasGenericError: true + } + } }); } - const getPurpleAiAnswer = async (ruleId, accordionDiv, ruleHtmlLabel, buttonsDiv, aiErrorDiv) => { + const handleOfflinePurpleAi = async (ruleId, accordionDiv, html, buttonsDiv, aiErrorDiv) => { + let purpleAiQueryLabel = await checkPurpleAiQueryLabel(ruleId, html); + if (purpleAiQueryLabel.hasNetworkError) { + document + .getElementById(aiErrorDiv) + .replaceChildren( + createElementFromString( + `This feature requires internet connection. Please try again
`,
+ ),
+ );
+ } else if (purpleAiQueryLabel.hasNetworkError) {
+ document
+ .getElementById(aiErrorDiv)
+ .replaceChildren(
+ createElementFromString(
+ `Something went wrong. Please try again
`,
+ ),
+ );
+ } else if (!purpleAiQueryLabel.label) {
+ document.getElementById(accordionDiv).innerHTML = `Processing AI suggestions, please check back later.`
+ } else {
+ await getPurpleAiAnswer(ruleId, accordionDiv, purpleAiQueryLabel.label, buttonsDiv, aiErrorDiv);
+ }
+ }
+
+ const getPurpleAiAnswer = async (ruleId, accordionDiv, ruleHtmlLabel, buttonsDiv, aiErrorDiv, html) => {
const storagePath = '<%= storagePath %>';
document.getElementById(buttonsDiv).disabled = true;
document.getElementById(buttonsDiv).textContent = 'Generating...';
@@ -307,62 +340,67 @@
`$1`,
);
const replacedRuleHtmlLabel = escapeHtmlForAI(ruleHtmlLabel);
- const aiVoteFeedback = JSON.parse(localStorage.getItem(storagePath));
- if (aiVoteFeedback && aiVoteFeedback[buttonsDiv]) {
- var voteString = aiVoteFeedback[buttonsDiv] === 'useful' ?
- `You rated this AI suggestion useful.` :
- `You rated this AI suggestion not useful`;
- document.getElementById(accordionDiv).innerHTML = `
+ document.getElementById(accordionDiv).innerHTML = `
+
`;
- } else {
- document.getElementById(accordionDiv).innerHTML = `
`
+
+ if (!isOffline()) {
+ const aiVoteFeedback = JSON.parse(localStorage.getItem(storagePath));
+ if (aiVoteFeedback && aiVoteFeedback[buttonsDiv]) {
+ var voteString = aiVoteFeedback[buttonsDiv] === 'useful' ?
+ `You rated this AI suggestion useful.` :
+ `You rated this AI suggestion not useful`;
+ const votedElem = createElementFromString(`
+
+ `)
+ document.getElementById(accordionDiv).getElementsByClassName('ai-response-card')[0].appendChild(votedElem);
+ } else {
+ const feedbackButtonsElem = createElementFromString( `
+
+ `);
+ document.getElementById(accordionDiv).getElementsByClassName('ai-response-card')[0].appendChild(feedbackButtonsElem);
+ }
}
+
document.querySelectorAll('.codeForAiResponse').forEach(el => {
hljs.highlightElement(el);
});
@@ -371,11 +409,14 @@
document.getElementById(buttonsDiv).disabled = false;
document.getElementById(buttonsDiv).style = `border: 1px solid #6E52EF;color: #6E52EF;`;
document.getElementById(buttonsDiv).textContent = 'Generate response';
+ const errorMessageToDisplay = err.message === 'Network Error'
+ ? 'This feature requires internet connection. Please try again'
+ : 'Something went wrong. Please try again.'
document
.getElementById(aiErrorDiv)
.replaceChildren(
createElementFromString(
- `
${replacedString.replace(/\n/g, '
')}
-
- `;
+
- ${replacedString.replace(/\n/g, '
')}
-
Something went wrong. Please try again.
`,
+ `${errorMessageToDisplay}
`,
),
);
});
@@ -391,6 +432,12 @@
return titles[category];
}
+ function escapeHtmlStringForArg(string) {
+ return htmlEscapeString(string)
+ .replaceAll(''', "\\'")
+ .replace(/>\s+(.*?)\s+<\//g, '>$1</');
+ }
+
function htmlEscapeString(string) {
if (string.includes('</script>')) {
string = string.replaceAll('</script>', '<\/script>')
diff --git a/static/ejs/partials/styles/styles.ejs b/static/ejs/partials/styles/styles.ejs
index 4acb23ee..dc49bf18 100644
--- a/static/ejs/partials/styles/styles.ejs
+++ b/static/ejs/partials/styles/styles.ejs
@@ -352,6 +352,56 @@
display: inline-block;
}
+ .screenshot-lightbox {
+ display: none;
+ position: fixed;
+ z-index: 9999;
+ padding: 32px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0, 0, 0, 0.7);
+ }
+ .lightbox-content {
+ position: relative;
+ margin: auto;
+ display: block;
+ height: 100%;
+ width: 80%;
+ overflow: auto;
+ }
+ .lightbox-header {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ align-items: center;
+ margin: 1rem 0;
+ }
+ .lightbox-header button {
+ background-color: rgba(0, 0, 0, 0.8);
+ border: none;
+ border-radius: 50%;
+ margin: 0;
+ min-height: 36px;
+ min-width: 36px;
+ }
+ .lightbox-header h5 {
+ flex: 1;
+ text-align: center;
+ color: #FFFFFF;
+ font-weight: 700;
+ }
+ #lightbox-image {
+ object-fit: contain;
+ position: absolute;
+ width: 100%;
+ }
+ #lightbox-image:hover {
+ cursor: zoom-in;
+ }
+
#pagesScannedModalToggle {
background-color: transparent;
color: #0047FA;
@@ -421,17 +471,32 @@
#pagesScannedModal .not-scanned-url {
word-wrap: break-word;
}
- #pagesScannedModal span {
+ #pagesScannedModal p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #4A6168;
+ margin: 0;
}
#pagesScannedModal h6 {
padding-left: 0.5rem;
}
+
+ #pagesScannedModal .custom-flow-screenshot-container {
+ flex-direction: row;
+ }
+
+ #pagesScannedModal .custom-flow-screenshot-container img {
+ height: 56px;
+ min-width: 20%;
+ }
+
+ #pagesScannedModal .display-url-container {
+ min-width: 80%;;
+ }
+
#wcag-compliance-card,
#top-five-card {
border-radius: 0.25rem;
@@ -965,6 +1030,23 @@
list-style-position: outside;
}
+ .page-item-card-section-content .copy-button {
+ align-self: center;
+ all: unset;
+ border: 1px solid #97ADB5;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 0.5rem;
+ padding: 0 0.25rem;
+ }
+
+ .page-item-card-section-content .path-container {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ }
+
.processAI {
color: #4a6168;
}
@@ -973,6 +1055,21 @@
gap: 1rem;
}
+ .custom-flow-screenshot {
+ border: 1px solid #2E69FF;
+ border-radius: 4px;
+ width: 150px;
+ height: 128px;
+ object-fit: cover;
+ object-position: 100% 0;
+ }
+
+ .custom-flow-screenshot-container {
+ display: flex;
+ align-items: top;
+ gap: 1rem
+ }
+
#expandedRuleCategoryContent .accordion-body pre, .bg-grey-w-border {
background-color: #f6f8f9;
border: 1px solid #b5c5ca;
diff --git a/static/ejs/report.ejs b/static/ejs/report.ejs
index 831e41ca..ffa6a69e 100644
--- a/static/ejs/report.ejs
+++ b/static/ejs/report.ejs
@@ -20,6 +20,7 @@
<%- include('partials/scripts/utils') %>
<%- include('partials/scripts/categorySummary') %>
<%- include('partials/scripts/ruleOffcanvas') %>
+ <%- include('partials/scripts/screenshotLightbox') %>
-