Skip to content

Improve accessibility of studio immersive modal - #5741

Merged
MisRob merged 1 commit into
learningequality:unstablefrom
AlexVelezLl:immersive-modal-focus-trap
Mar 6, 2026
Merged

Improve accessibility of studio immersive modal#5741
MisRob merged 1 commit into
learningequality:unstablefrom
AlexVelezLl:immersive-modal-focus-trap

Conversation

@AlexVelezLl

@AlexVelezLlAlexVelezLl commented Mar 4, 2026

Copy link
Copy Markdown
Member

Context

While testing some of the Easy Sharing of Community Channels features, I noticed that the StudioImmersiveModal was not trapping the focus, then just completed the PR with other accessibility aspects.

Summary

  • Adds focus trapping for StudioImmersiveModal.
  • Returns the focus to the previously focused element when the modal is closed.
  • Moves the open/close handlers to a watcher of the value prop.
  • Copy the focusUtils module from Kolibri to Studio.
  • Add aria attributes to the modal element.
Grabacion.de.pantalla.2026-03-04.a.la.s.3.08.07.p.m.mov

Reviewer guidance

  • Go to the Notifications page.
  • Notice that focus is trapped correctly now.
  • Check that focus returns to the previously focused element.

@AlexVelezLl
AlexVelezLl requested a review from MisRobMarch 4, 2026 20:12
@MisRobMisRob self-assigned this Mar 6, 2026

@MisRobMisRob left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Apologies that I missed this when this component was introduced & thanks a lot for taking care of it :)

@MisRob

Copy link
Copy Markdown
Member

Code looks meaningful and in manual testing I haven't noticed any problems

@MisRob
MisRob merged commit 90bdb6a into learningequality:unstableMar 6, 2026
23 checks passed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@AlexVelezLl@MisRob@radinamatic