Skip to content

Commit

Permalink
fix: [Obs Applications > Services | Traces | Dependencies][SCREEN REA…
Browse files Browse the repository at this point in the history
…DER]: H1 tag should not include secondary information (#193880)

Closes: #194988
Closes: #194987
Closes: #194986

## 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?:
 
1. extra content has been removed from `pageTitle` and moved to
`rightSideItems`.


## Screen: 

<img width="1226" alt="image"
src="https://github.com/user-attachments/assets/221a1d80-7686-47e3-b0d1-b8c8eada9374">



> [!NOTE] 
> On smaller screens (at certain resolutions) sometimes we have an issue
described in elastic/eui#8039 . But It's not a
blocker for that PR and will be fixed on EUI side
  • Loading branch information
alexwizp authored Oct 8, 2024
1 parent 653073f commit a78a31d
Showing 1 changed file with 18 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { EuiFlexGroup, EuiFlexItem, EuiPageHeaderProps } from '@elastic/eui';
import { EuiFlexGroup, EuiPageHeaderProps } from '@elastic/eui';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { entityCentricExperience } from '@kbn/observability-plugin/common';
import { ObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
Expand Down Expand Up @@ -132,35 +132,24 @@ export function ApmMainTemplate({
noDataConfig,
});

const rightSideItems = [...(showServiceGroupSaveButton ? [<ServiceGroupSaveButton />] : [])];

const sanitizedPath = getPathForFeedback(window.location.pathname);

const pageHeaderTitle = (
<EuiFlexGroup justifyContent="spaceBetween" wrap={true}>
{pageHeader?.pageTitle ?? pageTitle}
<EuiFlexItem grow={false} />
<EuiFlexItem grow={false}>
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<FeatureFeedbackButton
data-test-subj="infraApmFeedbackLink"
formUrl={
isEntityCentricExperienceEnabled && sanitizedPath.includes('service')
? APM_NEW_EXPERIENCE_FEEDBACK_LINK
: APM_FEEDBACK_LINK
}
kibanaVersion={kibanaVersion}
isCloudEnv={isCloudEnv}
isServerlessEnv={isServerlessEnv}
sanitizedPath={sanitizedPath}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>{environmentFilter && <ApmEnvironmentFilter />}</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
const rightSideItems = [
...(showServiceGroupSaveButton ? [<ServiceGroupSaveButton />] : []),
...(environmentFilter ? [<ApmEnvironmentFilter />] : []),
<FeatureFeedbackButton
data-test-subj="infraApmFeedbackLink"
formUrl={
isEntityCentricExperienceEnabled && sanitizedPath.includes('service')
? APM_NEW_EXPERIENCE_FEEDBACK_LINK
: APM_FEEDBACK_LINK
}
kibanaVersion={kibanaVersion}
isCloudEnv={isCloudEnv}
isServerlessEnv={isServerlessEnv}
sanitizedPath={sanitizedPath}
/>,
];

const [dismissedEntitiesInventoryCallout, setdismissedEntitiesInventoryCallout] = useLocalStorage(
`apm.dismissedEntitiesInventoryCallout`,
Expand All @@ -180,7 +169,7 @@ export function ApmMainTemplate({
pageHeader={{
rightSideItems,
...pageHeader,
pageTitle: pageHeaderTitle,
pageTitle: pageHeader?.pageTitle ?? pageTitle,
children: (
<EuiFlexGroup direction="column">
{showEntitiesInventoryCallout ? (
Expand Down

0 comments on commit a78a31d

Please sign in to comment.