[ObsUX] [A11y] Fix focus on metadata table content#216628
Merged
MiriamAparicio merged 2 commits intoelastic:mainfrom Apr 2, 2025
Merged
[ObsUX] [A11y] Fix focus on metadata table content#216628MiriamAparicio merged 2 commits intoelastic:mainfrom
MiriamAparicio merged 2 commits intoelastic:mainfrom
Conversation
MiriamAparicio
added
release_note:skip
Contributor
|
Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services) |
jennypavlova
reviewed
Apr 1, 2025
| const handleToggle = () => { | ||
| toggle(); | ||
|
|
||
| setTimeout(() => { |
Member
There was a problem hiding this comment.
Q: why is the timeout of 0 needed here?
Contributor
Author
There was a problem hiding this comment.
I used here to delay the focus shift until after the React state update (toggle()) has fully applied.
But I think it's better to use useEffect here, to have the same result, I will change it
Contributor
Author
There was a problem hiding this comment.
Now I remember why I used the timeout, I changed to use useEffect() but need to add another state check to avoid the focus to be always set on show more / less on reload.
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
|
Contributor
|
Starting backport for target branches: 8.18, 8.x, 9.0 https://github.com/elastic/kibana/actions/runs/14216164527 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 2, 2025
Closes elastic#195014 ### Summary Host Detail page has a Metadata tab with expandable table rows. These rows add content to the page in an unexpected reading order. Content should be expanded underneath the show more / less trigger. Focus should stay on the toggle. Before https://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c After https://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b (cherry picked from commit 7b1d7bf)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 2, 2025
Closes elastic#195014 ### Summary Host Detail page has a Metadata tab with expandable table rows. These rows add content to the page in an unexpected reading order. Content should be expanded underneath the show more / less trigger. Focus should stay on the toggle. Before https://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c After https://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b (cherry picked from commit 7b1d7bf)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Apr 2, 2025
Closes elastic#195014 ### Summary Host Detail page has a Metadata tab with expandable table rows. These rows add content to the page in an unexpected reading order. Content should be expanded underneath the show more / less trigger. Focus should stay on the toggle. Before https://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c After https://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b (cherry picked from commit 7b1d7bf)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Apr 2, 2025
…216779) # Backport This will backport the following commits from `main` to `9.0`: - [[ObsUX] [A11y] Fix focus on metadata table content (#216628)](#216628) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Miriam","email":"31922082+MiriamAparicio@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-02T09:25:05Z","message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-infra_services","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[ObsUX] [A11y] Fix focus on metadata table content","number":216628,"url":"https://github.com/elastic/kibana/pull/216628","mergeCommit":{"message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216628","number":216628,"mergeCommit":{"message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
kibanamachine
added a commit
that referenced
this pull request
Apr 2, 2025
…216778) # Backport This will backport the following commits from `main` to `8.x`: - [[ObsUX] [A11y] Fix focus on metadata table content (#216628)](#216628) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Miriam","email":"31922082+MiriamAparicio@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-02T09:25:05Z","message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-infra_services","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[ObsUX] [A11y] Fix focus on metadata table content","number":216628,"url":"https://github.com/elastic/kibana/pull/216628","mergeCommit":{"message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216628","number":216628,"mergeCommit":{"message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
kibanamachine
added
the
backport missing
Contributor
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
Contributor
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
1 similar comment
Contributor
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
Contributor
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
kibanamachine
added a commit
that referenced
this pull request
Apr 9, 2025
…216777) # Backport This will backport the following commits from `main` to `8.18`: - [[ObsUX] [A11y] Fix focus on metadata table content (#216628)](#216628) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Miriam","email":"31922082+MiriamAparicio@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-02T09:25:05Z","message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-infra_services","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[ObsUX] [A11y] Fix focus on metadata table content","number":216628,"url":"https://github.com/elastic/kibana/pull/216628","mergeCommit":{"message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216628","number":216628,"mergeCommit":{"message":"[ObsUX] [A11y] Fix focus on metadata table content (#216628)\n\nCloses https://github.com/elastic/kibana/issues/195014\n\n### Summary\n\nHost Detail page has a Metadata tab with expandable table rows. These\nrows add content to the page in an unexpected reading order. Content\nshould be expanded underneath the show more / less trigger. Focus should\nstay on the toggle.\n\nBefore\n\n\nhttps://github.com/user-attachments/assets/13a0f7a2-2f24-4304-a6ad-cc46e3bbfc1c\n\nAfter\n\n\nhttps://github.com/user-attachments/assets/7993abdc-b693-4c0f-a161-8533cf6b2e3b","sha":"7b1d7bf08a8e48b0f0f5b57573e250faa7acf265"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
kibanamachine
removed
the
backport missing
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #195014
Summary
Host Detail page has a Metadata tab with expandable table rows. These rows add content to the page in an unexpected reading order. Content should be expanded underneath the show more / less trigger. Focus should stay on the toggle.
Before
Screen.Recording.2025-04-01.at.12.39.56.mov
After
Screen.Recording.2025-04-01.at.12.10.15.mov