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. A popover is a non-modal dialog. 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 (steps) as a prop. Each onboarding step contains a reference target, information about its content and placement, and whether it's active.
• The component will loop through the steps array 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 entire onboarding process by clicking the "Skip" button. When the button is clicked, a method is triggered, setting the completed property to true.
• Once dismissed/completed, the entire onboarding process is hidden, and users will no longer see the onboarding tips.

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.