server icon indicating copy to clipboard operation
server copied to clipboard

fix(sharing): migrate QuickShareSelect to NcActions

Open ShGKme opened this issue 1 year ago • 1 comments

  • ⚠️ Requires @nextcloud/[email protected]
  • Resolves: https://github.com/nextcloud/server/issues/43139

Summary

The current custom quick share select implementation has a number of a11y issues:

  • The toggle button
    • is not focusable
    • has no button role
    • has no aria-expanded="false"
  • The menu has popup role, better to have menu or select semantics
  • Selected button is marked by aria-selected only on true, which is not allowed here and should has false value
  • Keyboard navigation works, but the best is if Tab moves to the next UI element instead of the next option in the list

Having all of that, it seems that moving to NcActions with menu + menuitemradio semantics and some custom styles for the trigger is the best and easiest way to fix all a11y issues.

Screenshots

🏚️ Before 🏡 After
image image
image image
before-sharing-focus after-sharing-focus

Checklist

ShGKme avatar Jan 30 '24 15:01 ShGKme

Waiting for @nextcloud/[email protected]

ShGKme avatar Jan 30 '24 19:01 ShGKme

Rebased onto master after upgrading @nextcloud/vue

ShGKme avatar Feb 08 '24 00:02 ShGKme

/backport to stable28

ShGKme avatar Feb 08 '24 00:02 ShGKme

/backport 66ba4c1 to stable28

ShGKme avatar Feb 08 '24 10:02 ShGKme