Product issue: A coach can preview and sort questions (but not yet edit)

[marcellamaki]

Overview

The Create new quiz page will present the coach with a spacious area in which they can preview, sort, or select to remove/replace any number of questions in a section.

Description and outcomes

Under the section tab navigation described in #10949 will be the Question list section of the Create new quiz page. Here the coach will see all questions presented in a simple table format.

The table heading row will indicate firstly that the user may click a KCheckbox to "Select all" of the questions. The far right of this heading will have two icon buttons:

• Replace questions -- When clicked, the coach will enter into a separate workflow where they can replace the questions they've selected
• Delete -- When clicked, the coach will be prompted to confirm that they want to delete the selected resources.

Each question in the table will first have a drag handle icon, permitting the user to drag and drop questions to define their order. Then a KCheckbox is there to allow selecting that row. Finally, the question's title is shown.

At the far right of each question's row will be a right-chevron icon indicating that there is some sort of action to be taken. That action is that if the user clicks that arrow, or anywhere on the card's body or text, then that section will expand to present beneath it a preview of that question. When open it, the chevron is now an up-chevron, indicating that the section may be collapsed.

Underneath the table there will be two buttons:

• Edit section -- This opens up the workflow described in Product issue: A coach can create and manage any number of quiz sections #10949 where the coach may edit the section's settings
• Jump to question -- This is a drop-down trigger which will list all of the questions in the drop down. Selecting a question here will scroll to it and expand, showing its preview (ETA: The "Jump to Question" feature is considered non-blocking for the MVP and will be an add-on in a future release)

Accessibility requirements

• Please review the W3C Aria Authoring Practices Guide's a11y guidance for the Accordion pattern. This should serve as a general guideline for the a11y expectations for this component. There are items marked as (Optional) in that spec and we will treat them as such here as well. Additionally, Heyden Pickering's "Inclusive components" has an excellent chapter on Collapsable Sections that can give additional insight.
• With regards to the multi-select functionality, we may look to aria-multiselectable and it's associated elements for guidance on how to ensure users understand and are able to use the multiple-selection functionality. MDN also has some examples that could be helpful. However - these examples differ from our design in that we use checkboxes and the examples shown are more for using CTRL or SHIFT to select more than one item from a list of elements. Whether the aria attr is useful for our case or not, we can likely learn from their considerations with regard to how the user is made to know how they can interact with their selection.
• Otherwise, we should be able to rely on our use of existing a11y-tested components for much of the rest of the a11y considerations.

Resources

Relevant Figmas

Epic