Develop and implement pop-up elements with informational tips, along with continue and skip buttons options within the user interface.

[LianaHarris360]

Overview

To familiarize users with Kolibri's user interface, core functionality, and key features, popover elements containing informational tips after the user has completed the device setup process need to be developed. The component should contain at least one focusable element and is used to display contextual information to users.

Component Outline:

• The component will receive an array of onboarding steps.
• The component will loop through the steps and render the inline tips for each active step. The inline tips will include informational content to guide users through the onboarding process.
• The component responsible for executing each step can use the popper.js library in order to create the popover elements and positioning.
• Users have the option to dismiss the pop-up element by clicking the "X" button.

Accessibility Requirements:

• The popover element must have at least one focusable element inside.
• The popover should be implemented as a keyboard focus trap.
• Pressing the Escape key as well as clicking the close button should close the popover.
• When triggered, user focus should be placed on the first focusable element.