learningequality / kolibri

Kolibri Learning Platform: the offline app for universal education
https://learningequality.org/kolibri/
MIT License
757 stars 638 forks source link

Quiz creation: Create jump-to-question button #11550

Open nucleogenesis opened 7 months ago

nucleogenesis commented 7 months ago

Overview

In order to simplify the user's navigation of long lists of questions, the design calls for a "Jump to question" button that opens a scrollable KDropdownMenu that lists the questions and when the user clicks it, they see the question scrolled into focus before their very eyes.

Acceptance criteria

The scroll should be smooth but relatively quick. Be sure to use an easing function to soften the transition.

You may need to add refs to the accordion items so that you know where to scroll to -- or to have an element to which you can call focus(). Ideally, we will utilize anchor tags to stick with semantic HTML but so long as keyboard navigation works properly, should be good.

Note, then, that when keyboard navigating and selecting a question then your focus should immediately be placed on that accordion item's header (and the user only a spacebar/enter away from toggling it open)

Screen reader considerations

@radinamatic should be consulted on this insofar as we should decide if this is necessary at all for non-sighted users to have read out to them when the "scroll-to" is a particularly visual effect. Should this just be aria-hidden?

nikkuAg commented 7 months ago

Hey, I would like to work on this issue?

nucleogenesis commented 7 months ago

Hey @nikkuAg thank you for your interest! One of our team is already working on this. If you'd like to help out elsewhere, please take a look at this list of unassigned issues we've tagged as open to community contribution.