feat(GlListbox): Add pagination/infinite loading to listbox

What does this MR do?

Closes #1956 (closed)

New props

• infinite-scroll - Enables infinite scroll and renders GlIntersectionObserver so that we can detect when bottom of scroll is reached.
• infinite-scroll-loading - Shows loading icon when infinite scroll is loading.
• total-items - The total number of items that exist, even if they are not loaded yet. Used for aria-setsize and aria-posinset. See second to last bullet point in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#wai-aria-roles-states-and-properties-12. This prop is optional because when using a GraphQL API we don't know the total number of items that exist. When using a REST API we do know the total number of items that exist.

New events

• bottom-reached - Fired when bottom of scroll is reached.

Accessibility

Screen_Recording_2022-12-16_at_12.35.19_PM

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: gitlab!107294 (closed)
  • CustomersDot: Component not used
  • Status Page: Component not used
• Added the ~"component:*" label(s) if applicable.

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.