[EuiPageTemplate.Header] Having 2 or more rightSideItems on small screens looks ugly.
#8039
Assignees
Labels
Comments
cee-chen
changed the title
rightSideItems on small screens looks ugly.rightSideItems on small screens looks ugly.
11 tasks
alexwizp
added a commit
to elastic/kibana
that referenced
this issue
Oct 8, 2024
…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
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Oct 8, 2024
…DER]: H1 tag should not include secondary information (elastic#193880) Closes: elastic#194988 Closes: elastic#194987 Closes: elastic#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 (cherry picked from commit a78a31d)
kibanamachine
added a commit
to elastic/kibana
that referenced
this issue
Oct 8, 2024
…CREEN READER]: H1 tag should not include secondary information (#193880) (#195478) # Backport This will backport the following commits from `main` to `8.x`: - [fix: [Obs Applications > Services | Traces | Dependencies][SCREEN READER]: H1 tag should not include secondary information (#193880)](#193880) <!--- 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-10-08T17:04:40Z","message":"fix: [Obs Applications > Services | Traces | Dependencies][SCREEN READER]: H1 tag should not include secondary information (#193880)\n\nCloses: https://github.com/elastic/kibana/issues/194988\r\nCloses: https://github.com/elastic/kibana/issues/194987\r\nCloses: https://github.com/elastic/kibana/issues/194986\r\n\r\n## Description\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\n1. extra content has been removed from `pageTitle` and moved to\r\n`rightSideItems`.\r\n\r\n\r\n## Screen: \r\n\r\n<img width=\"1226\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/221a1d80-7686-47e3-b0d1-b8c8eada9374\">\r\n\r\n\r\n\r\n> [!NOTE] \r\n> On smaller screens (at certain resolutions) sometimes we have an issue\r\ndescribed in elastic/eui#8039 . But It's not a\r\nblocker for that PR and will be fixed on EUI side","sha":"a78a31d1873a7dca3d175870aee05801b056f5a4","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-infra_services","apm:review","v8.16.0","backport:version"],"title":"fix: [Obs Applications > Services | Traces | Dependencies][SCREEN READER]: H1 tag should not include secondary information","number":193880,"url":"https://github.com/elastic/kibana/pull/193880","mergeCommit":{"message":"fix: [Obs Applications > Services | Traces | Dependencies][SCREEN READER]: H1 tag should not include secondary information (#193880)\n\nCloses: https://github.com/elastic/kibana/issues/194988\r\nCloses: https://github.com/elastic/kibana/issues/194987\r\nCloses: https://github.com/elastic/kibana/issues/194986\r\n\r\n## Description\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\n1. extra content has been removed from `pageTitle` and moved to\r\n`rightSideItems`.\r\n\r\n\r\n## Screen: \r\n\r\n<img width=\"1226\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/221a1d80-7686-47e3-b0d1-b8c8eada9374\">\r\n\r\n\r\n\r\n> [!NOTE] \r\n> On smaller screens (at certain resolutions) sometimes we have an issue\r\ndescribed in elastic/eui#8039 . But It's not a\r\nblocker for that PR and will be fixed on EUI side","sha":"a78a31d1873a7dca3d175870aee05801b056f5a4"}},"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/193880","number":193880,"mergeCommit":{"message":"fix: [Obs Applications > Services | Traces | Dependencies][SCREEN READER]: H1 tag should not include secondary information (#193880)\n\nCloses: https://github.com/elastic/kibana/issues/194988\r\nCloses: https://github.com/elastic/kibana/issues/194987\r\nCloses: https://github.com/elastic/kibana/issues/194986\r\n\r\n## Description\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\n1. extra content has been removed from `pageTitle` and moved to\r\n`rightSideItems`.\r\n\r\n\r\n## Screen: \r\n\r\n<img width=\"1226\" alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/221a1d80-7686-47e3-b0d1-b8c8eada9374\">\r\n\r\n\r\n\r\n> [!NOTE] \r\n> On smaller screens (at certain resolutions) sometimes we have an issue\r\ndescribed in elastic/eui#8039 . But It's not a\r\nblocker for that PR and will be fixed on EUI side","sha":"a78a31d1873a7dca3d175870aee05801b056f5a4"}},{"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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This issue was identified while addressing Kibana PR #193880. On smaller screens (at certain resolutions), using
rightSideItemswith children leads a user-unfriendly UI. This might explain why the buttons were originally placed within thepageTitleproperty which is not correct from thea11yperspective.Currently, when
rightSideItemsare used, we render twoFlexItemcomponents: the first includes the title, description, and child content, while the second holds therightSideItems. It might be worth considering moving the description and child content outside of theFlexGroupfor better layout management.Any ideas?
The text was updated successfully, but these errors were encountered: