benetech/MathShare

Set Creation: Forward & Back Arrows

Opened this issue · 4 comments

alexrcabral commented

Mockup of problem set creation on a mobile view. Below on the left is a back arrow to go back to the dashboard, and on the right is a button with a share icon which says Assign Set. Beneath this is a banner with the title New Problem Set 12-20-2020 with a pencil icon. Below this are boxed numbers, 02 through 06. 04 is currently highlighted. There is a plus button on the right hand side of this line. There are left and right arrows on this same line, on either side of the numbered boxes. In the main portion of the screen and taking up the majority of the page is a box with two sections, titled, 'Type the problem here' and 'Add the prompt and any details here'. At the top of the screen is the universal nav bar with the Mathshare logo and the profile dropdown

Forward and Back Arrows 

On the left hand side of the numbered boxes should be a back arrow (pointing left), and on the right hand side of the numbered boxes should be a forward arrow (pointing right). 

When clicked or selected, the next problem button should bring the user to to the next problem. This should save any progress made, make the next problem active within the problem navigation, and update which numbers are shown in the navigation boxes if necessary. For example, if I'm on problem number 04, then pressed the next button, this would save my work and show the fifth problem in the set as active in the edit fields, and 03, 04, 05 (active), 06, 07 would be shown in the navigation boxes.

Same for previous: when clicked or selected, the previous problem button should bring the user to to the prior problem. This should save any progress made, make the previous problem active within the problem navigation, and update which numbers are shown in the navigation boxes if necessary. For example, if I'm on problem number 04, then pressed the previous button, this would save my work and show the third problem in the set as active in the edit fields, and 01, 02, 03 (active), 04, 05 would be shown in the navigation boxes. 

These do not wrap around. If I reach the first problem in the set, the previous problem arrow should go away. Similarly, if I reach the last problem in the set, the next problem arrow should go away. 

Alt Text: 

  • Forward Arrow: "Next Problem, # is currently active" 
  • Back Arrow: "Previous Problem, # is currently active" 

where # is the current active problem. For example, if I were on problem number 04, then moved focus to the next arrow, I should hear "Next Problem, 4 is currently active." This should retain focus on the next problem button. 

Notable Changes from Prior Mockups

One change to note from the earlier problem set creation GitHub issues: the arrows should be located on either side of the numbered boxes rather than on the right hand side of the screen. There is also the addition of a plus button for adding new problems.

The colors used for the font and the background for the numbered navigation boxes are different from Eric's design in Invision. The original combination was not high enough contrast to be accessible for low vision users. 

References 

Style Guides: https://invis.io/CQYLLW8J49U
Mobile Mockups: https://invis.io/5HYLLW1G4BD
Fonts: https://www.dropbox.com/sh/c12m6ufweyds20d/AAAdXNPOt8e52DkSAr9pd-a-a/Fonts?dl=0

Acceptance criteria: 

Given that I'm a user on v2 who has created or is editing a problem set, I should encounter a previous and next arrow on either side of the numbered boxes. If I click the next arrow, my progress should be saved and I should be brought to the next problem. If I click the previous arrow, my progress should be saved and I should be brought to the previous problem. If I reach the first problem in the set, the previous problem arrow should go away. Similarly, if I reach the last problem in the set, the next problem arrow should go away. 

abaranowska1 commented

Tested

  • Given that I'm a user on v2 who has created or is editing a problem set, I encounter a previous and next arrow on either side of the numbered boxes.
  • If I click the next arrow, my progress is saved and I am brought to the next problem.
  • If I click the previous arrow, my progress is saved and I am brought to the previous problem.
  • If I reach the first problem in the set, the previous problem arrow is unclickable.
  • Similarly, if I reach the last problem in the set, the next problem arrow is unclickable.

@rupeshparab @alexrcabral I'm not sure about the alt text, because I didn't hear anything when click arrows.
Peek 2021-01-18 14-22

rupeshparab commented

I am seeing the alt text on Voiceover, @alexrcabral Can you try if it is working for you?
image

  • 👍1
alexrcabral commented

Tested and I was also able to hear the alt text just fine when navigating with the keyboard.

@abaranowska1 Which screen reader & browser combination were you using?

abaranowska1 commented

@alexrcabral I used Screen Reader Extension for Google Chrome and Ubuntu 20.04 OS I will find a better app for Ubuntu.