Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(sharing): migrate QuickShareSelect to NcActions #43213

Merged

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Jan 30, 2024

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

Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍 works great!

@ShGKme ShGKme marked this pull request as draft January 30, 2024 19:13
@ShGKme
Copy link
Contributor Author

ShGKme commented Jan 30, 2024

Waiting for @nextcloud/vue@8.6.0

@JuliaKirschenheuter JuliaKirschenheuter marked this pull request as ready for review February 7, 2024 09:59
@emoral435 emoral435 added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Feb 7, 2024
Copy link
Contributor

@emoral435 emoral435 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 Tested with NcVue 8.6.1 and works perfectly :)

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme force-pushed the fix/43139/sharing--migrate-quick-share-select-to-nc-actions branch from 4c4bb24 to 98d9fb1 Compare February 8, 2024 00:11
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 8, 2024

Rebased onto master after upgrading @nextcloud/vue

@ShGKme ShGKme enabled auto-merge February 8, 2024 00:11
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 8, 2024

/backport to stable28

@ShGKme ShGKme merged commit 3260a09 into master Feb 8, 2024
85 checks passed
@ShGKme ShGKme deleted the fix/43139/sharing--migrate-quick-share-select-to-nc-actions branch February 8, 2024 00:34
@ShGKme
Copy link
Contributor Author

ShGKme commented Feb 8, 2024

/backport 66ba4c1 to stable28

artonge pushed a commit that referenced this pull request Feb 8, 2024
…uick-share-select-to-nc-actions

fix(sharing): migrate QuickShareSelect to NcActions
@blizzz blizzz mentioned this pull request Mar 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BITV]: Sharing tab: permissions dropdown is not accessible
4 participants