Authoring Tool - Audience step

[ecureuill]

:warning: Wire-frames and live-demos are just for example purpose. They don't meet entirely this requirement.

:pencil2: Pencil icon marks specs that are waiting for definition

---

Index

1. User Input
2. Usability
3. Validations
4. Error Prefention
5. Feedback
   1. Labels
   2. Instructions
   3. Help button
   4. Error Identification

6. Wire frames

   live-demo (Source)

General

• [x] Separate information and structure from presentation (use css files, do not style inline)
• [x] Responsive design

User input

• [x] Fields and components
• AudienceIntended
  • component: checkbox list.
  • options:
    • Teachers
    • StudInfo
    • StudPG
    • StudUnd
    • StudHS
    • StudMS
    • StudES
    • Kids
  • SelectAll_Audience button
  • Add_OpenAudience: user can inform different audience
    • Save_AddOpenAudience
    • Cancel_AddOpenAudience
  • Edit_OpenAudience
    • Save_EdiOpenAudience
    • Cancel_EdiOpenAudience
  • Delete_OpenAudience
• InclusionGoal
  • component: checkbox list. option:
    • Cognitive
    • Elderly
    • Hearing
    • Language
    • Motor
    • Speech
    • Vestibular
    • Visual
  • SelectAll_InclusionGol button

Usability

• [x] meet #50
• [x] Single-column layout
• [x] Match fields to the type and size of the input.
• [x] Replace * for "'(required)". It could be achieved by css.
  • [x] Alternatively, include a statement in the beginning of the page that "*" is used for required fields

Validations

• [x] Do not allow add an OpenAudience that already exist in the list of pre-existent audiences

• [x] Do not allow add an OpenAudience that already exist in the list of custom audiences added by use

• [x] Do not allow add more than 5 OpenAudience

• [ ] Do not allow add audience that is a synonym? For instance junior school, primary school are the same as elementary school;

Error Prevention

• [x] OpenAudience: do not allow user add an empty option (button do not enabled before user enter a value)

• [x] OpenAudience: button "add" are disabled after 5 OpenAudience are added

• If user tries to delete an OpenAudience, system should ask for confirmation

  • [x] Use a alertdialog #51
  • title: Deleting audience
  • message: You requested to delete [OpenAudience]. Do you want to proceed?
  • No
  • Yes (emphasis)

Feedback

• [x] #46 Use the AccessibilityHelp component
  • inline instructions
  • help

Labels

If the used component do not have a native visible label, use aria-label or aria-labelledby.

<-- custom Checkbox example -->
<h5 id="id-group-label">Sandwich Condiments</h5>
 <div role="group" aria-labelledby="id-group-label">
     <ul class="checkboxes">
            <li><div role="checkbox" aria-checked="true" tabindex="0" class="">Lettuce</div></li>
            <li><div role="checkbox" aria-checked="true" tabindex="0">Tomato</div></li>
            <li><div role="checkbox" aria-checked="false" tabindex="0" class="">Mustard</div></li>
            <li><div role="checkbox" aria-checked="true" tabindex="0" class="">Sprouts</div></li>
      </ul>
 </div>

• [x] Labels

field	visible label	aria-label or aria-labelledby
AudienceIntended	n/a	Intended audience
SelectAllAudience	Select All	n/a
Add_OpenAudience	Add other audience	n/a
Save_AddOpenAudience	[icon]	Save
Cancel_AddOpenAudience	[icon]	Cancel
Edit_OpenAudience	[icon]	Edit
Save_EditOpenAudience	[icon]	Save
Cancel_EditOpenAudience	[icon]	Cancel
Delete_OpenAudience	[icon]	Delete
InclusionGol	n/a	Intended inclusion
SelectAllInclusionGol	Select All	n/a
Teachers	Teachers	n/a
StudInfo	Informal Students	n/a
StudPG	Postgraduate Students	n/a
StudUnd	Undergraduate Students	n/a
StudHS	High School Students	n/a
StudMS	Middle School Students	n/a
StudES	Elementary School Students	n/a
Kids	Preschool Kids	n/a
Cognitive	Cognitive disabilities	n/a
DiversityElderly	Elderly	n/a
Auditory	Hearing disabilities	n/a
Speech	Speech disabilities	n/a
Visual	Visual disabilities	n/a

Instructions

• inline instructions is the tip in AccessibilityHelp component. In other words, the brief instruction right above the input field.

• Placeholder is a example inside the input field

• Tooltip is a popup that shows on focus and hover.

  • It will host the Label of the component, when the component doesn't have a visible label.
  • It will host the brief description of the required input, when the component doesn't have a inline description

• [x] Instructions

field	Inline Instruction	Placeholder	Tooltip
Audience	Select your target audience. You can select as many as you want. You can also add others target audience not listed above, by selecting [Add Audience] button.	n/a	n/a
SelectAllAudience	Select all options	n/a	n/a
Add_OpenAudience	Add other audience	n/a	n/a
InclusionGol	If you desire to validate the inclusion of your course for some specific diversity group, select them from the list above. You can select as many as you want.	n/a	n/a
SelectAllInclusionGol	Select all options	n/a	n/a

Help button ("More details")

• 150

Error Identification and Suggestion

• [x] error feedback

field	Validation	Error message
all	Required	[Field_Name] is required. Please complete it
OpenAudience	Unique	[CONTENT] already exist in the list of audiences. Please, select it from the list.
OpenAudience	Unique	You already add [CONTENT] before.
*OpenAudience	Format	[CONTENT] has a invalid entry. Please inform an audience that is [RULE]
*OpenAudience	Range	Inform no more then 5 options.

Wire-frames

NOTE: This wire-frames are just for example purpose. They are no meet entirely this requirement, for instance, keyword help is not left-aligned

[github-actions[bot]]

This Feature is ready to be implemented.

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

• [x] Not all audience options are on the page, all the options shown in this issue should be on there:

• Teachers

• StudInfo

• StudPG

• StudUnd

• StudHS

• StudMS

• StudES

• Kids

---

• [x] There's no responsiveness

---

• [x] There's no need for accessibility validation in this page

---

• [x] Tips should be bellow all options

---

• [x] There could be a message informing user that it’s not possible to include more than 5 OpenAudience

---

• [x] Page gets full white (crash) on specific Audience flow

Steps to Reproduce: 1 - Select any type of accessibility OR any type of inclusion goals 2 - Go to previous step 3 - Click to go back to Audience Step

[caroltaus]

• [x] Instead of "Pregrade student" should be "Undergraduate Student"

• [x] Standardize the use of capital letters (for example, right now there is Post Graduate students and High School Students)

• [x] There could a "Select All" written next to the radio button

[ecureuill]

Alert dialog is not working properly An alertdialog divert users' attention to a brief, important message and can receive a response from user. Ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.

• [x] Dialog is closing when user click outside dialog

:bulb: Suggestion: create one component for each #51 specs and reutilize it through project. This way avoid a lot of maintenance and guarantee the consistence in entire project

---

• [x] Should not have the tip "Select all options" in Intended Audience
• [x] Should not have the tip "Select all options" in Inclusion Goals

---

• [x] It's missing required label in Intended Audience

• [x] Error feedback is not presented (#46): required field for Intended Audience

• [x] Audience step is settled as incomplete when user add alternative audiences

---

• [x] It's possible to add an empty audience (value = " ")

  • BETTER SOLUTION Keep SAVE button disabled while value is empty (=== ""); OR
  • On SAVE, check for empty empty (=== "") and if true present the Required Validation error message

• [x] The Unique Validation should not validate against the value of the current field.

  1. Add a item with value 1 and save
  2. Select to edit the item
  3. Make no modifications and try to save

---

:warning: minor change

• [x] Replace "Elderly" by "Diversity of Abilities" to conform with #45

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

Please, move to CODED only when this feature is fully implemented

• bugs reported in comments are fixed
• requirements in OP are coded If you want to request a test of some partial solution, add a comment here with test team @

---

• [x] Open audience is accepting special characters

---

• [x] When user tries to add in an audience that is already on the list the error feedback should be "[CONTENT] already exist in the list of audiences. Please, select it from the list."

---

• [x] When you click on "Add new audience" and then on the space bar fields for OpenAudience are opened

Clicking on the "X" creates these blank audiences:

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

According to the requirement when the user tries to add an audience that they had already added before the feedback message should be "You have already added [CONTENT] before."

Right now the error message is:

The "[CONTENT] already exists in the list of audiences. Please, select it from the list." error message should only be shown when the user tries to type in one of the audiences already listed in the system (Graduate Students, Informal Students, Teachers and Professors, Preschool Kids, Post Graduate Students, Undergraduate Students, High School Students, Middle School Students, Elementary School Students)

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[rebeccamello]

Hi @CAndresH, some suggestion for better usability:

- [ ] Move up the Intended Audience information tip so the user can see it before completing the field, as is in the image - [ ] Move up the Inclusion Goals information tip so the user can see it before completing the field, as is in the image - [ ] Divide the More details button in two

• The first one should have only the first tip in the current button ("How to define the audience?") and should be below the information tip
• The second one should have all the other tips of the current button and should be below the information tip: -Cognitive disabilities -Examples of the disabilities (for cognitive) -Examples of barriers (for cognitive) -Example of adaptations (for cognitive) -Diversity of Abilities -Examples the disabilities (for diversity) -Examples of barriers (for diversity) -Example of adaptations (for diversity) -Hearing disabilities -Examples the disabilities (for hearing) -Examples of barriers (for hearing) -Example of adaptations (for hearing) -Visual disabilities -Examples the disabilities (for visual) -Examples of barriers (for visual) -Example of adaptations (for visual))

---

- [ ] Remove the tip "If you need help select an option"

[github-actions[bot]]

Functional Test passed! Please, make a PULL REQUEST or, if already merged, close the issue.