Ensure all modals have headers

[microbit-robert]

Uses a new DialogHeading component with title slot to ensure that these are used to label the dialog. We have header props for GenericDialog that are never used since they change the appearance of the dialogs. We continue to avoid using them here as I'm not sure there's a nice way to use them while maintaining the existing styling and positing of the h2 elements.

About and feedback don't look amazing:

See See microbit-foundation/ui#29

[github-actions]

Preview build will be at
https://review-python-editor-v3.microbit.org/dialog-headers/

[microbit-matt-hillsdon]

Interesting. So it's too visually different to align them with dialogs using ModalHeader?

I think we'll have to use aria-label (or whatever it is) for About/Feedback. Feedback we can fix in time by dropping the form embed.

[microbit-robert]

Interesting. So it's too visually different to align them with dialogs using ModalHeader?

I think we'll have to use aria-label (or whatever it is) for About/Feedback. Feedback we can fix in time by dropping the form embed.

Hmm yeah, we could do it but it's a bit awkward to keep the existing layout / spacing. An example for one header, but we could have this as a component.

header={
  <styled.span display="block" px="5" pt="3" mb="-6">
    <FormattedMessage id="connect-cable-title"/>
  </styled.span>
}

If the library dialog header or body padding changes then this will drift and need re-calculating.

[microbit-matt-hillsdon]

Discussed with Rob. The right fix here is a reworking of the dialogs to align with the more normal use in ml-trainer. But this will require visual change to the heading location (e.g. relative to the close button) and reworking the padding around each dialog. I think it's worth doing but this change is a clear improvement without requiring us to discuss the visual aspect so let's get it in first then raise an issue in this repo for the rest.

[microbit-robert]

Raised issue as #1262