Skip to content

Commit

Permalink
Page feedback tool: Polish AJAX fragments (FR pageData, role="status")
Browse files Browse the repository at this point in the history
The AJAX fragments had two minor flaws:
* The English fragment contained pageData references that were missing from the French variant. That difference caused a hidden input named "contact" (with a JSON string as its value) to be injected into French feedback widgets. Although it didn't cause any other issues (data-feedback-link and data-feedback-url still worked fine in practice).
* The no button's invisible transition message in JS mode is technically a status message, but wasn't coded as such (was using aria-live="polite" as opposed to role="status").

This resolves the flaws by:
* Adding pageData references throughout the French fragment (same spots as English) to eliminate the hidden "contact" input.
* Replacing aria-live="polite" with role="status" in the no button's transition message:
  * role="status" is a more formal way of denoting status messages, implicitly sets aria-live="polite" + aria-atomic="true" and is already in use for the widget's thank you message.
  • Loading branch information
EricDunsworth committed Jul 16, 2024
1 parent 10fb183 commit 0d60cf1
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
2 changes: 1 addition & 1 deletion sites/feedback/assets/page-feedback-en.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h3 class="wb-inv">Give feedback about this page</h3>
</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>
<p class="nojs-hide wb-inv" role="status">Tell us why below:</p>
<div class="wb-disable-allow" data-wb-json='{
"url": "#[gc-pft]/contact",
"streamline": "true",
Expand Down
18 changes: 9 additions & 9 deletions sites/feedback/assets/page-feedback-fr.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<div id="gc-pft" class="row wb-disable-allow" data-wb-jsonmanager='{
"name": "gc-pft",
"extractor": [
{ "selector": "title", "path": "pageTitle" },
{ "selector": "html", "attr": "lang", "path": "language" },
{ "interface": "locationHref", "path": "submissionPage" },
{ "selector": "#wb-lng ul li:first-child a[lang]", "attr": "href", "path": "oppositelang" },
{ "selector": "[data-feedback-theme]", "attr": "data-feedback-theme", "path": "themeopt" },
{ "selector": "[data-feedback-section]", "attr": "data-feedback-section", "path": "sectionopt" },
{ "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "institutionopt" },
{ "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" }
]
Expand All @@ -17,7 +17,7 @@
<h3 class="wb-inv">Donnez votre rétroaction sur cette 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]",
"url": "#[gc-pft]/pageData",
"mapping": [
{ "selector": "input", "attr": "name", "value": "/@id" },
{ "selector": "input", "attr": "value", "value": "/@value" }
Expand All @@ -42,7 +42,7 @@ <h3 class="wb-inv">Donnez votre rétroaction sur cette page</h3>
</fieldset>
<div class="gc-pft-no nojs-show">
<p id="gc-pft-why" class="nojs-show mrgn-tp-lg mrgn-bttm-md">Sinon, dites nous pourquoi ci-dessous&nbsp;:</p>
<p class="nojs-hide wb-inv" aria-live="polite">Dites nous pourquoi ci-dessous&nbsp;:</p>
<p class="nojs-hide wb-inv" role="status">Dites nous pourquoi ci-dessous&nbsp;:</p>
<div class="wb-disable-allow" data-wb-json='{
"url": "#[gc-pft]/contact",
"streamline": "true",
Expand Down

0 comments on commit 0d60cf1

Please sign in to comment.