Make improvements based on the below feedback
This is still extremely confusing when checking the answers:
i. It should update the header to make clear that it is the solution - not just going through the questions again
ii. It reads the answers from bottom to top
iii. There is no indication that the text has changed to read-only This is particularly confusing, because when answering questions this section is navigable using the tab key, but when checking the solutions if you use the tab key it skips the whole solution and goes to the next question.
iv. It should say “Incorrect” instead of “missed”. “Missed”
-is too easily misheard
i) added solution mode "header"
ii) moved focus to top when clicking answer and show solution button
iv) changed text
not sure what to do about iii), hopefully it is sufficient that focus is moved when answering. I don't think making the words tabbable is a good idea.
I am not sure about this solution since we are focusing on an “invisible” element, which means keyboard users lose focus. But at the same time, I don’t know of any other better solution. Let’s see if has any other ideas?
The setTimeout which moves focus doesn’t work for me at all in FF + NVDA. I’m guessing h5p-question has some timeout focusing of their own when hiding buttons.
I.e. ii. is missing but other than that I find that it’s working very well.
The solution is probably to move the focus before the buttons are toggled.
Thanks, moved focus to before removing buttons.