[7.x] [Logs + Metrics UI] Add missing headers in Logs & metric… (#52728)

* Fix broken aria references

`EuiDescribedFormGroup` needs an actual header in its `title` for it to
make a correct `aria-labelledby`.

* Fix `aria-labelledby` references in settings page


Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: Alejandro Fernández

x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx

@@ -50,10 +50,12 @@ export const FieldsConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="timestampField"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.timestampFieldLabel"
-          defaultMessage="Timestamp"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.timestampFieldLabel"
+            defaultMessage="Timestamp"
+          />
+        </h4>
       }
       description={
         <FormattedMessage
@@ -95,10 +97,12 @@ export const FieldsConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="tiebreakerField"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.tiebreakerFieldLabel"
-          defaultMessage="Tiebreaker"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.tiebreakerFieldLabel"
+            defaultMessage="Tiebreaker"
+          />
+        </h4>
       }
       description={
         <FormattedMessage
@@ -140,10 +144,12 @@ export const FieldsConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="containerField"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.containerFieldLabel"
-          defaultMessage="Container ID"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.containerFieldLabel"
+            defaultMessage="Container ID"
+          />
+        </h4>
       }
       description={
         <FormattedMessage
@@ -185,10 +191,12 @@ export const FieldsConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="hostNameField"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.hostNameFieldLabel"
-          defaultMessage="Host name"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.hostNameFieldLabel"
+            defaultMessage="Host name"
+          />
+        </h4>
       }
       description={
         <FormattedMessage
@@ -230,10 +238,12 @@ export const FieldsConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="podField"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.podFieldLabel"
-          defaultMessage="Pod ID"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.podFieldLabel"
+            defaultMessage="Pod ID"
+          />
+        </h4>
       }
       description={
         <FormattedMessage

x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx

@@ -42,12 +42,14 @@ export const IndicesConfigurationPanel = ({
     </EuiTitle>
     <EuiSpacer size="m" />
     <EuiDescribedFormGroup
-      idAria="matricIndices"
+      idAria="metricIndices"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.metricIndicesTitle"
-          defaultMessage="Metric indices"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.metricIndicesTitle"
+            defaultMessage="Metric indices"
+          />
+        </h4>
       }
       description={
         <FormattedMessage
@@ -90,10 +92,12 @@ export const IndicesConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="logIndices"
       title={
-        <FormattedMessage
-          id="xpack.infra.sourceConfiguration.logIndicesTitle"
-          defaultMessage="Log indices"
-        />
+        <h4>
+          <FormattedMessage
+            id="xpack.infra.sourceConfiguration.logIndicesTitle"
+            defaultMessage="Log indices"
+          />
+        </h4>
       }
       description={
         <FormattedMessage

x-pack/legacy/plugins/infra/public/components/source_configuration/name_configuration_panel.tsx

@@ -41,7 +41,9 @@ export const NameConfigurationPanel = ({
     <EuiDescribedFormGroup
       idAria="name"
       title={
-        <FormattedMessage id="xpack.infra.sourceConfiguration.nameLabel" defaultMessage="Name" />
+        <h4>
+          <FormattedMessage id="xpack.infra.sourceConfiguration.nameLabel" defaultMessage="Name" />
+        </h4>
       }
       description={
         <FormattedMessage

x-pack/legacy/plugins/infra/public/pages/logs/analysis/setup/initial_configuration_step/analysis_setup_indices_form.tsx

@@ -62,10 +62,12 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
     <EuiDescribedFormGroup
       idAria="indices"
       title={
-        <FormattedMessage
-          id="xpack.infra.analysisSetup.indicesSelectionTitle"
-          defaultMessage="Choose indices"
-        />
+        <h3>
+          <FormattedMessage
+            id="xpack.infra.analysisSetup.indicesSelectionTitle"
+            defaultMessage="Choose indices"
+          />
+        </h3>
       }
       description={
         <FormattedMessage

x-pack/legacy/plugins/infra/public/pages/logs/analysis/setup/initial_configuration_step/analysis_setup_timerange_form.tsx

@@ -63,10 +63,12 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
     <EuiDescribedFormGroup
       idAria="timeRange"
       title={
-        <FormattedMessage
-          id="xpack.infra.analysisSetup.timeRangeTitle"
-          defaultMessage="Choose a time range"
-        />
+        <h3>
+          <FormattedMessage
+            id="xpack.infra.analysisSetup.timeRangeTitle"
+            defaultMessage="Choose a time range"
+          />
+        </h3>
       }
       description={
         <FormattedMessage