-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
fix: [Obs Alerts > Alert Detail][SCREEN READER]: H1 tag should not in…
…clude secondary information: 0002 (#193958) Closes: elastic/observability-accessibility#60 # 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: #193961 for `Rule Detail` # Screen: <img width="1226" alt="image" src="https://github.com/user-attachments/assets/bd33a0b8-3f44-409a-9655-53b739780e4e">
Showing
6 changed files
with
163 additions
and
201 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
128 changes: 0 additions & 128 deletions
128
...observability_solution/observability/public/pages/alert_details/components/page_title.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
...ility_solution/observability/public/pages/alert_details/components/page_title_content.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import React from 'react'; | ||
import moment from 'moment'; | ||
import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; | ||
import { AlertLifecycleStatusBadge } from '@kbn/alerts-ui-shared'; | ||
import { i18n } from '@kbn/i18n'; | ||
import { FormattedMessage } from '@kbn/i18n-react'; | ||
import { AlertStatus, ALERT_DURATION, ALERT_FLAPPING, TIMESTAMP } from '@kbn/rule-data-utils'; | ||
import { css } from '@emotion/react'; | ||
import { asDuration } from '../../../../common/utils/formatters'; | ||
import { TopAlert } from '../../../typings/alerts'; | ||
|
||
export interface PageTitleContentProps { | ||
alert: TopAlert | null; | ||
alertStatus?: AlertStatus; | ||
dataTestSubj: string; | ||
} | ||
|
||
export function PageTitleContent({ alert, alertStatus, dataTestSubj }: PageTitleContentProps) { | ||
const { euiTheme } = useEuiTheme(); | ||
|
||
if (!alert) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<EuiFlexGroup direction="row" alignItems="center" gutterSize="xl" data-test-subj={dataTestSubj}> | ||
<EuiFlexItem grow={false}> | ||
{alertStatus && ( | ||
<AlertLifecycleStatusBadge | ||
alertStatus={alertStatus} | ||
flapping={alert.fields[ALERT_FLAPPING]} | ||
/> | ||
)} | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiFlexGroup gutterSize="none"> | ||
<EuiText size="s" color="subdued"> | ||
<FormattedMessage | ||
id="xpack.observability.pages.alertDetails.pageTitle.triggered" | ||
defaultMessage="Triggered" | ||
/> | ||
: | ||
</EuiText> | ||
<EuiText | ||
css={css` | ||
font-weight: ${euiTheme.font.weight.semiBold}; | ||
`} | ||
size="s" | ||
> | ||
{moment(Number(alert.start)).locale(i18n.getLocale()).fromNow()} | ||
</EuiText> | ||
</EuiFlexGroup> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiFlexGroup gutterSize="none"> | ||
<EuiText size="s" color="subdued"> | ||
<FormattedMessage | ||
id="xpack.observability.pages.alertDetails.pageTitle.duration" | ||
defaultMessage="Duration" | ||
/> | ||
: | ||
</EuiText> | ||
<EuiText | ||
css={css` | ||
font-weight: ${euiTheme.font.weight.semiBold}; | ||
`} | ||
size="s" | ||
> | ||
{asDuration(Number(alert.fields[ALERT_DURATION]))} | ||
</EuiText> | ||
</EuiFlexGroup> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiFlexGroup gutterSize="none"> | ||
<EuiText size="s" color="subdued"> | ||
<FormattedMessage | ||
id="xpack.observability.pages.alertDetails.pageTitle.lastStatusUpdate" | ||
defaultMessage="Last status update" | ||
/> | ||
: | ||
</EuiText> | ||
<EuiText | ||
css={css` | ||
font-weight: ${euiTheme.font.weight.semiBold}; | ||
`} | ||
size="s" | ||
> | ||
{moment(alert.fields[TIMESTAMP]?.toString()).locale(i18n.getLocale()).fromNow()} | ||
</EuiText> | ||
</EuiFlexGroup> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
); | ||
} |