Button in a button

[niik]

In #18268 we started rendering the pr-badge component as a <button> where before it was a <div>. This causes some validation error because the toolbar button is already a button and buttons can't contain other buttons.

app.tsx:274 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
    in button (created by Button)
    in Button (created by PullRequestBadge)
    in PullRequestBadge (created by BranchDropdown)
    in button (created by Button)
    in Button (created by ToolbarButton)
    in div (created by ToolbarButton)
    in ToolbarButton (created by ToolbarDropdown)
    in div (created by ToolbarDropdown)
    in ToolbarDropdown (created by BranchDropdown)
    in BranchDropdown (created by App)
    in div (created by Toolbar)
    in Toolbar (created by App)
    in div (created by App)
    in div (created by App)
    in App

Now I'm not certain how to best resolve this since the component is in fact a button in a button and even though I procrastinated on reviews for long enough to write this issue up not even I, a top notch procrastinator, can justify fixing this until I've done my reviews.

cc @tidy-dev

[tidy-dev]

Note: This is also known to be bad from an accessibility stand point for keyboard and screen reader users. I think the only way to address is to refactor the UI and put this somewhere else... but I don't have a good suggestion as to where. I think moving the badge out will also be good UI/UX even if not a button since it currently crowds the branch name.