Use aria-describedby to add the filter count to aria-live

[aevanson]

There seems to be a restriction on having multiple items read out by aria live. Right now, the text in the Sort field header (Showing 1 - 12 of 24 products) is taking precedence. Alison recommended trying aria-describedby to append the filter count.

[liskulic]

@aevanson, is there a specific element that the aria-describedby should be placed in?

[liskulic]

Adding aria-describedby doesn't work. I tried adding the actual filter count text inside the but the announcement of the text inside is incorrect. VoiceOver announces everything in the wrong order.

[liskulic]

I think the best solution to this is to have only one aria-live block to avoid conflicts with precedence, especially since aria-live is not always reliable anyway.

In essence, for the "0 filters applied" text, remove aria-live and append that same text after the "Showing 1 to 12 of 40" for screen readers only.

@alisonrae, @aevanson, thoughts?

[aevanson]

@liskulic I like that idea. Works for me. Do you think it should be it's own component, like "live alerts"? We would need this for adding items to cart, etc. that other components could push events to.