Moves more mr widget components into vue files

What does this MR do?

1. Moves components into vue files
2. Adds i18n
3. Adds a11y keys
4. Moves a tags with role button into button tags
5. Reuse common components
6. Improve tests

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests added for this feature/bug
• Review
  • Has been reviewed by Frontend
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together
• Internationalization required/considered
• End-to-end tests pass (package-qa manual pipeline job)

What are the relevant issue numbers?

https://gitlab.com/gitlab-org/gitlab-ce/issues/34371