Summary

This PR implements automatic ARIA labeling for flyouts with menus.

Why are we making this change?

1. This change makes it easier for developers to have a correct parent-child labeling relationships between flyout containers and their titles.
2. Developers can provide a custom aria-labelledby value to their flyout, or a custom titleId value in flyoutMenuProps if needed.

Impact to users

1. Existing flyouts continue to work without code changes.

2. Developers that migrate EuiFlyout instances to use the session=true prop will not have to do extra work to carry over proper ARIA labeling.

   Consider the following diff. The "before" code manually constructs an ARIA label relationship between the EuiFlyout component and the h2. In the "after" code, that manual construction is not necessary, as the flyout title is taken from flyoutMenuProps. The changes in this PR ensure that the correct ARIA label relationship happens automatically.

   -   <EuiFlyout ownFocus onClose={onClose} size="s" aria-labelledby={titleId}>
   -     <EuiFlyoutHeader hasBorder>
   -       <EuiTitle size="m">
   -         <h2 id={titleId}>{i18nTexts.diagnosticsFlyoutTitle}</h2>
   -       </EuiTitle>
   -     </EuiFlyoutHeader>
   +   <EuiFlyout
   +     ownFocus
   +     onClose={onClose}
   +     size="s"
   +     session={true}
   +     flyoutMenuProps={{ title: i18nTexts.diagnosticsFlyoutTitle }}
   +   >

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)