[ResponseOps][SCREEN READER]Headings must be nested properly for SR usability (#209530)

Closes https://github.com/elastic/kibana/issues/195005
Closes https://github.com/elastic/kibana/issues/195004

## Summary

- issue 195005: 
    - tabs are now p instead of h2
<img width="1512" alt="Screenshot 2025-02-18 at 10 32 58"
src="https://github.com/user-attachments/assets/ae7eedc5-e18d-4eeb-9fe8-46469e45ba3e"
/>



- issue 195004: 
    - the headers in the Cases -> Settings page are now h2
<img width="2267" alt="Screenshot 2025-02-18 at 10 36 34"
src="https://github.com/user-attachments/assets/85d5276c-ed88-4ae0-8832-c0886577ed1a"
/>

x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_tabs.tsx

@@ -6,14 +6,7 @@
  */
 
 import type { EuiThemeComputed } from '@elastic/eui';
-import {
-  EuiNotificationBadge,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiTitle,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiNotificationBadge, EuiSpacer, EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { css } from '@emotion/react';
 import { CASE_VIEW_PAGE_TABS } from '../../../common/types';
@@ -33,14 +26,6 @@ import { ExperimentalBadge } from '../experimental_badge/experimental_badge';
 import { useGetSimilarCases } from '../../containers/use_get_similar_cases';
 import { useCasesFeatures } from '../../common/use_cases_features';
 
-const TabTitle = ({ title }: { title: string }) => (
-  <EuiTitle size="xxs">
-    <h2 className="eui-displayInline">{title}</h2>
-  </EuiTitle>
-);
-
-TabTitle.displayName = 'TabTitle';
-
 const FilesBadge = ({
   activeTab,
   fileStatsData,
@@ -260,7 +245,7 @@ export const CaseViewTabs = React.memo<CaseViewTabsProps>(({ caseData, activeTab
         onClick={() => navigateToCaseView({ detailName: caseData.id, tabId: tab.id })}
         isSelected={tab.id === activeTab}
       >
-        <TabTitle title={tab.name} />
+        {tab.name}
         {tab.badge ?? null}
       </EuiTab>
     ));

x-pack/platform/plugins/shared/cases/public/components/configure_cases/closure_options.tsx

@@ -25,7 +25,7 @@ const ClosureOptionsComponent: React.FC<ClosureOptionsProps> = ({
 }) => (
   <EuiDescribedFormGroup
     fullWidth
-    title={<h3>{i18n.CASE_CLOSURE_OPTIONS_TITLE}</h3>}
+    title={<h2>{i18n.CASE_CLOSURE_OPTIONS_TITLE}</h2>}
     description={
       <>
         <p>{i18n.CASE_CLOSURE_OPTIONS_DESC}</p>

x-pack/platform/plugins/shared/cases/public/components/configure_cases/connectors.tsx

@@ -91,7 +91,7 @@ const ConnectorsComponent: React.FC<Props> = ({
     <>
       <EuiDescribedFormGroup
         fullWidth
-        title={<h3>{i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}</h3>}
+        title={<h2>{i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}</h2>}
         description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC}
         data-test-subj="case-connectors-form-group"
       >

x-pack/platform/plugins/shared/cases/public/components/custom_fields/index.tsx

@@ -64,7 +64,7 @@ const CustomFieldsComponent: React.FC<Props> = ({
   return (
     <EuiDescribedFormGroup
       fullWidth
-      title={<h3>{i18n.TITLE}</h3>}
+      title={<h2>{i18n.TITLE}</h2>}
       description={<p>{i18n.DESCRIPTION}</p>}
       data-test-subj="custom-fields-form-group"
       css={{ alignItems: 'flex-start' }}

x-pack/platform/plugins/shared/cases/public/components/observable_types/index.tsx

@@ -61,7 +61,9 @@ const ObservableTypesComponent: React.FC<ObservableTypesProps> = ({
       fullWidth
       title={
         <EuiFlexGroup alignItems="center" gutterSize="none">
-          <EuiFlexItem grow={false}>{i18n.TITLE}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <h2>{i18n.TITLE}</h2>
+          </EuiFlexItem>
         </EuiFlexGroup>
       }
       description={<p>{i18n.DESCRIPTION}</p>}

x-pack/platform/plugins/shared/cases/public/components/templates/index.tsx

@@ -70,7 +70,9 @@ const TemplatesComponent: React.FC<Props> = ({
       fullWidth
       title={
         <EuiFlexGroup alignItems="center" gutterSize="none">
-          <EuiFlexItem grow={false}>{i18n.TEMPLATE_TITLE}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <h2>{i18n.TEMPLATE_TITLE}</h2>
+          </EuiFlexItem>
         </EuiFlexGroup>
       }
       description={<p>{i18n.TEMPLATE_DESCRIPTION}</p>}