From 97cb4ad11458ffd2a4bbac7d64b20294af8c4640 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 27 Sep 2024 22:48:21 +1000
Subject: [PATCH] [8.x] fix: [Obs Alerts &gt; Rule Detail][SCREEN READER]: H1
 tag should not include secondary information: 0001 (#193961) (#194288)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Obs Alerts &gt; Rule Detail][SCREEN READER]: H1 tag should not
include secondary information: 0001
(#193961)](https://github.com/elastic/kibana/pull/193961)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-09-27T11:27:27Z","message":"fix:
[Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not include
secondary information: 0001 (#193961)\n\nCloses:
https://github.com/elastic/observability-accessibility/issues/61\r\n\r\n#
Description \r\n\r\nObservability has a few pages that wrap related
information like alert\r\ncounts in the H1 tag. This presents a
challenge to screen readers\r\nbecause all of that information now
becomes the heading level one. It\r\nclogs up the Headings menu and
makes it harder to reason about the page\r\nand what's primary
information vs. secondary.\r\n\r\n# What was changed?:\r\n\r\n-
`pageTitle` was renamed to `pageTitleContent`. The title portion
was\r\nmoved out of that component.\r\n-
`ObservabilityPageTemplate.pageHeader` for the `Alert Detail` page
was\r\nupdated to separate the title from the other content.\r\n\r\n>
[!NOTE]\r\n> Related PR: https://github.com/elastic/kibana/pull/193958
for `Alerts\r\nDetail`\r\n\r\n# Screen: \r\n\r\n<img width=\"1274\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/4974a669-67e0-447d-9013-c675299ed75c\">","sha":"89f64384ef513ae00fcd71a8eb3b797c95a4c36f","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0","backport:version"],"title":"fix:
[Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not include
secondary information:
0001","number":193961,"url":"https://github.com/elastic/kibana/pull/193961","mergeCommit":{"message":"fix:
[Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not include
secondary information: 0001 (#193961)\n\nCloses:
https://github.com/elastic/observability-accessibility/issues/61\r\n\r\n#
Description \r\n\r\nObservability has a few pages that wrap related
information like alert\r\ncounts in the H1 tag. This presents a
challenge to screen readers\r\nbecause all of that information now
becomes the heading level one. It\r\nclogs up the Headings menu and
makes it harder to reason about the page\r\nand what's primary
information vs. secondary.\r\n\r\n# What was changed?:\r\n\r\n-
`pageTitle` was renamed to `pageTitleContent`. The title portion
was\r\nmoved out of that component.\r\n-
`ObservabilityPageTemplate.pageHeader` for the `Alert Detail` page
was\r\nupdated to separate the title from the other content.\r\n\r\n>
[!NOTE]\r\n> Related PR: https://github.com/elastic/kibana/pull/193958
for `Alerts\r\nDetail`\r\n\r\n# Screen: \r\n\r\n<img width=\"1274\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/4974a669-67e0-447d-9013-c675299ed75c\">","sha":"89f64384ef513ae00fcd71a8eb3b797c95a4c36f"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193961","number":193961,"mergeCommit":{"message":"fix:
[Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not include
secondary information: 0001 (#193961)\n\nCloses:
https://github.com/elastic/observability-accessibility/issues/61\r\n\r\n#
Description \r\n\r\nObservability has a few pages that wrap related
information like alert\r\ncounts in the H1 tag. This presents a
challenge to screen readers\r\nbecause all of that information now
becomes the heading level one. It\r\nclogs up the Headings menu and
makes it harder to reason about the page\r\nand what's primary
information vs. secondary.\r\n\r\n# What was changed?:\r\n\r\n-
`pageTitle` was renamed to `pageTitleContent`. The title portion
was\r\nmoved out of that component.\r\n-
`ObservabilityPageTemplate.pageHeader` for the `Alert Detail` page
was\r\nupdated to separate the title from the other content.\r\n\r\n>
[!NOTE]\r\n> Related PR: https://github.com/elastic/kibana/pull/193958
for `Alerts\r\nDetail`\r\n\r\n# Screen: \r\n\r\n<img width=\"1274\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/4974a669-67e0-447d-9013-c675299ed75c\">","sha":"89f64384ef513ae00fcd71a8eb3b797c95a4c36f"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
---
 .../{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 f951ffdff44ba..fe53dd84c48d1 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 31ae9e41d0529..e8270434c12b2 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