Draft: feat: Add GlDisclosure component - 1st iteration

What does this MR do?

Based on accessibility audit GlDropdown component does not meet some accessibility criteria. It would be hard to impossible to implement all its requirements in a single component that is why we're working to split it into 4 different components each one covering a specific "dropdown" case but with better semantics. More details.

This MR is dedicated to one of the 4 components - disclosure.

Disclosure: A disclosure dropdown is a button that toggles a panel containing a list of links or navigational items where each item has its own tab stop. If a dropdown contains both a link and an action, it should be a disclosure with a tab stop for each item.

This iteration extracts Disclosure and its Item into separate components copying code from GlDropdown/Item and removing unnecessary code and fixing some semantic/accessibility issues.

Improvements in comparison with GlDropdown

Accessibilty:

• added items prop to the component based on which the list of links will be rendered
• removed role="menu" from container
• removed role="menuitem" from the item
• removed div wrapper inside the ul as well as a main content div wrapper

Other:

• The component stories were migrated to CSF and have 2 main use cases - a simple list of links and list with links and action.

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: mr_url
  • CustomersDot: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• Security reports checked/validated by a reviewer from the AppSec team

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.

Contributes to #1632 (closed)