fix: [Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not inc…

…lude secondary information: 0001 (elastic#193961)

Closes: elastic/observability-accessibility#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: elastic#193958 for `Alerts
Detail`

# Screen:

<img width="1274" alt="image"
src="https://github.com/user-attachments/assets/4974a669-67e0-447d-9013-c675299ed75c">

(cherry picked from commit 89f6438)

x-pack/plugins/observability_solution/observability/public/pages/rule_details/components/page_title.tsx → 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() +

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