Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback: polish AJAX fragment and adding PII scrub #2462

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 91 additions & 19 deletions _data/sites.json
Original file line number Diff line number Diff line change
Expand Up @@ -631,7 +631,7 @@
}
,{
"@context": {
"@version": 2.0,
"@version": 2.1,
"dct": "http://purl.org/dc/terms/",
"title": { "@id": "dct:title", "@container": "@language" },
"description": { "@id": "dct:description", "@container": "@language" },
Expand All @@ -645,10 +645,10 @@
"en": "Documentation on how to use the elements of the feedback area.",
"fr": "Documentation sur l'utilisation des éléments de la zone commentaires."
},
"modified": "2023-01-10",
"modified": "2025-01-09",
"componentName": "feedback",
"status": "stable",
"version": "2.0",
"version": "2.0.1",
"pages": {
"docs": [
{
Expand Down Expand Up @@ -729,10 +729,20 @@
},
"dependencies": {
"en": [
{ "title": "Page details", "url": "https://wet-boew.github.io/GCWeb/sites/page-details/page-details-docs-en.html", "component": "page-details" }
{ "title": "Page details", "url": "https://wet-boew.github.io/GCWeb/sites/page-details/page-details-docs-en.html", "component": "page-details" },
{ "title": "Postback", "url": "https://wet-boew.github.io/wet-boew/docs/ref/wb-postback/wb-postback-en.html", "component": "postback" },
{ "title": "PII Scrub", "url": "https://wet-boew.github.io/wet-boew/docs/ref/pii-postback/pii-scrub-en.html", "component": "pii-scrub" },
{ "title": "Data JSON", "url": "https://wet-boew.github.io/wet-boew/docs/ref/wb-data-json/wb-data-json-en.html", "component": "wb-data-json" },
{ "title": "JSON Manager", "url": "https://wet-boew.github.io/wet-boew/docs/ref/wb-jsonmanager/wb-jsonmanager-en.html", "component": "wb-json-manager" },
{ "title": "Do Action", "url": "https://wet-boew.github.io/GCWeb/components/wb-doaction/doaction-doc-en.html", "component": "doaction" }
],
"fr": [
{ "title": "Détails de la page", "url": "https://wet-boew.github.io/GCWeb/sites/page-details/page-details-docs-fr.html", "component": "page-details" }
{ "title": "Détails de la page", "url": "https://wet-boew.github.io/GCWeb/sites/page-details/page-details-docs-fr.html", "component": "page-details" },
{ "title": "Envoie de formulaire via Ajax", "url": "https://wet-boew.github.io/wet-boew/docs/ref/wb-postback/wb-postback-fr.html", "component": "postback" },
{ "title": "Nettoyage d'IPI", "url": "https://wet-boew.github.io/wet-boew/docs/ref/pii-postback/pii-scrub-fr.html", "component": "pii-scrub" },
{ "title": "Data JSON", "url": "https://wet-boew.github.io/wet-boew/docs/ref/wb-data-json/wb-data-json-fr.html", "component": "wb-data-json" },
{ "title": "Gestionnaire JSON", "url": "https://wet-boew.github.io/wet-boew/docs/ref/wb-jsonmanager/wb-jsonmanager-fr.html", "component": "wb-json-manager" },
{ "title": "Do Action", "url": "https://wet-boew.github.io/GCWeb/components/wb-doaction/doaction-doc-fr.html", "component": "doaction" }
]
},
"a11yGuidance": "no accessibility guidance",
Expand All @@ -751,7 +761,7 @@
"en": "https://design.canada.ca/feedback/index.html",
"fr": "https://conception.canada.ca/retroaction/index.html"
},
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"example": [
{
"en": { "href": "page-feedback-en.html", "text": "Page feedback tool" },
Expand All @@ -765,6 +775,10 @@
"_:implement_pft_mws_author"
],
"history": [
{
"en": "July 2024 - AJAX fragment: Added <code>pageData</code> to the French variant, changed <code>aria-live=\"polite\"</code> to <code>role=\"status\"</code> in \"Tell us why below:\".",
"fr": "Juillet 2024 - Fragment AJAX&nbsp;: Ajout de <code>pageData</code> à la variante française, changement de <code>aria-live=\"polite\"</code> à <code>role=\"status\"</code> dans «&nbsp;Dites nous pourquoi ci-dessous&nbsp;:&nbsp;»."
},
{
"en": "August 2023 - Initial implementation of the variation.",
"fr": "Août 2023 - Implémentation initiale de la variante."
Expand All @@ -785,7 +799,7 @@
"en": "https://design.canada.ca/feedback/index.html",
"fr": "https://conception.canada.ca/retroaction/index.html"
},
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"example": [
{
"en": { "href": "page-feedback-contact-en.html", "text": "Page feedback tool with contact link" },
Expand Down Expand Up @@ -995,7 +1009,7 @@
},
{
"@id": "_:implement_pft",
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"name": {
"en": "Standard (wet-boew)",
"fr": "Standard (wet-boew)"
Expand All @@ -1020,10 +1034,12 @@
},
"notes": {
"en": [
"In order for your PFT to benefit from the personal information screening tool, you have to make sure your version of WET-BOEW is at 4.0.84 or higher.",
"To upgrade from the RAP to the PFT, follow the instructions of the \"Upgrade from RAP\" tab.",
"For more information about Data Ajax plugin, please visit <a href=\"https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-en.html\">Data Ajax documentation page</a>."
],
"fr": [
"Pour que votre ORP puisse bénéficier de l'outil de filtrage des informations personnelles, vous devez vous assurer que votre version de WET-BOEW est supérieure ou égalse à 4.0.84.",
"Pour passer du SUP au ORP, suivez les instructions de l'onglet \"Mise à jour à partir de SUP\".",
"Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la <a href=\"https://wet-boew.github.io/wet-boew/docs/ref/data-ajax/data-ajax-fr.html\">page de documentation Data Ajax</a>."
]
Expand Down Expand Up @@ -1065,7 +1081,7 @@
},
{
"@id": "_:implement_pft_gcweb",
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
Expand Down Expand Up @@ -1103,7 +1119,7 @@
},
{
"@id": "_:implement_pft_upgrade_rap",
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"name": {
"en": "Upgrade from RAP",
"fr": "Mise à jour à partir de SUP"
Expand All @@ -1125,7 +1141,7 @@
},
{
"@id": "_:implement_pft_mws_author",
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"name": {
"en": "MWS users",
"fr": "Utilisateur SWG"
Expand All @@ -1151,7 +1167,7 @@
},
{
"@id": "_:implement_pft_contact",
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"name": {
"en": "Standard (WET-BOEW)",
"fr": "Standard (WET-BOEW)"
Expand Down Expand Up @@ -1221,7 +1237,7 @@
},
{
"@id": "_:implement_pft_contact_gcweb",
"iteration": "_:iteration_pft_1",
"iteration": "_:iteration_pft_2",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
Expand Down Expand Up @@ -1265,7 +1281,7 @@
"@id": "_:cs_pft_container",
"name": "Page feedback tool with AJAX",
"status": "stable",
"baseOnIteration": "_:iteration_pft_1",
"baseOnIteration": "_:iteration_pft_2",
"detectableBy": ".pagedetails .wb-disable-allow[data-ajax-replace*=feedback]",
"layout": [
"At the top-left column in the page details component",
Expand Down Expand Up @@ -1313,7 +1329,7 @@
"@id": "_:cs_pft_ajax",
"name": "Page feedback tool AJAX file",
"status": "stable",
"baseOnIteration": "_:iteration_pft_1",
"baseOnIteration": "_:iteration_pft_2",
"dependOnChangeSet": "_:cs_pft_container",
"detectableBy": "<div class=\"gc-pft\">",
"layout": [
Expand Down Expand Up @@ -1610,10 +1626,16 @@
],
"iteration": [
{
"@id": "_:iteration_pft_1",
"name": "Page feedback tool - Iteration 1",
"date": "2023-08",
"detectableBy": ".gc-pft",
"@id": "_:iteration_pft_2",
"name": "Page feedback tool - Iteration 2",
"date": "2025-01",
"detectableBy": "#gc-pft:has(.gc-pft-no p[role=\"status\"]:nth-of-type(2))",
"fixes": [
"AJAX fragment: Added <code>pageData</code> to the French variant",
"AJAX fragment: Changed <code>aria-live=\"polite\"</code> to <code>role=\"status\"</code> in \"Tell us why below:\".",
"AJAX fragment: Added PII scrub of the comment field."
],
"predecessor": "_:iteration_pft_1",
"assets": [
{
"@type": "source-code",
Expand Down Expand Up @@ -1659,6 +1681,56 @@
}
]
},
{
"@id": "_:iteration_pft_1",
"name": "Page feedback tool - Iteration 1",
"date": "2023-08",
"detectableBy": "#gc-pft",
"assets": [
{
"@type": "source-code",
"@language": "en",
"description": "Code sample",
"code": "<div class=\"wb-disable-allow\" \ndata-ajax-replace=\"assets/deprecated/page-feedback-v1-en.html\" \ndata-feedback-section=\"[Text defining the theme of your page]\" \ndata-feedback-theme=\"[Text defining the section where your page resides]\"></div>"
},
{
"@type": "source-code",
"@language": "en",
"description": "Code sample with contact link",
"code": "<div class=\"wb-disable-allow\" \ndata-ajax-replace=\"assets/deprecated/page-feedback-v1-en.html\" \ndata-feedback-section=\"[Text defining the theme of your page]\" \ndata-feedback-theme=\"[Text defining the section where your page resides]\"\ndata-feedback-link=\"[Contact link text]\"\ndata-feedback-url=\"[Contact link URL]\"></div>"
},
{
"@type": "source-code",
"@language": "en",
"description": "Ajaxed-in content",
"code": {
"@type": [ "rdf:HTML", "@id" ],
"@value": "assets/deprecated/page-feedback-v1-en.html"
}
},
{
"@type": "source-code",
"@language": "fr",
"description": "Exemple de code",
"code": "<div class=\"wb-disable-allow\" \ndata-ajax-replace=\"assets/page-feedback-fr.html\" \ndata-feedback-section=\"[Texte définissant le thème de votre page]\" \ndata-feedback-theme=\"[Texte définissant la section où réside votre page]\"\ndata-feedback-link=\"[Texte du lien de contact]\"\ndata-feedback-url=\"[URL du lien de contact]\"></div>"
},
{
"@type": "source-code",
"@language": "fr",
"description": "Exemple de code avec lien de contact",
"code": "<div class=\"wb-disable-allow\" \ndata-ajax-replace=\"assets/page-feedback-fr.html\" \ndata-feedback-section=\"[Texte définissant le thème de votre page]\" \ndata-feedback-theme=\"[Texte définissant la section où réside votre page]\"></div>"
},
{
"@type": "source-code",
"@language": "fr",
"description": "Contenu ajouté via Ajax",
"code": {
"@type": [ "rdf:HTML", "@id" ],
"@value": "assets/deprecated/page-feedback-v1-fr.html"
}
}
]
},
{
"@id": "_:iteration_rap_5",
"name": "Report a problem - Iteration 5",
Expand Down
12 changes: 12 additions & 0 deletions _data/templates.json
Original file line number Diff line number Diff line change
Expand Up @@ -1486,6 +1486,18 @@
"language": "fr",
"path": "topic-doc-fr.html"
}
],
"reports": [
{
"title": "Accessibility assessment #1 - GC topic template",
"language": "en",
"path": "reports/a11y-1-en.html"
},
{
"title": "Évaluation d'accessibilité #1 - Gabarits de page de sujet GC",
"language": "fr",
"path": "reports/a11y-1-fr.html"
}
]
},
"dependencies": {
Expand Down
84 changes: 84 additions & 0 deletions sites/feedback/assets/deprecated/page-feedback-v1-en.html
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move in demoted folder.

Suggestion: Rename the file name to indicate this is a content fragment. Like "ajax-pft-v1" or something similar.

Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<div id="gc-pft" class="row wb-disable-allow" data-wb-jsonmanager='{
"name": "gc-pft",
"extractor": [
{ "selector": "title", "path": "pageData/pageTitle" },
{ "selector": "html", "attr": "lang", "path": "pageData/language" },
{ "interface": "locationHref", "path": "pageData/submissionPage" },
{ "selector": "#wb-lng ul li:first-child a[lang]", "attr": "href", "path": "pageData/oppositelang" },
{ "selector": "[data-feedback-theme]", "attr": "data-feedback-theme", "path": "pageData/themeopt" },
{ "selector": "[data-feedback-section]", "attr": "data-feedback-section", "path": "pageData/sectionopt" },
{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageData/institutionopt" },
{ "selector": "[data-feedback-link]", "attr": "data-feedback-link", "path": "contact/link" },
{ "selector": "[data-feedback-url]", "attr": "data-feedback-url", "path": "contact/url" }
]
}'>
<div class="col-sm-10 col-md-9 col-lg-8">
<section class="well mrgn-bttm-0">
<h3 class="wb-inv">Give feedback about this page</h3>
<form action="https://feedback-retroaction.canada.ca/api/QueueProblemForm" method="post" class="wb-postback wb-disable-allow" data-wb-postback='{"success":".gc-pft-thnk"}'>
<div class="wb-disable-allow" data-wb-json='{
"url": "#[gc-pft]/pageData",
"mapping": [
{ "selector": "input", "attr": "name", "value": "/@id" },
{ "selector": "input", "attr": "value", "value": "/@value" }
]
}'>
<template>
<input type="hidden" name="" value="" />
</template>
</div>
<fieldset class="gc-pft-btns chkbxrdio-grp row row-no-gutters d-sm-flex flex-sm-wrap align-items-sm-center">
<legend class="col-xs-12 col-sm-7 nojs-col-sm-12 col-md-9 col-lg-8 text-center text-sm-left nojs-text-left mrgn-tp-sm pr-sm-3"><span class="field-name">Did you find what you were looking for?</span></legend>
<div class="col-xs-12 nojs-show">
<button name="helpful" value="Yes-Oui" class="btn btn-primary" aria-describedby="gc-pft-why">Yes</button>
</div>
<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4 text-center text-sm-right nojs-hide">
<button name="helpful" value="Yes-Oui" class="btn btn-primary">Yes</button>
<button class="btn btn-primary mrgn-lft-sm" data-wb-doaction='[
{"action":"removeClass","source":".gc-pft-no","class":"nojs-show"},
{"action":"addClass","source":".gc-pft-btns","class":"hide"}
]'>No</button>
</div>
</fieldset>
<div class="gc-pft-no nojs-show">
<p id="gc-pft-why" class="nojs-show mrgn-tp-lg mrgn-bttm-md">If not, tell us why below:</p>
<p class="nojs-hide wb-inv" aria-live="polite">Tell us why below:</p>
<div class="wb-disable-allow" data-wb-json='{
"url": "#[gc-pft]/contact",
"streamline": "true",
"mapping": [
{
"template": "[data-contact-template]",
"test": "fn:isLiteral",
"assess": "/url",
"mapping": [
{ "selector": "a", "type": "attr", "attr": "href", "value": "/url" },
{ "selector": "a", "value": "/link" }
]
}
]
}'>
<template data-contact-template>
<details>
<summary>Need urgent help with a problem? Contact us</summary>
<p class="mrgn-bttm-0 mrgn-tp-md fnt-nrml">
<a href="#"></a>
</p>
</details>
</template>
</div>
<div class="form-group">
<label id="gc-pft-prblm-label" for="gc-pft-prblm" class="mrgn-bttm-0"><span class="field-name">Please provide more details</span></label>
<p id="gc-pft-prblm-note" class="mrgn-bttm-sm"><small>You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details).</small></p>
<p id="gc-pft-prblm-instruction" class="fnt-nrml small">Maximum 300 characters</p>
<textarea id="gc-pft-prblm" aria-describedby="gc-pft-prblm-note gc-pft-prblm-instruction" name="details" class="form-control full-width" maxlength="300"></textarea>
</div>
<button name="helpful" value="No-Non" class="btn btn-primary">Submit</button>
</div>
</form>
<div class="gc-pft-thnk hide">
<p class="mrgn-tp-sm mrgn-bttm-0" role="status"><span class="glyphicon glyphicon-ok text-success mrgn-rght-sm" aria-hidden="true"></span> Thank you for your feedback.</p>
</div>
</section>
</div>
</div>
Loading
Loading