Add KFocusTrap and use it in KModal

[MisRob]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Blocks

• Remove FocusTrap in favor of KFocusTrap kolibri#12588

Summary

This issue has two related goals

• Move focus trapping logic from Kolibri to this repository and expose it as a new KFocusTrap component
• Use KFocusTrap within KModal to ensure that users' focus remains contained within the modal interface, preventing accidental interactions with elements outside the modal.

Guidance

(1) Create KFocusTrap

Copy FocusTrap from Kolibri to this repository and name it as KFocusTrap. Follow the guidance for creating a new component.

(2) Wrap the content of KModal in KFocusTrap

// KModal.vue
<template>
  <KFocusTrap>
    <component :is="wrapper" ...>
    ...

(3) Check that the focus trapping works as expected

on the the playground page.

(4) Add a new documentation page for KFocusTrap

• Follow "Create a documentation page for a new component"
• Follow “Writing” guidelines. Use language that is consistent with other documentation pages.
• Describe briefly the focus trapping function
• A live example loosely similar to the ‘default behavior’ on https://focus-trap.github.io/focus-trap/ with code sample would be nice. See DocsShow and DocsShowCode usage on other documentation pages.

The Value Add

Improves accessibility of modals.

Acceptance criteria

• There is KFocusTrap component including a new documentation page
• KFocusTrap is used within KModal and functions as expected
• There are no regressions in KModal

[lokesh-sagi125]

hey @MisRob can you assign this to me?

[MisRob]

Hey @lokesh-sagi125, assigning, thank you for volunteering

[lokesh-sagi125]

hey @MisRob is there any chat server for LE like discord or is it just github?

[lokesh-sagi125]

hey @akolson @MisRob i keep getting this particular linting issue even though i added the blank lines. ,couldn't find the solution in the documentation , what should i do to fix this?.

[akolson]

Its most likely the line spacing before the <script> tag -- they must be 2 lines. Also the script tag should be at the start of the line and no spaces before it. For example,

<template>
    ...
</template>


<script>
    ...
</script>

[MisRob]

hey @MisRob is there any chat server for LE like discord or is it just github?

@lokesh-sagi125 Yes, we have a Slack channel for the community of contributors. You're welcome to send an e-mail to [email protected] to receive an invitation.

[iamshobhraj]

@MisRob Can you please assign this issue to me.

[AlexVelezLl]

Hey @iamshobhraj! Thanks for your interest in contributing to this issue! Unfortunately, this is already assigned. But you’re welcome to find a "help wanted" issue with no assignee :).