[8.18] fix: [Analytics:Visualize Library page]Dialog modal missing title from announcement (elastic#217829) (elastic#218444)

# Backport

This will backport the following commits from `main` to `8.18`:
- [fix: [Analytics:Visualize Library page]Dialog modal missing title
from announcement
(elastic#217829)](elastic#217829)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-16T13:19:03Z","message":"fix:
[Analytics:Visualize Library page]Dialog modal missing title from
announcement (elastic#217829)\n\nCloses: elastic#215112\n\n**Description**\nDialog
modal, flyout, field visible title should be announced for the\nusers,
especially using assistive technology to know what dialog modal,\nflyout
opened, what field is active and what is needed to enter in
it.\n\n**Changes made:**\n\n1. Added `aria-labelledby={flyoutTitleId}`
for mentioned
places","sha":"bf7389f515480a4d518e3a238c5fd54caac033f7","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","backport:prev-major","v9.1.0"],"title":"fix:
[Analytics:Visualize Library page]Dialog modal missing title from
announcement","number":217829,"url":"https://github.com/elastic/kibana/pull/217829","mergeCommit":{"message":"fix:
[Analytics:Visualize Library page]Dialog modal missing title from
announcement (elastic#217829)\n\nCloses: elastic#215112\n\n**Description**\nDialog
modal, flyout, field visible title should be announced for the\nusers,
especially using assistive technology to know what dialog modal,\nflyout
opened, what field is active and what is needed to enter in
it.\n\n**Changes made:**\n\n1. Added `aria-labelledby={flyoutTitleId}`
for mentioned
places","sha":"bf7389f515480a4d518e3a238c5fd54caac033f7"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217829","number":217829,"mergeCommit":{"message":"fix:
[Analytics:Visualize Library page]Dialog modal missing title from
announcement (elastic#217829)\n\nCloses: elastic#215112\n\n**Description**\nDialog
modal, flyout, field visible title should be announced for the\nusers,
especially using assistive technology to know what dialog modal,\nflyout
opened, what field is active and what is needed to enter in
it.\n\n**Changes made:**\n\n1. Added `aria-labelledby={flyoutTitleId}`
for mentioned
places","sha":"bf7389f515480a4d518e3a238c5fd54caac033f7"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>

Author: kibanamachine

src/platform/plugins/shared/visualizations/public/wizard/agg_based_selection/agg_based_selection.tsx

@@ -58,7 +58,7 @@ class AggBasedSelection extends React.Component<AggBasedSelectionProps, AggBased
     return (
       <>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="vis-wizard-modal-title">
             <FormattedMessage
               id="visualizations.newAggVisWizard.title"
               defaultMessage="New aggregation based visualization"

src/platform/plugins/shared/visualizations/public/wizard/group_selection/group_selection.tsx

@@ -128,7 +128,7 @@ function GroupSelection({
   return (
     <>
       <EuiModalHeader>
-        <EuiModalHeaderTitle data-test-subj="groupModalHeader">
+        <EuiModalHeaderTitle data-test-subj="groupModalHeader" id="vis-wizard-modal-title">
           <FormattedMessage
             id="visualizations.newVisWizard.title"
             defaultMessage="Create visualization"

src/platform/plugins/shared/visualizations/public/wizard/new_vis_modal.tsx

@@ -10,7 +10,6 @@
 import React from 'react';
 
 import { EuiModal } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 
 import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
 import { ApplicationStart, DocLinksStart, IUiSettingsClient } from '@kbn/core/public';
@@ -80,19 +79,15 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
       return null;
     }
 
-    const visNewVisDialogAriaLabel = i18n.translate(
-      'visualizations.newVisWizard.helpTextAriaLabel',
-      {
-        defaultMessage:
-          'Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further.',
-      }
-    );
-
     const WizardComponent = this.state.isMainDialogShown ? GroupSelection : AggBasedSelection;
 
     const selectionModal =
       this.state.showSearchVisModal && this.state.visType ? (
-        <EuiModal onClose={this.onCloseModal} className="visNewVisSearchDialog">
+        <EuiModal
+          onClose={this.onCloseModal}
+          className="visNewVisSearchDialog"
+          aria-labelledby="vis-wizard-modal-title"
+        >
           <SearchSelection
             contentClient={this.props.contentClient}
             uiSettings={this.props.uiSettings}
@@ -105,7 +100,7 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
         <EuiModal
           onClose={this.onCloseModal}
           className={this.state.isMainDialogShown ? 'visNewVisDialog' : 'visNewVisDialog--aggbased'}
-          aria-label={visNewVisDialogAriaLabel}
+          aria-labelledby="vis-wizard-modal-title"
         >
           <WizardComponent
             onVisTypeSelected={this.onVisTypeSelected}

src/platform/plugins/shared/visualizations/public/wizard/search_selection/search_selection.tsx

@@ -32,7 +32,7 @@ export class SearchSelection extends React.Component<SearchSelectionProps> {
     return (
       <React.Fragment>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="vis-wizard-modal-title">
             <FormattedMessage
               id="visualizations.newVisWizard.newVisTypeTitle"
               defaultMessage="New {visTypeName}"

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -10161,7 +10161,6 @@
     "visualizations.newVisWizard.chooseSourceTitle": "Choisir une source",
     "visualizations.newVisWizard.filterVisTypeAriaLabel": "Filtrer un type de visualisation",
     "visualizations.newVisWizard.goBackLink": "Sélectionner une visualisation différente",
-    "visualizations.newVisWizard.helpTextAriaLabel": "Commencez à créer votre visualisation en sélectionnant un type pour cette visualisation. Appuyez sur Échap pour fermer ce mode. Appuyez sur Tab pour aller plus loin.",
     "visualizations.newVisWizard.learnMoreText": "Envie d'en savoir plus ?",
     "visualizations.newVisWizard.legacyTab": "Hérité",
     "visualizations.newVisWizard.legacyTabDescription": "Les visualisations héritées devraient être obsolètes à l’avenir.",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -10151,7 +10151,6 @@
     "visualizations.newVisWizard.chooseSourceTitle": "ソースの選択",
     "visualizations.newVisWizard.filterVisTypeAriaLabel": "ビジュアライゼーションのタイプでフィルタリング",
     "visualizations.newVisWizard.goBackLink": "別のビジュアライゼーションを選択",
-    "visualizations.newVisWizard.helpTextAriaLabel": "タイプを選択してビジュアライゼーションの作成を始めましょう。ESC を押してこのモーダルを閉じます。Tab キーを押して次に進みます。",
     "visualizations.newVisWizard.learnMoreText": "詳細について",
     "visualizations.newVisWizard.legacyTab": "レガシー",
     "visualizations.newVisWizard.legacyTabDescription": "廃止予定には、今後、レガシービジュアライゼーションが予定されています。",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -10169,7 +10169,6 @@
     "visualizations.newVisWizard.chooseSourceTitle": "选择源",
     "visualizations.newVisWizard.filterVisTypeAriaLabel": "筛留可视化类型",
     "visualizations.newVisWizard.goBackLink": "选择不同的可视化",
-    "visualizations.newVisWizard.helpTextAriaLabel": "通过为该可视化选择类型，开始创建您的可视化。按 Esc 键关闭此模式。按 Tab 键继续。",
     "visualizations.newVisWizard.learnMoreText": "希望了解详情？",
     "visualizations.newVisWizard.legacyTab": "旧版",
     "visualizations.newVisWizard.legacyTabDescription": "计划在未来弃用旧版可视化。",