hasadna/reportit-user

ReportitUser

This project was generated with Angular CLI version 7.1.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

reportit-user's Issues

more info page: swtich close with a back arrow

3 different users missed the fact they can close (or go back) to the homepage.

Let's switch the 'X' on the top right corner with a back (i.e. right) arrow + textual label: "חזרה לעמוד הדיווח"

---

QA reoprt (Tama), which I was able to see also when Saroj and Mary tried to use the system:

"באותו הדף- לקח לי כמה רגעים להבין שאני צריכה ללחוץ על הx שמימין כדי לחזור לדף הגשת התלונה. אולי במקום x צריך להיות שם כפתור״ חזרה לעמוד דיווח...״
"

Labels for instructions [0.5h]

הגדרת פקדים תיקניים

• רכיב לדיווח על אירוע אפליה או גזענות – להגדיר ככפתור עם תווית מתאימה :שלחיצה עליו תוביל לפתיחת אזור הדיווח

  a. set as a <button> element
  b. set label text: "לוחצים כאן ומדווחים על ארוע אפליה או גזענות"

• רכיב למידע נוסף – להגדיר כקישור סטנדרטי:

  set as <a> element instead of <span>

3.3.2 Labels or Instructions

about page - add links to logos

#15 follow-up:

add the following links to logos on the about page (all links should be opened on a new/separate tab :
https://hasadna.org.il
https://www.acri.org.il/
https://europa.eu/european-union/about-eu_en

autofocus on input on simple questions

when a simple (one line) question pop up, user should be able to start typing in, without clicking the input field.

see the demo

fix visual/ux bug: multiline input field covers chat section

(it covers the last message)

add auto scrolloing when new message/question appears

after user types in an answer, a new respond/question is being displayed, but the new message is hidden beneath the window border:

we need an autoscrolling mechanism.

When the user scrolls down, this is what is happening:

scripts translation process

related to #25 #26 #28

• offer the preferred method to translate the scripts into other languages, depending on the chosen UI language (#29)

• offer the preferred method to translate the static ui texts to other languages.

console.log error when editing field on agent view

When editing field content (event description), console.log shows error (status 500). The Strapi saves the new value.

---

After finishing editing the field value:

Hint:
I could reproduce this error only when trying to edit the field following the 3rd question (in the police scenario):

More Info page accessibiliity [2h]

• בדרך כלל מומלץ להגדיר מידע המופיע בפופאפ כחלון צף כאשר:
• מוקד המקלדת ינחת על הפקד הראשון קישור או כפתור – במקרה זה על הקישור חזרה.
• את הקישור חזרה ניתן להגדיר ככפתור סגירה
• מומלץ מאוד להוסיף אפשרות יציאה מחלון הפופאפ באמצעות מקש ESC
• ניווט מקלדת באמצעות מקש ה TAB או מקשי החיצים יהיה רק בתוך חלון הפופאפ ולא יגלוש לרכיבים מאחור
• לספק לתמונות הלוגו טקסט חלופי מתאים כמו לדף הבית של הסדנא לידע ציבורי

ARIA: dialog role - Accessibility | MDN

add two steps question: selector + input

i.e.:

As long as the user did not submit the contact details, they can change/switch the previous selections, and the follow-up question will be changed as well.

fix textual input fields behavior when switching tabs/windows

(relevant for reportit-agent as well)

We got this feedback from two different testers: when the user is prompted for a single line/multiline input, types in something and leaves the window/tab - the unfinished text is submitted automatically when making the window/tab active again.

one user also reported that switching out/in the browser made the typed text to disappear (and she had to type it all again).

---

הייתי באמצע כתיבה תיאור המקרה, יצאתי מהחלון לרגע, שחזרתי אל החלון, התיאור נעלם. תוכל בבקשה לבדוק?

add project intro text

(link)
Text:

נתקלתם בגזענות או הפליה? רוצים לדווח עליה או לדעת מה אפשר לעשות? 

שלחו לנו את פרטי המקרה 24/7 ונחזור אליכם עם תשובות והמלצות לפעולה

התנהגות גזענית ומפלה היא תופעה נפוצה בחברה הישראלית.
כדי למגר אותה חשוב שלא נשתוק ולא נוותר כשאנחנו נתקלים במקרים כאלה
.

fix intro typo

בדף הראשון בתחום מגיש תלונה כתוב ״נתקלתם בגזענות או הפליה? רוצים לדווח עליה או לדעת מה אפשר לעשות?״ אפליה או הפליה?. באותו דף צריך להוסיף נקודה בסוף המשפט ״שלחו לנו את פרטי המקרה 24/7 ונחזור אליכם עם תשובות והמלצות לפעולה״.

unify script sources (reportit-user + reportit-agent)

prevent scripts duplication, unify the source location both parts

Title per page [0.5h]

כאשר משתמש מגיע לעמוד הראשי, עליו לדעת את שם העמוד והשיוך המוסדי לכן, לכל דף אינטרנט צריך שתהייה כותרת מייצגת ב Page Title למשל מוקד סיוע לנפגעי גזענות ואפליה ממסדית הסדנא לידע ציבורי שם העמוד יוצג בפס הכותרת בדפדפן וגם יוקרא למשתמשי טכנולוגיות מסייעות

2.4.2 Page Titled A

unexpected user input step

open questions: add 'allowEmpty' flag

some of the questions (not all of them) should enable the user to submit without typing in ('anonymous' for the name is the clearest examples, but we already have two other cases in which currently we have to ask a yes/no question just to confirm in advance the user has some info to type in:

• האם את/ה יודעים את שם חברת האבטחה?
• האם את/ה יודעים את שם המאבטח/ת?

we should minimize/subtract these steps, without giving up on the standard content validation assumption for most of the question

notice

this issue is relevant for the reportit-agent part as well.

alternative solution:

handle the split method when an empty string is submitted into a this.content.setTextArea():

point to think of: multiple contact details per method

how should we behave when a user clicks on phone/email/facebook/WhatsApp as a contact method for the 2nd time?

• add another record for alternative detail?
• overwrite previous details (current behavior)
• ask/notify the user what should happen

Chat area: add aria-live labels [2h]

כאשר משתמש בקורא מסך מגיע לאזור להזנת נתונים ומוצג לו טקסט עם השאלה שעליה הוא צריך לענות, השאלה צריכה להיות מוקראת שיטות מקובלות להנגשת רכיבי צ'ט הם שימוש ב:

1. • aria-live regions בכדי לספק למשתמש בקורא מסך התראות על שינויים דינאמיים בשיח עם הבוט
   • חשוב להקפיד על שימוש נכון ב aria-live=”polite בכדי למנוע הפרעות בזמן שמשתמש בקורא מסך מקליד
2. אם השאלה כוללת פקדים למענה כגון בחירת אפשרות שליחה לדוא"ל או למספר טלפון, אז מומלץ שמוקד המקלדת ינחת על הפקד הראשון – למשל כפתור שלח בדוא"ל ואת נוסח ההודעה ניתן יהיה לקשר באמצעות aria-describedby. המשתמש יוכל לעבור באמצעות ניווט מקלדת לפקדים הבאים ככל שישנם.
3. לכפתור ה"שלח" יש להוסיף תווית כך שתזוהה לקורא מסך
4. בכל פעם שתופיע הודעה מהמערכת, המשתמש יקבל התראה והיא תוקרא

ARIA19: Using ARIA role=alert or Live Regions to Identify Errors

ARIA live regions - Accessibility | MDN

How To Make Live Chat Accessible - Maxability

omit 3 loading points visualization before open question to user

this issue is relevant for both the user and agent side, but more crucial for user side:

when the script shows an open (not a select) question, 0.5secs of extra delayed is added for showing the animation of 3 dots, of loading, before showing the input field. Since the input is part of the displayed question, there is no point for this extra delay and animation.

@akariv hope it is clear enough, feel free to give me a call if a further explaination is needed.

add a multi-selection questions

(relevant also for the reportit-agent repo).

In some cases, we need the ability to let the user choose a couple of options + free text ('other').

For Example:

על מי התלונה
1.      רשות מקומית
2.     צוות  המוסד החינוכי
3.      צוות החוגים
4.     תלמידים או סטודנטים אחרים
5. 	אחר

אם בחרו אחר: פרטו:
_______

(Consider connecting the 'other' part with #10)

enable sending different reports with the same email address

pilot users reported they cannot deliver reports using the same email as contact methods:

(the screenshot was taken by user)

Two possible solutions:

1. If we move out of HubSpot, just to make sure the contact details fields are not restricted as unique.
2. If we decide to stay within HubSpot, we will need to create a new dummy field for user email (and ignore the standard field).

enable two reports from the same contact

When a פונה tries to upload a complaint, and his/her contact details already exists in the DB, the system fails with 409 error code and the process freezes:

easier scripts editor

Following our meeting on March 29 2019:

• 5 hours for explore and get familiar with the porject and required output object
• 5 hours define and plan strategy
• 10 hours for initial language defintions (Noam will provide lists of actions and methods)
• 5 to develop initials validation mechnism

edit field from agent display: keep field height or add scroll bar

(notice: this comment is relevant for all right column fields)

After I click the edit icon for a long field, the edit field height is just 2-3 rows, with no visual hint for the remaining text beneath the visible part.

Best option would be to keep the full content visible after clicking the edit icon. 2nd option would be adding a scroll bar for the edit field, so user can tell they can scroll down to see/edit the rest of the text)

---

don't hold user while updating DB

currently, every time we save data to the DB the user waits for the next question. That can be problematic with a slow internet connection, or in case of a glitch in the communication.

usre regret uploading file, or chose the wrong file- enable to cancel

real user feedback:

אני מניחה שתמיד נכון שתהיה אפשרות למחיקת קובץ מסיבות שונות: טעות בהעלאת הקובץ, חרטה שמא לא כדאי לשתף את המסמך בשלב כה מוקדם של הגשת התלונה וכדומה.
מחיקת קובץ: אני מניחה שתמיד נכון שתהיה אפשרות למחיקת קובץ מסיבות שונות: טעות בהעלאת הקובץ, חרטה שמא לא כדאי לשתף את המסמך בשלב כה מוקדם של הגשת התלונה וכדומה.

Find a way to to delete Documents on DB

add keyboard navigation mechanism (focus style) and styled form control [2h]

משתמש מקלדת ללא קורא מסך, שאינו מתפעל עכבר בשל מגבלה מוטורית. צריך להבין היכן הוא נמצא בכל רגע נתון בממשק כשהוא מנווט עם מקש ה TAB כאשר מרכיב אינטראקטיבי כגון קישור ופקדי טפסים מקוונים מקבל פוקוס מקלדת, עליו לקבל אפקט ויזואלי שונה ביחס לשאר המרכיבים שאינם במוקד המקלדת באתר, לא ניתן לנווט בין כל האלמנטים מכיוון שחלקם אינם מוגדרים כך שטכנולוגיה מסייעת תוכל לנווט דרכם באמצעות מקש ה TAB. לכן, לאחר ההנגשה יש לוודא כי אלמנטים אלה מקבלים פוקוס ויזואלי למקלד

2.4.7 Focus Visible AA
a11y_styled_form_controls

field placeholder not translated

handle communication/delivery errors

related to #2:

In addition to the user input validation, we should add two mechanisms to increase and ensure the flow:

• User: prevent the scenario from freezing (see screenshot below)- the script should move on. Let's inform the user that the last answer was not sent, and continue to the next question.
• Mokdan: send a notification to the sysadmin/mokdan when a submission fails. The notification should include the submitted data + the request + respond.

add user input validators

1. email address
2. phone number (to be applied over the whatsapp input as well): ddd-dd-ddddddd / dd-ddddddd / ddd-ddddddd.
3. date
4. time

end of bot - one extra input + visual effect to illustarte end of chat

After the last bot message, user is asked to type something:

while this is the last line of the relevant script (script.yaml):

an extra request from the real world pilot is:

- לכל התסריטים – אחרי מסירת כל המידע- המסך עם המידע צריך להיעלם ושיופיע "תודה שפנית, נחזור אליך....". אחרת לא ברור שהסתיימה הפנייה ואכן המידע נשלח

connect script editor to the porject domain

i.e. admin.equality.org.il/editor or editor.equality.org.il

Font/Background miminum constrast [0.5h]

The following item does not meet the requirement:

1. Change the "more info" label color to #6B6B6B
2. Change the button background color to #1E854E

Contrast Minimum AA

יחס ניגוד מינימום בין צבע טקסט לצבע רקע צריך לעמוד על
• 1:4.5 בטקסט רגיל
• 1:3 כשהטקסט הוא 14 נקודות מודגש ומעלה או 18 נקודות לא מודגש ומעלה


כולל טקסט וקישורים לרבות טקסט או קישורים על גבי תמונות כולל גם ניגוד מינימום כשמוקד מקלדת מגיע לקישור או לכפתור ומתקבל אפקט ויזואלי שונה וכאשר מרחפים עם עכבר על קישור או כפתור וכתוצאה מכך מתקבל אפקט ויזואלי שונה




ניתן להסתייע בתוסף לדפדפנים שנקרא WAVE Web Accessibility Evaluation Tool לזהות באמצעות כלים אוטומטיים ובניהם בעיות יחס ניגוד מינימום ניתן להסתייע בכלי שנקרא Wave Color Contrast Checker לבחירת צבעי ניגוד שעומדים בדרישות התקן

fix returning question at the end of the thread

add moreinfo & privacy definitions text

Show the Approved Text when Clicking the 'more info'

Shoud show the following text in the pop-up:

(link)

or in the right column of the desktop layout

select questions are waiting for keyboard input

this report is relevant for both user+agent:

It might be related to the new script editor integration, therefore putting @oferb for cc.

translate and display user UI in a chosen language

This issue assumes a single script for user + agent (#26) with a translation to a non-Hebrew language (#27).

Now we need to enable the user:

1. choose the desired language
2. go through the intake
3. save the language and integrate the follow-up conversation (agent side) with the selected language.

Improve About page text

define a primary language [0.5h]

השפה הראשית באתר הזה מוגדרת לאנגלית יש להגדיר לעברית

3.1.1 Language of Page A

add Date input method

the method will be used both on reportit-user and reportiit-agent for entering event (start/end) date.

go live

(this is a common issue for user+agent parts, after applying #26 ):

1. connect the user to the domain.
2. connect admin to the domain (either through admin.domain or via domain/admin).
3. connect the
4. replace user (angular) default favicon with the attached png
5. replace agent (angular) default favicon with attached png
6. add labels to the agent login page fields (username/password)