When it comes to accessibility, what is the proper design pattern or technique for appending an inline panel that would have a header, body text, and optional close button?
For context, I've been tasked with creating an accessible multi-select quiz question that appends a correct or incorrect feedback panel under the question after the user presses submit. I think normally this sort of feedback would appear in a modal popup that covers the other content and traps focus, but this particular design needs the feedback panel to appear in the page directly under the submit button, and still allow the user the tab back through the answer options (even though they would be aria-disabled after submitting).
The feedback panel would have a title header, body text, and an optional close button. There would be no close button if the user got it all correct or they ran out of attempts.
Is there a suitable aria-role or known design pattern for this sort of appended panel? And what should I send focus to once the feedback panel appears, the header? The close button?
In case its relevant, for the multiselect answer options I am using native checkboxes with <label>s
The first would be to add role="alert" to the appended box (assuming you will only add it once per page as otherwise we would use aria-live).
This would then be announced to screen reader users.
Option 2 is that you can just append the box to the page and use focus management. So the box appears and you would move focus to the heading of the box via JavaScript (with tabindex="-1" on the heading for example). This needs to happen from an expected action (so "submit answer" button that you said you have).
I would probably go with option 2 as it is the easiest way to not introduce more accessibility issues by mistake.
There are other ways you can achieve this with aria-live, aria-labelledby etc. etc. but the above two options are the most straight forward.