fix: Make various components more accessible

What does this MR do?

This MR adds accessible names to various components to increase their accessibility. The Firefox accessibility dev tool was used to find and confirm the fix of issues (in Firefox, go to Tools > Web Developer > Accessibility, then select the element picker (the top-left button of the dev tool panel), then hover over an element).

I also added a new prop to enable the user to give an accessible name to a dropdown item button.

Screenshots

component	before	after
drawer
dropdown item
path
search box by click
skeleton loader
clear icon button	not focusable before

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