fix: [Stateful: Home page] Create an API key dialog information annou…

…ncement duplication (elastic#196133)

Closes: elastic#195754
Closes: elastic#195252

## Description
Information about an element (in this case, a dialog) should be
announced once to the user. If the user navigates to another element and
then returns to the same dialog, they should hear the information about
the dialog again (one time).

## What was changed?:

1. Added `aria-labelledby` for `EuiFlyout` based on the EUI
recommendation. This will correctly pronounce the Flyout header without
extra text.
2. Added `aria-labelledby` and `role="region"` for `EuiAccordion` for
the same reason.

## Screen: 

<img width="1792" alt="image"
src="https://github.com/user-attachments/assets/8a7ba05f-381a-4bb1-81fc-eb2c5fdb9fb0">

x-pack/plugins/enterprise_search/public/applications/shared/api_key/create_api_key_flyout.tsx

@@ -32,6 +32,7 @@ import {
   EuiSwitchEvent,
   EuiText,
   EuiTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -161,6 +162,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
 
   const apiKeyRef = useRef<HTMLDivElement>(null);
 
+  const uniqueId = useGeneratedHtmlId();
+
   useEffect(() => {
     if (createdApiKey && apiKeyRef) {
       apiKeyRef.current?.scrollIntoView();
@@ -178,10 +181,11 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
       css={css`
         max-width: calc(${euiTheme.size.xxxxl} * 10);
       `}
+      aria-labelledby={`${uniqueId}-header`}
     >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
-          <h2>
+          <h2 id={`${uniqueId}-header`}>
             {i18n.translate('xpack.enterpriseSearch.apiKey.flyoutTitle', {
               defaultMessage: 'Create an API key',
             })}
@@ -239,6 +243,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
             id="apiKey.setup"
             paddingSize="l"
             initialIsOpen
+            aria-labelledby={`${uniqueId}-setupHeader`}
+            role="region"
             buttonContent={
               <div>
                 <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
@@ -247,7 +253,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiTitle size="xs">
-                      <h4>
+                      <h4 id={`${uniqueId}-setupHeader`}>
                         {i18n.translate('xpack.enterpriseSearch.apiKey.setup.title', {
                           defaultMessage: 'Setup',
                         })}
@@ -283,6 +289,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
           <EuiAccordion
             id="apiKey.privileges"
             paddingSize="l"
+            role="region"
+            aria-labelledby={`${uniqueId}-privilegesHeader`}
             buttonContent={
               <div style={{ paddingRight: euiTheme.size.s }}>
                 <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
@@ -291,7 +299,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiTitle size="xs">
-                      <h4>
+                      <h4 id={`${uniqueId}-privilegesHeader`}>
                         {i18n.translate('xpack.enterpriseSearch.apiKey.privileges.title', {
                           defaultMessage: 'Security Privileges',
                         })}
@@ -338,6 +346,8 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
           <EuiAccordion
             id="apiKey.metadata"
             paddingSize="l"
+            role="region"
+            aria-labelledby={`${uniqueId}-metadataHeader`}
             buttonContent={
               <div style={{ paddingRight: euiTheme.size.s }}>
                 <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
@@ -346,7 +356,7 @@ export const CreateApiKeyFlyout: React.FC<CreateApiKeyFlyoutProps> = ({ onClose
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiTitle size="xs">
-                      <h4>
+                      <h4 id={`${uniqueId}-metadataHeader`}>
                         {i18n.translate('xpack.enterpriseSearch.apiKey.metadata.title', {
                           defaultMessage: 'Metadata',
                         })}