@orphandeity
Posted
I think you're on the right track here with the list and list item elements. I suggest using <article> instead of <section> for the individual notifications and maybe contain them all in a single <section> element.
<section>
<article></article>
<article></article>
</section>
You could also wrap the <article> in a <li> like so...
<ol>
<li>
<article></article>
</li>
<li>
<article></article>
</li>
</ol>
Because the private message is a type of notification and not an input field, I don't think it needs to be focusable. Usually, you would only want the interactive elements to receive focus... like the 'mark all as read' button.
Marked as helpful