diff --git a/src/components/NcEllipsisedOption/NcEllipsisedOption.vue b/src/components/NcEllipsisedOption/NcEllipsisedOption.vue
index be0aa4abcf..7204c9b7eb 100644
--- a/src/components/NcEllipsisedOption/NcEllipsisedOption.vue
+++ b/src/components/NcEllipsisedOption/NcEllipsisedOption.vue
@@ -68,13 +68,16 @@ export default {
 
 <template>
 	<span dir="auto" class="name-parts" :title="name">
+		<span class="hidden-visually" v-text="name" />
 		<NcHighlight
+			aria-hidden="true"
 			class="name-parts__first"
 			:text="part1"
 			:search="search"
 			:highlight="highlight1" />
 		<NcHighlight
 			v-if="part2"
+			aria-hidden="true"
 			class="name-parts__last"
 			:text="part2"
 			:search="search"
diff --git a/tests/component/components/NcSelect.spec.ts b/tests/component/components/NcSelect.spec.ts
new file mode 100644
index 0000000000..338e93c431
--- /dev/null
+++ b/tests/component/components/NcSelect.spec.ts
@@ -0,0 +1,25 @@
+/**
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test } from '@playwright/experimental-ct-vue'
+import NcSelect from '../../../src/components/NcSelect/NcSelect.vue'
+
+/**
+ * Previously due to NcEllipsedOption long option names
+ * were shown as "Verylongo ptionname" due to whitespace between <span> elements.
+ */
+test('Options have proper accessible names', async ({ mount, page }) => {
+	const component = await mount(NcSelect, {
+		props: {
+			options: ['Short', 'Verylongoptionnamethatlikelyoverflows'],
+		},
+	})
+
+	await expect(component.getByRole('combobox')).toBeVisible()
+	await component.getByRole('combobox').fill('Very')
+
+	console.error(await page.getByRole('option', { name: /Veryl/ }).innerHTML())
+	await expect(page.getByRole('option', { name: 'Verylongoptionnamethatlikelyoverflows' })).toBeVisible()
+})