Screen reader is reading list from a vuetify v-select in random order

[ncsugrad94]

Steps to reproduce:

Go to any implementation of vue v-select like this one: https://vuetifyjs.com/en/components/selects/#density
Use the keyboard to navigate to the select menu and open it.

Actual behavior:

NVDA reads the items in the list in a random order.

output from speech viewer:
Select component — Vuetify - Google Chrome - Steven
Buzz
Fizz
Bar
Foo

Actual order of elements:
Foo
Bar
Fizz
Buzz

Expected behavior:

NVDA reads the items in the list in the order they are presented in the UI

NVDA logs, crash dumps and other attachments:

System configuration

NVDA installed/portable/running from source:

NVDA Installed

NVDA version:

NVDA vs 2024.3 (2024.3.0.33433)

Windows version:

Windows 11

Name and version of other software in use when reproducing the issue:

Chrome Version 128.0.6613.120 (Official Build) (64-bit)

Other information about your system:

Other questions

Does the issue still occur after restarting your computer?

yes

Have you tried any other versions of NVDA? If so, please report their behaviors.

No

If NVDA add-ons are disabled, is your problem still occurring?

No add ons installed

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?\

Yes

[Adriani90]

This is only reproducible in Chromium. In Firefox NVDA is always reading the same order.
I noticed however that if you press the down arrow key while focusing the multi combo box in focus mode, NVDA will report the presumably focused element first and then the remaining ones after the focused item, and then the ones before the focused item.
This happens only while the box is closed though. So it is not really random.

[ncsugrad94]

Thanks for the feedback. Is it possible this will be fixed in a future release?

…

On Thu, Sep 5, 2024 at 10:30 AM Adriani90 ***@***.***> wrote: This is only reproducible in Chromium. In Firefox NVDA is always reading the same order. I noticed however that if you press the down arrow key while focusing the multi combo box in focus mode, NVDA will report the presumably focused element first and then the remaining ones after the selected item, and then the ones before the selected item. This happens only while the box is closed though. So it is not really random. — Reply to this email directly, view it on GitHub <#17123 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJLJSD2ATNF7FS62HT5VCDZVBTIZAVCNFSM6AAAAABNWS52NGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZRHA2DGMRXHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[RyanSMS]

This is only reproducible in Chromium. In Firefox NVDA is always reading the same order. I noticed however that if you press the down arrow key while focusing the multi combo box in focus mode, NVDA will report the presumably focused element first and then the remaining ones after the focused item, and then the ones before the focused item. This happens only while the box is closed though. So it is not really random.

"Random" because in each time the list is expanded, NVDA reads the list in different order. For example based on the one above:
At the first time, you may hear:
Buzz
Fizz
Bar
Foo

Maybe you will get at the second time of list expansion:
Fizz
Buzz
Foo
Bar

[seanbudd]

Welcome @ncsugrad94 ,

We are unable to process this issue as it stands.

• To be able to reproduce this issue, we need a minimal code sample. Provide a minimal HTML sample using plain HTML/JS to reproduce this using codepen. It is not possible for us to debug the vuetify library.
• This is very likely a problem with the implementation of the framework design, as a starting point please submit feedback to the authors to let them know about the problem.

Kind Regards,
NV Access Software Developers

[thgcode]

I tried to create a minimal example to try to understand the issue better and noticed that each time you close the browser and reopen the document again, NVDA reads the aria-live text with a different order:

<html>
	<head>
		<title>Aria-live reading order test</title>
	</head>
	<body>
		<script type="text/javascript">
		var pressed = false;

		function test() {
			let t1 = document.getElementById("t1");
			let t2 = document.getElementById("t2");
			let t3 = document.getElementById("t3");
			pressed = !pressed;

			if (pressed) {
				t1.textContent = "Aria 1";
				t2.textContent = "Aria 2";
				t3.textContent = "Aria 3";
			} else {
				t1.textContent = "";
				t2.textContent = "";
				t3.textContent = "";
			}
		}
		</script>
		<p aria-live="polite" id="t1"></p>
		<p aria-live="polite" id="t2"></p>
		<p aria-live="polite" id="t3"></p>
		<button onclick="test()">Press to change aria-live elements</button>
	</body>
</html>

I tested with Narrator and the events are read with the proper order each time. But I am not sure on how to debug further, is there some way I can find on which order aria-live events are arriving on NVDA's end, or if there is a difference on IAccessible 2 and UIA?