Select2 li - aria-selected=true is not read as selected by screen reader

Question

I am currently using select2.js version 4.0 and having this issue where screen reader (NVDA) won't read the selected option, even aria-selected="true" is added correctly to the current selected li. And when I go the unselected options, it read as example, "German not selected" which is correct. I tried using the version 4.1 as well but still having the same problem. I was wondering if there's an issue with aria-selected="true" in select2.js? can't really find a stated issue for this. Thanks for the help.

Here's my select option after select2 is applied,

And here's the view when opened

Answer 1

That's how NVDA works. Each screen reader (NVDA, JAWS, Voiceover, Talkback, Narrator, etc) will choose how to announce aria attributes. In this case, for aria-selected, you get different results for aria-selected depending on the role of the element and you get different results in different browsers. You can try to code around this by having your own hidden text that the screen reader reads but in general it's just best to let the screen reader decide how an attribute will be read.

Here's how convoluted aria-selected is just for Firefox and Chrome (let alone Edge, Safari, or IE). And this is just with NVDA. I'm sure the results will be difference for JAWS, Voiceover, etc.

Firefox

role="tab"

• defaut is "selected" whether you have the aria-selected attribute or not
• only get [silence, meaning "not selected"] when aria-selected=false

role="option"

• defaut is "not selected" whether you have the aria-selected attribute or not
• only get [silence, meaning "selected"] when aria-selected=true

role="gridcell"

• defaut is "not selected" whether you have the aria-selected attribute or not
• only get "selected" when aria-selected=true

role="row" (same behavior as option)

• defaut is "not selected" whether you have the aria-selected attribute or not
• only get [silence, meaning "selected"] when aria-selected=true

Chrome

role="tab" (different than firefox)

• defaut is [silence, meaning "not selected"] whether you have the aria-selected attribute or not
• only get "selected" when aria-selected=true

role="option" (same behavior as firefox)

• defaut is "not selected" whether you have the aria-selected attribute or not
• only get [silence, meaning "selected"] when aria-selected=true

role="gridcell" (different than firefox)

• doesn't work at all

role="row" (different than firefox)

• defaut is [silence, meaning "selected"] whether you have the aria-selected attribute or not
• only get "not selected" when aria-selected=false