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

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][SCREEN READER]Headings must be nested properly for SR
usability (#209530)](https://github.com/elastic/kibana/pull/209530)

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

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

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"georgiana.onoleata@elastic.co"},"sourceCommit":{"committedDate":"2025-02-19T12:17:04Z","message":"[ResponseOps][SCREEN
READER]Headings must be nested properly for SR usability
(#209530)\n\nCloses
https://github.com/elastic/kibana/issues/195005\nCloses
https://github.com/elastic/kibana/issues/195004\n\n## Summary\n\n- issue
195005: \n - tabs are now p instead of h2\n<img width=\"1512\"
alt=\"Screenshot 2025-02-18 at 10 32
58\"\nsrc=\"https://github.com/user-attachments/assets/ae7eedc5-e18d-4eeb-9fe8-46469e45ba3e\"\n/>\n\n\n\n-
issue 195004: \n - the headers in the Cases -> Settings page are now
h2\n<img width=\"2267\" alt=\"Screenshot 2025-02-18 at 10 36
34\"\nsrc=\"https://github.com/user-attachments/assets/85d5276c-ed88-4ae0-8832-c0886577ed1a\"\n/>","sha":"4d5801b8a2e326a4e68154b580b6b8684dbfa69d","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:ResponseOps","backport:version","v9.1.0","v8.19.0"],"title":"[ResponseOps][SCREEN
READER]Headings must be nested properly for SR
usability","number":209530,"url":"https://github.com/elastic/kibana/pull/209530","mergeCommit":{"message":"[ResponseOps][SCREEN
READER]Headings must be nested properly for SR usability
(#209530)\n\nCloses
https://github.com/elastic/kibana/issues/195005\nCloses
https://github.com/elastic/kibana/issues/195004\n\n## Summary\n\n- issue
195005: \n - tabs are now p instead of h2\n<img width=\"1512\"
alt=\"Screenshot 2025-02-18 at 10 32
58\"\nsrc=\"https://github.com/user-attachments/assets/ae7eedc5-e18d-4eeb-9fe8-46469e45ba3e\"\n/>\n\n\n\n-
issue 195004: \n - the headers in the Cases -> Settings page are now
h2\n<img width=\"2267\" alt=\"Screenshot 2025-02-18 at 10 36
34\"\nsrc=\"https://github.com/user-attachments/assets/85d5276c-ed88-4ae0-8832-c0886577ed1a\"\n/>","sha":"4d5801b8a2e326a4e68154b580b6b8684dbfa69d"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/209530","number":209530,"mergeCommit":{"message":"[ResponseOps][SCREEN
READER]Headings must be nested properly for SR usability
(#209530)\n\nCloses
https://github.com/elastic/kibana/issues/195005\nCloses
https://github.com/elastic/kibana/issues/195004\n\n## Summary\n\n- issue
195005: \n - tabs are now p instead of h2\n<img width=\"1512\"
alt=\"Screenshot 2025-02-18 at 10 32
58\"\nsrc=\"https://github.com/user-attachments/assets/ae7eedc5-e18d-4eeb-9fe8-46469e45ba3e\"\n/>\n\n\n\n-
issue 195004: \n - the headers in the Cases -> Settings page are now
h2\n<img width=\"2267\" alt=\"Screenshot 2025-02-18 at 10 36
34\"\nsrc=\"https://github.com/user-attachments/assets/85d5276c-ed88-4ae0-8832-c0886577ed1a\"\n/>","sha":"4d5801b8a2e326a4e68154b580b6b8684dbfa69d"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <georgiana.onoleata@elastic.co>

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>}