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

CodePudding user response：