From 953832a3cff0e03082afd778cbe07ae084ba4ef5 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 24 Jun 2026 16:24:37 +0200
Subject: [PATCH] fix(NcEllipsisedOption): make sure accessible name is
 properly computed

The component uses `display: flex` and then splits a string,
e.g. "longvaluename" is split like "'longva' 'luname'".
Because of `display: flex` this is considered two different
strings instead of one, so the accessible name is now:
"longva luname"

If `display: inline` is used its calculated correctly,
but even with `inline-flex` it does not work as browsers still
consider this now two elements instead of one inline.

The solution is to hide the visual separated elements from the
accessibility tree and use a non-visual element that just contains the
full name.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcEllipsisedOption/NcEllipsisedOption.vue |  3 +++
 tests/component/components/NcSelect.spec.ts   | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 tests/component/components/NcSelect.spec.ts

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()
+})