Let's teleport + make 'sidebar' icon flip in RTL languages

[MisRob]

Description

Adds support for teleporting that is performant and simple to use.

• The teleport root element is inserted to an application's document body during KDS initialization
  • Removes the need for manual insert
  • Ensures we never attach teleported elements, such as tooltips, to document.body itself, which is said to cause severe performance problems (https://css-tricks.com/dont-attach-tooltips-to-document-body/)
• Adds new KTeleport component
  • Wrapper around vue2-teleport's Teleport with restricted API that only allows teleporting to the KDS teleport root element.
  • Removes Teleport in favor of KTeleport in KModal
• Adds appendToRoot prop to KTooltip
  • In support of Studio migration to KDS where in a few instances, teleport is needed for tooltips to display correctly (https://github.com/learningequality/studio/pull/4633)
  • Contains smaller refactor of Popper.vue to allow the tooltip be attached to an element different from document.body

Additional minor changes:

• Removes unnecessary live region mount from the useKLiveRegion documentation page
• Make the sidebar icon flip in RTL languages

Changelog

• #722
  • Description: Inserts the teleport root element to an application's document body during KDS initialization.
  • Products impact: KDS initialization
  • Addresses: -
  • Components: -
  • Breaking: no
  • Impacts a11y: no
  • Guidance: Remove any custom teleportation logic and use new KDS components and props instead.

• #722
  • Description: Adds new KTeleport component
  • Products impact: New API
  • Addresses: -
  • Components: KTeleport
  • Breaking: no
  • Impacts a11y: no
  • Guidance: -

• #722
  • Description: Adds new prop, appendToRoot, to KTooltip
  • Products impact: New API
  • Addresses: -
  • Components: KTooltip
  • Breaking: no
  • Impacts a11y: no
  • Guidance: -

• #722
  • Description: Makes the sidebar icon flip in RTL languages
  • Products impact: Bugfix
  • Addresses: -
  • Components: Icons
  • Breaking: no
  • Impacts a11y: yes
  • Guidance: -

References

Motivated by https://github.com/learningequality/studio/pull/4633 and some recent discussions with @rtibbles and @AlexVelezLl about the ways we used to teleport.

Steps to test

• Can you find any regressions in KTooltip's and KModal's?
• Is the teleport root region properly mounted?
• Can you observe any performance problems?
• Preview documentation
  • https://deploy-preview-722--kolibri-design-system.netlify.app/kteleport/
  • https://deploy-preview-722--kolibri-design-system.netlify.app/installation/

Implementation notes

I used similar approach to inserting live regions. There's a composable that encapsulates all logic related to mounting and retrieving the teleport root element. It is implemented in a way that minimizes querying DOM as much as I could think of.

Testing checklist

• [x] Contributor has fully tested the PR manually
• [ ] ~If there are any front-end changes, before/after screenshots are included~
• [x] Critical and brittle code paths are covered by unit tests
• [x] The change is described in the changelog section above

Reviewer guidance

• [ ] Is the code clean and well-commented?
• [ ] Are there tests for this change?
• [ ] Are all UI components LTR and RTL compliant (if applicable)?
• [ ] Add other things to check for here

After review

• [x] The changelog item has been pasted to the CHANGELOG.md