Report Wizard

[amritnagi]

Many thanks to @zacel who did the majority of these changes, this PR proposes using a breadcrumb wizard for the report/form.

• New breadcrumb/steps at the top for each page User's progress through form is updated as they go, and they can click on successfully completed steps to go back

• Required fields indicated with a *

• Toast notifications (bottom right corner) for validation errors

• Updated submit button

• New strings added:

  "Testing & Isolation": "",
  "Health": "",
  "Submit & Share": "",
  "Next": "",
  "Back": "",
  "Go to step": "",
  "Please select a age range": "",
  "Please select a Biological gender/Sex": "",
  "Please enter a valid postal code for your country": "",
  "Please select whether you have been in close contact with someone who tested positive for COVID-19": "",
  "Please select whether you have been tested for COVID-19": "",
  "Please select your isolation status": "",
  "Please add a start date for your symptoms": "",
  "Please select if you have a  preexisting health condition": "",
  "Please select your smoking habits": "",
  "Please select if you have experienced symptoms": "",
  "Have you experienced any symptoms?": "",

[michaelmcmillan]

Guys, this is insanely good! Blown away. Let's get this in!

[Kilian]

a11y:

Can go through the form with just keyboard: awesome!

Nits:

• All clickable things should be buttons or links. The breadcrumb dots should be buttons with a proper text, like "Go to step 1, demography and geography" (with class sr-only)
• Font size for the breadcrumbs might be a little too small, but that's not super important (can you bump it to 14?)
• We should consider placing the "back" button after the "next" button in terms of source order, so people tab to "next" first.
• The * in dark green doesn't have enough contrast (suggested: #006c7e), but just on its own it's not super clear. Can be solved with a title or sr-only span that says "Required field". I'm generally in favor of, when the majority of a form is required, stating that above the form and then highlighting the optional fields instead (we kind of already do that). Keeps the form cleaner too.
• Not sure if the toast is clear enough/accessible because I don't have enough experience there. In general I prefer to just use the browser notifications there, but this does look better.

[zacel]

a11y:

Can go through the form with just keyboard: awesome!

Nits:

• All clickable things should be buttons or links. The breadcrumb dots should be buttons with a proper text, like "Go to step 1, demography and geography" (with class sr-only)
• Font size for the breadcrumbs might be a little too small, but that's not super important (can you bump it to 14?)
• We should consider placing the "back" button after the "next" button in terms of source order, so people tab to "next" first.
• The * in dark green doesn't have enough contrast (suggested: #006c7e), but just on its own it's not super clear. Can be solved with a title or sr-only span that says "Required field". I'm generally in favor of, when the majority of a form is required, stating that above the form and then highlighting the optional fields instead (we kind of already do that). Keeps the form cleaner too.
• Not sure if the toast is clear enough/accessible because I don't have enough experience there. In general I prefer to just use the browser notifications there, but this does look better.

1)I've tested this and it seems to work putting the input just before the breadcrumb (due to styling conflicts I can't replace the breadcrumb div with a input type=button). Should the button (with display:none) be placed just before the breadcrumb div or inside of it? 2)✅increased breadcrumb text size 3)✅Placed back button after next and submit buttons in terms of source order 4)Simplest thing seems to be just removing the * on required fields for now so a best design can be found. They aren't in the current design and if it's unclear to anyone they are alerted. 5) Prior to using the toast we used the browser alert() it's easy to go back to this would that be the most accessible option even if it's a little less stylish?

[Kilian]

1 Instead of the div you should use a <button /> element, You can style them exactly the same (if not, replace them in this branch and I'll make the CSS changes)

4 Sounds good to me!

5 This is definitely nicer than an alert() so let's keep this. The trick is making sure it gets the appropriate focus (and that the focus can go back to the form). I'll have a look at it later.

[fossecode]

If the texts are ok, should we start gathering translations?

[adriaandotcom]

@fossecode maybe we should wait for https://github.com/BustByte/coronastatus/pull/537 to be merged before asking translations?

[fossecode]

@fossecode maybe we should wait for #537 to be merged before asking translations?

Yes, I just have to add two more countries, look over it again and then it should be ready to merge. Will do it later tonight or tomorrow morning.

[fossecode]

I think we are ready to start gathering translations :)

[adriaandotcom]

NL Dutch 🇳🇱

"Testing & Isolation": "Testen & isolatie",
"Health": "Gezondheid",
"Submit & Share": "Sla op & deel",
"Next": "Volgende",
"Back": "Vorige",
"Go to step": "Ga naar stap",
"Please select a age range": "Selecteer je leeftijdsgroep",
"Please select a Biological gender/Sex": "Vul een geslacht in",
"Please enter a valid postal code for your country": "Vul een geldige postcode in",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Vul in of je in contact bent geweest met iemand die positief voor corona is getest",
"Please select whether you have been tested for COVID-19": "Vul in of je bent getest op het coronavirus",
"Please select your isolation status": "Vul je isolatie status in",
"Please add a start date for your symptoms": "Vul een start datum in voor je symptomen",
"Please select if you have a  preexisting health condition": "Vul in of je bestaande gezondheidsproblemen hebt",
"Please select your smoking habits": "Vul je rookgedrag in",
"Please select if you have experienced symptoms": "Vul in of je symptomen hebt gehad",
"Have you experienced any symptoms?": "Heb je symptomen gehad",

[fossecode]

Norwegian 🇳🇴 (feels like the voting on Eurovision lol)

"Testing & Isolation": "Testing & Karantene",
"Health": "Helse",
"Submit & Share": "Send inn",
"Next": "Neste",
"Back": "Tilbake",
"Go to step": "Gå til steg",
"Please select a age range": "Vennligst velg alder",
"Please select a Biological gender/Sex": "Vennligst velg biologisk kjønn",
"Please enter a valid postal code for your country": "Vennligst fyll inn et gyldig postnummer",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Vennligst velg om du har vært i nærkontakt med noen som har testet positivt på COVID-19",
"Please select whether you have been tested for COVID-19": "Vennligst velg om du har blitt testet for COVID-19",
"Please select your isolation status": "Vennligst spesifiser om du er i karantene",
"Please add a start date for your symptoms": "Vennligst spesifiser når symptomene startet",
"Please select if you have a  preexisting health condition": "Vennligst spesifiser om du har andre sykdommer",
"Please select your smoking habits": "Vennligst spesifiser dine røykevaner",
"Please select if you have experienced symptoms": "Vennligst spesifiser om du opplever symptomer",
"Have you experienced any symptoms?": "Har du opplevd noen symptomer?",

[fossecode]

Remember to merge in the latest changes from the upstream before adding the translations, so that you get all the latest locale files.

[fossecode]

Just tested it out locally, feels very smooooth, much better than before 🙌💯🥇

[zacel]

en-US 🇺🇸

"Testing & Isolation": "Testing & Isolation",
"Health": "Health",
"Submit & Share": "Submit & Share",
"Next": "Next",
"Back": "Back",
"Go to step": "Go to step",
"Please select a age range": "Please select a age range",
"Please select a Biological gender/Sex": "Please select a Biological gender/Sex",
"Please enter a valid postal code for your country": "Please enter a valid postal/zip code for your country",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Please select whether you have been in close contact with someone who tested positive for COVID-19",
"Please select whether you have been tested for COVID-19": "Please select whether you have been tested for COVID-19",
"Please select your isolation status": "Please select your isolation status",
"Please add a start date for your symptoms": "Please add a start date for your symptoms",
"Please select if you have a  preexisting health condition": "Please select whether you have a  preexisting health condition",
"Please select your smoking habits": "Please select your smoking habits",
"Please select if you have experienced symptoms": "Please select if you have experienced symptoms",
"Have you experienced any symptoms?": "Have you experienced any symptoms?"

[hgeorgilas]

Greek translations el-GR :greece:

"Testing & Isolation": "Διαγνώσεις & Απομόνωση",
"Health": "Υγεία",
"Submit & Share": "Υποβολή",
"Next": "Επόμενο",
"Back": "Πίσω",
"Go to step": "Πηγαίνετε στο βήμα",
"Please select a age range": "Επιλέξτε ένα εύρος ηλικιών",
"Please select a Biological gender/Sex": "Επιλέξτε το βιολογικό σας φύλο",
"Please enter a valid postal code for your country": "Εισάγετε έναν έγκυρο ταχυδρομικό κώδικα για τη χώρα σας",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Επιλέξτε εάν έχετε έρθει σε στενή επαφή με κάποιον που έχει διαγνωστεί θετικός στον ιό COVID-19",
"Please select whether you have been tested for COVID-19": "Επιλέξτε αν έχετε υποβληθεί σε τεστ ανίχνευσης του ιού COVID-19",
"Please select your isolation status": "Επιλέξτε την κατάσταση απομόνωσης",
"Please add a start date for your symptoms": "Προσθέστε την ημερομηνία έναρξης των συμπτωμάτων σας",
"Please select if you have a  preexisting health condition": "Επιλέξτε εάν έχετε προϋπάρχουσα κατάσταση υγείας",
"Please select your smoking habits": "Επιλέξτε τις συνήθειες καπνίσματος σας",
"Please select if you have experienced symptoms": "Επιλέξτε εάν έχετε παρουσιάσει συμπτώματα",
"Have you experienced any symptoms?": "Έχετε εκδηλώσει οποιoδήποτε σύμπτωμα;"

Also typo in "Please select a age range": translation key. Should be "Please select an age range":

[tarasmatsyk]

🇺🇦 version

"Testing & Isolation": "Тестуються і на карантині",
"Health": "Здоров'я",
"Submit & Share": "Відправити і поділитися",
"Next": "Далі",
"Back": "Назад",
"Go to step": "Перейти до кроку",
"Please select a age range": "Виберіть вікову групу",
"Please select a Biological gender/Sex": "Виберіть стать",
"Please enter a valid postal code for your country": "Введіть поштовий індекс",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Ви були у контакті з кимось, чий тест на COVID-19 був позитивний",
"Please select whether you have been tested for COVID-19": "Ви тестувалися на COVID-19?",
"Please select your isolation status": "Виберіть ваш статус",
"Please add a start date for your symptoms": "Коли почалися симптоми",
"Please select if you have a  preexisting health condition": "У вас є наступні проблеми із здоров"ям",
"Please select your smoking habits": "Шкідливі звички",
"Please select if you have experienced symptoms": "Позначте, якщо у вас були симптоми",
"Have you experienced any symptoms?": "У вас були якісь із зазначених симпотім",

[julianbetancourt]

this serves for all es-XX locales:

"Testing & Isolation": "Testeo y aislamiento",
"Health": "Salud",
"Submit & Share": "Enviar y compartir",
"Next": "Siguiente",
"Back": "Anterior",
"Go to step": "Ir al paso",
"Please select a age range": "Seleccione un rango de de edad",
"Please select a Biological gender/Sex": "Seleccione un sexo",
"Please enter a valid postal code for your country": "Introduzca un código postal válido",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Seleccione si ha estado en contacto cercano con alguien que dio positivo por COVID-19",
"Please select whether you have been tested for COVID-19": "Seleccione si se le ha realizado la prueba del COVID-19",
"Please select your isolation status": "Seleccione en que estado de aislamiento se encuentra",
"Please add a start date for your symptoms": "Seleccione la fecha inicial de sus síntomas",
"Please select if you have a  preexisting health condition": "Seleccione si tiene condiciones médicas pre existentes",
"Please select your smoking habits": "Seleccione sus hábitos de consumo de cigarrillo",
"Please select if you have experienced symptoms": "Seleccione si ha experimentado síntomas",
"Have you experienced any symptoms?": "Ha experimentado algún síntoma?",

[jkspn]

🇵🇭 This is for en-PH locale

"Testing & Isolation": "Testing at Quarantine",
"Health": "Health",
"Submit & Share": "I-Submit at I-Share",
"Next": "Next",
"Back": "Back",
"Go to step": "Pumunta sa step",
"Please select a age range": "Piliin ang iyong edad",
"Please select a Biological gender/Sex": "Piliin ang inyong kasarian",
"Please enter a valid postal code for your country": "Maglagay ng valid na ZIP Code",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Piliin kung nagkaroon ka ba ng direct-contact sa pasyenteng positibo sa COVID-19",
"Please select whether you have been tested for COVID-19": "Piliin kung nakapagpatest ka ba para sa COVID-19",
"Please select your isolation status": "Piliin kung ano ang status ng iyong Quarantine",
"Please add a start date for your symptoms": "Ibigay ang petsa kung kailan nagsimula ang iyong sintomas",
"Please select if you have a  preexisting health condition": "Piliin kung mayroon ka bang pre-existing health condition",
"Please select your smoking habits": "Piliin kung naninigarilyo ka ba",
"Please select if you have experienced symptoms": "Piliin kung nakaranas ka ba ng sintomas",
"Have you experienced any symptoms?": "May naranasan ka bang mga sintomas?",

[trkoch]

Looks awesome!

However I cannot proceed past the first step with toast/notification "Please enter a valid postal code for your country" with a non-norwegian postal code. Also tried to reset the form. Probably related, in the console I receive an "Uncaught type error", related to var flagButton = document.getElementById('flag-locale-button' being undefined. Tests pass which raises doubts about coverage.

I'm probably missing something here?

[trkoch]

🇩🇪 de-DE

"Testing & Isolation": "Test & Isolation",
"Health": "Erkrankungen",
"Submit & Share": "Abschließen & Teilen",
"Next": "Weiter",
"Back": "Zurück",
"Go to step": "Gehe zu",
"Please select a age range": "Wähle dein Alter",
"Please select a Biological gender/Sex": "Wähle dein Geschlecht",
"Please enter a valid postal code for your country": "Bitte gebe eine gültige PLZ ein",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Bitte wähle ob du engen Kontakt zu jemanden hattest, der positiv auf COVID-19 getestet wurde",
"Please select whether you have been tested for COVID-19": "Bitte wähle ob du positiv auf COVID-19 getestet wurden",
"Please select your isolation status": "Bitte wähle ob du dich in Isolation befindest",
"Please add a start date for your symptoms": "Bitte ergänze wann die Symptome begannen",
"Please select if you have a  preexisting health condition": "Bitte wähle ob du eine Vorerkrankung hast",
"Please select your smoking habits": "Bitte nenne deine Rauchgewohnheiten",
"Please select if you have experienced symptoms": "Bitte wähle ob du Symptome beobachtet hast",
"Have you experienced any symptoms?": "Hast du Symptome beobachtet?",

"Are you from Norway?" probably needs localization as well?

[zacel]

Looks awesome!

However I cannot proceed past the first step with toast/notification "Please enter a valid postal code for your country" with a non-norwegian postal code. Also tried to reset the form. Probably related, in the console I receive an "Uncaught type error", related to var flagButton = document.getElementById('flag-locale-button' being undefined. Tests pass which raises doubts about coverage.

I'm probably missing something here?

This is fixed in the commit just above here. The problem was that this fork had become outdated in it's config schema. After updating the us config is correct which was the cause of the issue (old one was incorrectly set to accept only 4 digit zip codes when the us uses 5 digit ones).

The error related to flag-locale-button is unrelated and caused by some unused code in app/views/pages/report.ejs. I haven't removed it because it looks like it's the first stages of adding the option to change languages and it came from the bustByte master repo when I fetched the commits. The error is unrelated to the Report Wizard pull request.

Thank you all for the translations we are getting much closer!

[trkoch]

LGTM now.

[fossecode]

Do we have an overview of which translations we are missing now?

[zacel]

We have:

NL
EN
DE
en-PH
es-XX
ua
el-GR
no

we need

bd
cs-CZ
dk
fr-FR
id-ID
it
ms-MY
ne
pt-BR
pt-PT
ro-RO
se
sk
tr
zh-MY

Do we have an overview of which translations we are missing now?

I think this is a complete list (we can use existing en and es ones for all of the locales that use those languages

[MadTed]

🇩🇪 de-DE

"Testing & Isolation": "Test & Isolation",
"Health": "Erkrankungen",
"Submit & Share": "Abschließen & Teilen",
"Next": "Weiter",
"Back": "Zurück",
"Go to step": "Gehe zu",
"Please select a age range": "Wähle dein Alter",
"Please select a Biological gender/Sex": "Wähle dein Geschlecht",
"Please enter a valid postal code for your country": "Bitte gebe eine gültige PLZ ein",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Bitte wähle ob du engen Kontakt zu jemanden hattest, der positiv auf COVID-19 getestet wurde",
"Please select whether you have been tested for COVID-19": "Bitte wähle ob du positiv auf COVID-19 getestet wurden",
"Please select your isolation status": "Bitte wähle ob du dich in Isolation befindest",
"Please add a start date for your symptoms": "Bitte ergänze wann die Symptome begannen",
"Please select if you have a  preexisting health condition": "Bitte wähle ob du eine Vorerkrankung hast",
"Please select your smoking habits": "Bitte nenne deine Rauchgewohnheiten",
"Please select if you have experienced symptoms": "Bitte wähle ob du Symptome beobachtet hast",
"Have you experienced any symptoms?": "Hast du Symptome beobachtet?",

"Are you from Norway?" probably needs localization as well?

some small improvements for being kind

🇩🇪 de-DE

"Testing & Isolation": "Testen & Isolation",
"Health": "Erkrankungen",
"Submit & Share": "Abschließen & Teilen",
"Next": "Weiter",
"Back": "Zurück",
"Go to step": "Gehe zu",
"Please select a age range": "Wähle Dein Alter",
"Please select a Biological gender/Sex": "Wähle Dein Geschlecht",
"Please enter a valid postal code for your country": "Bitte gebe eine gültige PLZ ein",
"Please select whether you have been in close contact with someone who tested positive for COVID-19": "Bitte wähle ob Du engen Kontakt zu jemanden hattest, der positiv auf COVID-19 getestet wurde",
"Please select whether you have been tested for COVID-19": "Bitte wähle ob Du positiv auf COVID-19 getestet wurden",
"Please select your isolation status": "Bitte wähle ob Du dich in Isolation befindest",
"Please add a start date for your symptoms": "Bitte ergänze wann die Symptome begannen",
"Please select if you have a  preexisting health condition": "Bitte wähle ob Du eine Vorerkrankung hast",
"Please select your smoking habits": "Bitte nenne Deine Rauchgewohnheiten",
"Please select if you have experienced symptoms": "Bitte wähle ob Du Symptome beobachtet hast",
"Have you experienced any symptoms?": "Hast Du Symptome beobachtet?",