Skip to content

Commit

Permalink
fix: [Obs Alerts > Rule Detail][SCREEN READER]: H1 tag should not inc…
Browse files Browse the repository at this point in the history
…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">
  • Loading branch information
alexwizp authored Sep 27, 2024
1 parent c84cb0a commit 89f6438
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 10 deletions.
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
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 89f6438

Please sign in to comment.