Vue Dialog Focus trap

vue-dialog-focus-trap.md

Requirements

• export as vue component
• active or similar boolean prop to enable/disable trap
• focus first focusable element within children of components
• traps user focus within the element.
• optional: prop to specify element to focus on
• optional: prop to specify element focus on when disabled

Options

• https://github.com/theKashey/vue-focus-lock - 3.1 kb
  • causes https://github.com/theKashey/focus-lock/#focus-fighting when 2 components have FocusLock wrapped around them.
• https://github.com/posva/focus-trap-vue - 2.3kb with peer dependency https://github.com/davidtheclark/focus-trap (2kb)
  • individually manage focus toggling when wrapped around 2 components
  • When activated, does not focus initially, can be given initialFocus: string | (() => Element)
  • Selector or function returning an Element prop.
  • Makes it hard to get refs of elements passed as slots and nested elements
  • When there is more than 1 component active, it does not work. Manually toggling the active prop so that only 1 component is active, does work.

Result

• Chose to go with https://github.com/posva/focus-trap-vue
• Implemented in https://app.hireup.com.au/argos-shared/storybooks/component-library/?path=/story/components-dialog-modal--default