Skip to content

Commit

Permalink
[8.x] fix: [Obs Alerts > Rule Detail][SCREEN READER]: H1 tag shoul…
Browse files Browse the repository at this point in the history 
…d not include secondary information: 0001 (#193961) (#194288)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not
include secondary information: 0001
(#193961)](#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":"[email protected]"},"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: #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: #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: #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 <[email protected]>
  • Loading branch information
@kibanamachine @alexwizp
kibanamachine and alexwizp authored Sep 27, 2024
1 parent 869fe87 commit 97cb4ad
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 10 deletions.
10 changes: 2 additions & 8 deletions ...es/rule_details/components/page_title.tsx → ...details/components/page_title_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() +
Expand Down
8 changes: 6 additions & 2 deletions ...k/plugins/observability_solution/observability/public/pages/rule_details/rule_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 97cb4ad

Please sign in to comment.