Making parent aria-label read first, and then child content

Question

I have code where I have listitem instead of a list . The content that is being read is as follows:

Item 2, group list mylist 2 items .

I would like it to be read like:

mylist 2 items, Item 2 .

Basically, I want the parent list aria-label to be read first, and then the child element.

Here's the code: https://jsfiddle.net/81sc9dum/1/

Answer 1

Okay, looks like you can do this if you introduce the value for the element that you want to be read later (aria-label) on the event itself.

So if it's on focus, you actually add the aria-label on focus, and then it would read the parent first, and then the child.