From 89f64384ef513ae00fcd71a8eb3b797c95a4c36f Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Fri, 27 Sep 2024 14:27:27 +0300
Subject: [PATCH] fix: [Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should
 not include secondary information: 0001 (#193961)

Closes: https://github.com/elastic/observability-accessibility/issues/61

# Description

Observability has a few pages that wrap related information like alert
counts in the H1 tag. This presents a challenge to screen readers
because all of that information now becomes the heading level one. It
clogs up the Headings menu and makes it harder to reason about the page
and what's primary information vs. secondary.

# What was changed?:

- `pageTitle` was renamed to `pageTitleContent`. The title portion was
moved out of that component.
- `ObservabilityPageTemplate.pageHeader` for the `Alert Detail` page was
updated to separate the title from the other content.

> [!NOTE]
> Related PR: https://github.com/elastic/kibana/pull/193958 for `Alerts
Detail`

# Screen:

<img width="1274" alt="image"
src="https://github.com/user-attachments/assets/4974a669-67e0-447d-9013-c675299ed75c">
---
 .../{page_title.tsx => page_title_content.tsx}         | 10 ++--------
 .../public/pages/rule_details/rule_details.tsx         |  8 ++++++--
 2 files changed, 8 insertions(+), 10 deletions(-)
 rename x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/{page_title.tsx => page_title_content.tsx} (89%)

diff --git a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title_content.tsx
similarity index 89%
rename from x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx
rename to x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title_content.tsx
index f951ffdff44ba5..fe53dd84c48d18 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title_content.tsx
@@ -12,24 +12,18 @@ import type { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import { useKibana } from '../../../utils/kibana_react';
 import { getHealthColor } from '../helpers/get_health_color';
 
-interface PageTitleProps {
+interface PageTitleContentProps {
   rule: Rule;
 }
 
-export function PageTitle({ rule }: PageTitleProps) {
+export function PageTitleContent({ rule }: PageTitleContentProps) {
   const {
     triggersActionsUi: { getRuleTagBadge: RuleTagBadge },
   } = useKibana().services;
 
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem grow={false} data-test-subj="ruleName">
-          {rule.name}
-        </EuiFlexItem>
-      </EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <EuiSpacer size="m" />
         <EuiText size="xs">
           <EuiBadge color={getHealthColor(rule.executionStatus.status)}>
             {rule.executionStatus.status.charAt(0).toUpperCase() +
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
index 31ae9e41d05291..e8270434c12b21 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
@@ -18,7 +18,7 @@ import { usePluginContext } from '../../hooks/use_plugin_context';
 import { useFetchRule } from '../../hooks/use_fetch_rule';
 import { useFetchRuleTypes } from '../../hooks/use_fetch_rule_types';
 import { useGetFilteredRuleTypes } from '../../hooks/use_get_filtered_rule_types';
-import { PageTitle } from './components/page_title';
+import { PageTitleContent } from './components/page_title_content';
 import { DeleteConfirmationModal } from './components/delete_confirmation_modal';
 import { CenterJustifiedSpinner } from '../../components/center_justified_spinner';
 import { NoRuleFoundPanel } from './components/no_rule_found_panel';
@@ -200,7 +200,11 @@ export function RuleDetailsPage() {
     <ObservabilityPageTemplate
       data-test-subj="ruleDetails"
       pageHeader={{
-        pageTitle: <PageTitle rule={rule} />,
+        pageTitle: rule.name,
+        pageTitleProps: {
+          'data-test-subj': 'ruleName',
+        },
+        children: <PageTitleContent rule={rule} />,
         bottomBorder: false,
         rightSideItems: [
           <HeaderActions