I’m currently applying the design system to the category list.
When testing with screen reader “empty” turns out to be not very meaningful. I’ll change this to “no events” for now.
For example, when reading a category list that contains a category “Accessibility”, it will read it as “Accessibility, empty”. Changing that to “Accessibility, no events” makes a bit more sense. With an ARIA label, I could then expand this to “Accessibility, category with no events”.
Another note regarding screen readers is that some of them don’t insert pauses between elements. Therefore, we need to tweak the text a bit to make the screen reader output make more sense.
For instance:
<span class="separator">,</span>
<span class="number-events" id="category-event-count-{{ category.id }}"></span>
The .separator comma is added to induce an audible pause in the NVDA announcement. It is visually hidden using CSS.