Skip to content

WCAG: Focus guard does not preserve the focus within an opened modal #11399

@ahukkanen

Description

@ahukkanen

Describe the bug

When any modals are open on the page, the user's focus should be locked to that element.

Currently it is possible to exit the modal focus when the modal is open and the user enters the page again using keyboard navigation starting from the address bar. See the reproduction instructions and the related video.

To Reproduce

  1. Log out if currently logged in
  2. Go to a proposals component with proposal creation enabled
  3. Click the "New proposal" button to open the login modal
  4. Put the cursor focus to the browser's address bar
  5. Using the TAB key on the keyboard, re-enter the content of the page
  6. See once you reach the document, focus is outside of the modal that is open on top of the page
  7. Repeat the same experiment but by using SHIFT+TAB to re-enter the document from the bottom
  • Note that this works if the modal remains the last element on the page but it has to be checked if this is always the case

Expected behavior

The focus should remain within the topmost opened modal element at all times.

This is the reason the focus guard was implemented in the first place.

Screenshots

decidim-redesign-focusguard.mp4

Stacktrace

No response

Extra data

  • Device: (any)
  • Device OS: (any)
  • Browser: (any)
  • Decidim Version: 0.28.0.dev
  • Decidim installation: Alpha Try Decidim

Additional context

Originally reported at:
#9760 (comment)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions