[kristian-zendato]

• Resolves: https://github.com/nextcloud-gmbh/customer-feature-requests/issues/1590

Summary

Improve a11y of the Create file request dialog:

1. Recipient emails are a semantic list — chips render in a <ul> / <li> with an accessible name (Recipient emails).
2. Unambiguous chip delete labels — each close button is Remove email: {email} instead of a shared Remove email.
3. Form labels are programmatically linked — visible legends use <label for>, fields have stable ids, helper text is aria-describedby, and the expiration date keeps a visible linked label.
4. Upload destination is keyboard-operable — Enter/Space opens the folder picker; typing/paste still do not edit the path.
5. Focus returns to New — after File request created closes, focus goes back to the New button instead of the Files keyboard-shortcuts UI.

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)
• Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
• Milestone added for target branch/version (ex: 32.x for stable32)

AI (if applicable)

• The content of this PR was partly or fully generated using AI

[susnux]

why the ID?

[susnux]

Ideally not use the data selected, but there is also no public "api" here. Maybe

Suggested change

	return document.querySelector<HTMLElement>('[data-cy-upload-picker] button')
	return document.querySelector<HTMLElement>('.upload-picker button')

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[skjnldsv]

That should not be the case, now NcTextField has two labels.
The legend doesn't need a label

[skjnldsv]

It works, but the announcement is redundant. Two ways to clean it up:

Option A: legend names the group, NcTextField names the field (the easiest I'd say)

Remove the <label> from the legend and keep NcTextField's label prop.

<fieldset class="file-request-dialog__destination" data-cy-file-request-dialog-fieldset="destination">
	<legend>{{ t('files_sharing', 'Where should these files go?') }}</legend>
	<NcTextField
		id="file-request-dialog-destination"
		:label="t('files_sharing', 'Upload destination')"
		…>
		<IconFolder :size="18" />
	</NcTextField>
	…
</fieldset>

• Group: "Where should these files go?"
• Field: "Upload destination"
• This is the intended fieldset/legend semantics. Clicking the legend no longer focuses the input, but the field's own label still does.

Option B: legend label is the only label

Keep <label for> in the legend and stop NcTextField from rendering its own with label-outside.

<fieldset class="file-request-dialog__destination" data-cy-file-request-dialog-fieldset="destination">
	<legend>
		<label class="file-request-dialog__legend-label" for="file-request-dialog-destination">
			{{ t('files_sharing', 'Where should these files go?') }}
		</label>
	</legend>
	<NcTextField
		id="file-request-dialog-destination"
		label-outside
		…>
		<IconFolder :size="18" />
	</NcTextField>
	…
</fieldset>

• Group and field are both named "Where should these files go?"
• There is still a double announcement (group + field), but it's acceptable and explicit.
• Clicking the legend focuses the input.

Either way: link the info text to the field

The lock notice is not announced when the input has focus. Use helper-text, which NcTextField wires up with aria-describedby:

<NcTextField
	…
	:helper-text="t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.')">

To keep the custom <p> with the lock icon, give it an id and pass aria-describedby="file-request-dialog-destination-info" to NcTextField instead. Check that NcTextField doesn't override its own aria-describedby when you do this.

[susnux]

Vote for A.