Fix DOM and visual order mismatch in the various media dialogs

[afercia]

In the various media dialog, the buttons in the top toolbar come first in the DOM order but they are visually placed after the main dialog heading on the left.

This introduces a mismatch between the DOM order and visual order that is an accessibility barrier for screen reader users. Note that this has nothing to do with Tab keyboard navigation. Rather, it's about navigating content with arrows keys or other screen readers navigation mechanisms (e.g. 'read all').

Worth also noting that any other software will get the order mismatch, including AI agents.

For example in the Media Library 'Edit attachments' modal dialog, the edit-media-header element, which contains the 3 buttons Previous, Next, and Close, comes before the media-frame-title element, which contains the H1 heading. As such, when navigating content following the DOM source there is a mismatch between the DOM and the visual order.

Same in the media dialog, where the media-modal-close button is before the H1 heading in the DOM.

It's also worth noting that now that initial focus is set on the modal dialog element, there is no need for the buttons to be the first thing within the dialog.

[afercia]

Screenshot to better illustrate the order issue