nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[NcActions] doesn't fully support changing type during open state

Open
#5,334 0 comments 0 reactions 1 assignee View on GitHub

@ShGKme is already working on this.

Since Mar 1, 2024.

1. to develop bug feature: actions
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

NcActions can have a different type: navigation (expanded list), application menu, form dialog.
It not only changes attributes for a11y but also keyboard navigation and focus-trap integration.

But it doesn't work well when it is changed during menu usage.

Example — renaming an address book in Contacts app.

  1. Initially it is a menu without a focus trap. Opening this menu pauses the global focus trap (e.g. current modal). It is needed because in a DOM menu is rendered outside the modal with a focus trap, and otherwise modal's trap breaks navigation in actions. It is supposed to be unpaused on close.
    image
  2. On "Edit" click it, this menu item is replaced with input. With a form, this popup is no longer a menu but a dialog form. Dialog is supposed to have its own focus trap. But it doesn't, because a focus trap should have been enabled initially in NcPopover.
    image
  3. When the dialog is closed, the global focus trap is not unpaused. Because it is not needed for the dialog. So the focus trap of modal is broken now.

A solution could be:

  1. Add focusTrap setting change support to NcPopover so we can enable focusTrap for existed dialog
  2. Always unpause the focus trap in NcActions on close if it was paused before, not matter if was expected.

See also: https://github.com/nextcloud/contacts/issues/3812

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.