Finishing up the Quiz Root Page

[nucleogenesis]

Merge learningequality/kolibri-design-system#497 before merging this

Summary

• Adds a 'debug' tool in the useQuizCreation module that populates some basic data for quick visual testing
• Applies styles to the main page closer to the Figma (WIP)
• Accordion implementation should be a11y compliant (outside perhaps of some optional aria tags; required tags are implemented I believe)
• Handles KCheckbox selection & the icons associated with the behavior (WIP)

This is based directly on the work laid out in #11382 -- commits up to the "KDS Linkage" commit are not new work in this PR and will be removed when that other PR merges to develop and this is rebased on that.

References

#11382
#11013

Reviewer guidance

TBD

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b6.dev0_git.566.g3bea2ec4.pex
Windows Installer (EXE)	kolibri-0.16.0b6.dev0+git.566.g3bea2ec4-unsigned.exe
Debian Package	kolibri_0.16.0b6.dev0+git.566.g3bea2ec4-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b6.dev0+git.566.g3bea2ec4-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b6.dev0+git.566.g3bea2ec4-0.1.0-debug.apk
TAR file	kolibri-0.16.0b6.dev0+git.566.g3bea2ec4.tar.gz
WHL file	kolibri-0.16.0b6.dev0+git.566.g3bea2ec4-py2.py3-none-any.whl

[radinamatic]

First of all, congrats to you and @AllanOXDi for all the work on this so far! Great progress, this is starting to look and feel almost exactly as I hoped from the designs! 👏🏽 💯

Keyboard navigation is logical and even though it will get more complex once questions and answers are in play, so far it's not overwhelming. There are just a few rough edges remaining to smooth.

Tabs for sections

Work as expected, according to our KDS component, a couple of notes:

• As you probably noticed the error in the console, KTablist is missing the label. Since we do not have a visible label for sections, we need to use aria-label, instead of aria-labelledby which is now empty on the element with the role="tablist". I suggest a simple 'Quiz sections'.

• I'm guessing the 'A' in the tab title is an oversight? It's not there in the newly created sections (which I noticed are still under development, so not going to comment on pending items):

  

• Pay attention on where you return the focus after a section is deleted, it should go to the next tab in the sequence if there is one, otherwise on the preceding one. See more details on the ARIA authoring practices for tab pattern. We did not have that option on the rest of the tabs on Coach page, so not sure if it's implemented in KDS.

Accordion for questions

A bit more polishing needed here. First of all the missing labels:

• for 'Replace' and 'Delete' icons just reuse the tooltip
• for selecting and moving the questions I was initially thinking of inserting the questions title, but that might be too verbose. So maybe just 'Select' and 'Move up'/'Move down' could suffice (the current 'up' and 'down' is a bit bare).

Now the interaction:

• The recommended practice is to have a button element inside the accordion header, not a link. Would that be possible?

• There's no need to have the chevron as a separate link, it could be a part of the button inside the accordion header just as a visual element. See more details on the example of ARIA authoring practices for the accordion pattern. This way we eliminate one unnecessary Tab click from the sequence that is already long and complex.

• There may have been a mixup here, the question title (accordion header) needs to be the H element, not the content of the accordion panel:

  

  As for the heading level needed here, it seems the most logical to me for the page title 'Create new quiz' to be the H1, each 'Section 1/2/3...' in the tabs should be the H2, and each question title in the accordion header should be the H3.

• Even though the accordion is keyboard navigable and would be usable for the sighted user, what worries me the most is that I don't see required attributes aria-expanded and aria-controls that are required for this pattern to be accessible to screen reader users. See more details on the ARIA authoring practices for the accordion pattern, as well as on the example linked above.

Again, great job so far, we're almost there! 🙂

[nucleogenesis]

Tests will be fixed with rebase on develop after merging #11535

[marcellamaki]

Thanks @nucleogenesis. Following our live review, I have just two comments. One is non-blocking but a response/little discussion would be great just to have a reference for it in github somewhere. the other is a very tiny cleanup request. Overall I think it will be okay to merge and build on top of this. Thanks for all the work here

[marcellamaki]

very small but can you either get rid of this or add a TODO to cleanup console logs later?

[marcellamaki]

not blocking: the JSON.stringify(question) here feels very weird. is there something about the data structure that requires this, whereas in other places we don't need it? Is it permanent or is this because of the debugging setup? I know that we do use JSON.stringify in places but I am struggling to think of other instances where we use it in a vue template.

[nucleogenesis]

This will be wiped out in #11497 -- I just put it there as an example of like... "look here is where/how you get the questions"