[share-dialog-redesign] I: Section "Share with people"

[hurradieweltgehtunter]

This is a sub-task of #8743

Current layout

Problems

• Sidebar title (at least in german) is misleading
• Section title + input label can be improved
• Options (permissions + expiration date) are not recognizable as buttons + down-arrows (carets) are misplaced
• Options (permissions + expiration date) do not have a clear label -> value structure

Proposal: New layout

Sorry for the german screenshot, but most of the raised issues are german based due to gender-neutral wording.

1. Title
   Use a title, which is action related. User shares a file, title should read “Share”.
   In german: Current title “Geteilt” is misleading. Use “Teilen” or ” teilen”

2. Rename section title and label
   The section title should clearly separate from the other section title (“Share via link”) and show the difference.
   The label should be a describing element to the input field.

3. Sharing options

• Re-structure: Use rows for different options
• Rename permissions (see subtask -enter issue-)
• Permissions: Select lowest permission (view) as default
• Expiration date: When selected, show date and remaining time: expiration date: 1.5.2023 (15 days, 12 hours)

Tasks

• Change texts

element	current english	new english	current german	new german
Sidebar title	Shares	Share	Geteilt	Teilen
section title	Share with people	Share with people	Personen einladen	Mit anderen teilen
Input field	Invite	Search for people and groups	Einladen	Personen und Gruppen suchen

• Place sharing options in rows
• Re-Structure sharing options as clear label -> value pairs
• Move CTA to own row, align right

[tbsbdr]

Talked with Markus as not all of the suggestions from him where improvements imo.

I'd suggest the following - what do you think @hurradieweltgehtunter @kulmann ?

Proposal

Dismissed ideas ❌

V2

V3

[hurradieweltgehtunter]

I like your proposal. But I'm not sure if it works generally without labels ("permission", "Expiration date"), also regarding accessibility. If it does, 👌
Wording for permissions ("can edit" etc) is the best working solution IMO

[kulmann]

I like your proposal. But I'm not sure if it works generally without labels ("permission", "Expiration date"), also regarding accessibility. If it does, 👌
Wording for permissions ("can edit" etc) is the best working solution IMO

Regarding a11y, that’s what aria-label, aria-describedby and the like are made for. We can make that work easily.
For a form in the usual style (with lots of text inputs etc) it should be done with labels. But for „special input“ it’s fine to use aria props.