[BITV] Share tab a11y issues

[PVince81]

Share tab accessibility issues:

• Add accessible NcSelect and NcSelectTags components nextcloud-libraries/nextcloud-vue#3435
  • Search suggestions are not read out by screenreader, multiselect component is not accesssible at all
  • Subline of search suggestions needs more contrast, needs to use color-text-maxcontrast
  • "No recommendations. Start typing." also needs to use color-text-maxcontrast (#no-options vue-select slot uses --color-main-text)

---

• Search suggestions: [BITV/A11Y] Multiselect accessibility nextcloud-libraries/nextcloud-vue#2504
  • suggestion should be button instead of link as it doesn’t load a new page (already not link)
• Share link flow
  • Currently share link button only says "Button", needs individual label as there can be multiple share links (correct label "Create a new share link" present on master)
  • Focus feedback of menu goes full width
  • As there may be multiple share links each one should have a unique label Differentiate share links #36056
    • [stable25] Differentiate share links #36129

[Pytal]

Transferred ""Copy to clipboard" should be button instead of link"

• [BITV] Share tab: "Copy to clipboard" should be button instead of link #35505

[Pytal]

• All "save" buttons need to be buttons instead of links, be keyboard-focusable, and have an accessible label, and showSuccess notification Show success on share actions #35271
  • Save share label
  • Password save
  • Share note
  • Unshare
  • [stable25] Show success on share actions #35578

[Pytal]

• "Password" field needs accessible label, e.g. aria-label="password"

Not needed as screen readers already read out the placeholder message

server/apps/files_sharing/src/components/SharingEntryLink.vue

Line 188 in 4767551

{{ t('files_sharing', 'Enter a password') }}

[Pytal]

• Avatar has label "Avatar of displayname"

Done in https://github.com/nextcloud/nextcloud-vue/blob/556642f23177563da62afdfc798837380e82c04e/src/components/NcAvatar/NcAvatar.vue#L373-L382

[Pytal]

• Search field needs a permanent label Add label to sharing search field #35272

[Pytal]

Transferred ""Share label" needs visible text label above"

• [BITV] Sharing "Share label" needs visible text label above #35416

[Pytal]

Transferred ""Link copied" needs to use showSuccess which includes aria-live"

• [BITV] "Link copied" needs to use showSuccess which includes aria-live #35438

[Pytal]

Transferred "Entries use transparency when not active, leading to contrast issues"

• [BITV] Actions: Entries use transparency when disabled, leading to contrast issues nextcloud-libraries/nextcloud-vue#3521

[Pytal]

Transferred "When leaving the share link menu, one is being put back into the file list instead of just closing the menu"

• [BITV] Share tab: When leaving the share link menu, one is being put back into the file list instead of just closing the menu #35531

[Pytal]

Transferred into nextcloud-libraries/nextcloud-vue#3526

• Focus of search suggestions is not clearly visible, needs border instead of background
• aria-label needs to be removed for unclickable avatars

[Pytal]

Focus feedback of menu goes full width

Might be missing something but all the focus feedback in the share tab seem to be normal, is there a specific menu that needs to be changed @PVince81?

[PVince81]

@Pytal this is a rather old ticket so it's likely that some issues I mentioned were already fixed recently

[Pytal]

@Pytal this is a rather old ticket so it's likely that some issues I mentioned were already fixed recently

Seems fixed after investigations

[Pytal]

Transferred "Share link row should be fully focusable / clickable to open menu."

• [BITV] Share link row should be fully focusable / clickable to open menu #36111