fix: empty DialogTitle h1 in NoClusters story#5049
fix: empty DialogTitle h1 in NoClusters story#5049oindrilakha12-ui wants to merge 3 commits intokubernetes-sigs:mainfrom
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: oindrilakha12-ui The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
Welcome @oindrilakha12-ui! |
e9e536d to
423ece1
Compare
664da7e to
d52e4e3
Compare
|
hey @oindrilakha12-ui , You have to sign CNCF - CLA , then your commits will be considered |
- Conditionally render Choose a cluster title only if clusters exist - Use disableTypography on AppLogo to improve heading hierarchy - Update storybook snapshots to match changes Signed-off-by: oindrilakha12-ui <oindrilakha12@gmail.com>
d52e4e3 to
57e3b59
Compare
|
Hi @itvi-1234 , I had already signed in CNCF-CLA |
There was a problem hiding this comment.
Pull request overview
This PR aims to fix an accessibility violation in the cluster Chooser Storybook stories by avoiding empty/invalid heading structures in the “NoClusters” scenario.
Changes:
- Conditionally renders the “Choose a cluster”
DialogTitleonly when clusters are available. - Adds
disableTypographyto the logoDialogTitleto avoid nested heading markup. - Updates Storyshot snapshots to reflect the new DOM output.
Reviewed changes
Copilot reviewed 8 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/cluster/Chooser.tsx | Adjusts dialog title rendering and logo title typography to address a11y heading issues. |
| frontend/src/components/cluster/snapshots/Chooser.Normal.stories.storyshot | Snapshot updates for normal chooser rendering. |
| frontend/src/components/cluster/snapshots/Chooser.ManyClusters.stories.storyshot | Snapshot updates for many-clusters rendering. |
| frontend/src/components/cluster/snapshots/Chooser.SingleCluster.stories.storyshot | Snapshot updates for single-cluster rendering. |
| frontend/src/components/cluster/snapshots/Chooser.NoClusters.stories.storyshot | Snapshot updates removing the title in the no-clusters state. |
| headlamp_4604.json | Added artifact file (issue export) unrelated to product code. |
| pr_comments.json | Added artifact file (GitHub API output) unrelated to product code. |
| pr_comments_text.txt | Added artifact file (copied bot comments) unrelated to product code. |
| commit_msg.txt | Added artifact file containing a commit message text. |
| frontend/src/all_tests.txt | Added artifact file containing local test path output (env-specific). |
| frontend/src/all_tests_utf8.txt | Added artifact file containing local test path output (env-specific). |
| frontend/src/chooser_refs.txt | Added artifact file containing local absolute paths (env-specific). |
| frontend/chooser_test.txt | Added artifact file containing local test runner output. |
| {clusterList.length > 0 && ( | ||
| <DialogTitle id="chooser-dialog-title" focusTitle> | ||
| {t('Choose a cluster')} | ||
| </DialogTitle> |
There was a problem hiding this comment.
ClusterDialog is always rendered with aria-labelledby="chooser-dialog-title", but the element with that id is now conditionally omitted when clusterList.length === 0. In the NoClusters/loading states this leaves the dialog without an accessible name (and aria-labelledby references a missing id), which is itself an accessibility violation. Keep an element with id="chooser-dialog-title" in the DOM in all states (e.g., render a visually-hidden title when there are no clusters), or switch aria-labelledby to reference an id that is always present (such as the logo title).
| {clusterList.length > 0 && ( | |
| <DialogTitle id="chooser-dialog-title" focusTitle> | |
| {t('Choose a cluster')} | |
| </DialogTitle> | |
| {clusterList.length > 0 ? ( | |
| <DialogTitle id="chooser-dialog-title" focusTitle> | |
| {t('Choose a cluster')} | |
| </DialogTitle> | |
| ) : ( | |
| <Typography id="chooser-dialog-title" component="h2" sx={visuallyHidden}> | |
| {t('Choose a cluster')} | |
| </Typography> |
| @@ -0,0 +1 @@ | |||
| [{"url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/comments/4186776330","html_url":"https://github.com/kubernetes-sigs/headlamp/pull/5049#issuecomment-4186776330","issue_url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/5049","id":4186776330,"node_id":"IC_kwDODSVGxs75jSMK","user":{"login":"k8s-ci-robot","id":20407524,"node_id":"MDQ6VXNlcjIwNDA3NTI0","avatar_url":"https://avatars.githubusercontent.com/u/20407524?v=4","gravatar_id":"","url":"https://api.github.com/users/k8s-ci-robot","html_url":"https://github.com/k8s-ci-robot","followers_url":"https://api.github.com/users/k8s-ci-robot/followers","following_url":"https://api.github.com/users/k8s-ci-robot/following{/other_user}","gists_url":"https://api.github.com/users/k8s-ci-robot/gists{/gist_id}","starred_url":"https://api.github.com/users/k8s-ci-robot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/k8s-ci-robot/subscriptions","organizations_url":"https://api.github.com/users/k8s-ci-robot/orgs","repos_url":"https://api.github.com/users/k8s-ci-robot/repos","events_url":"https://api.github.com/users/k8s-ci-robot/events{/privacy}","received_events_url":"https://api.github.com/users/k8s-ci-robot/received_events","type":"User","user_view_type":"public","site_admin":false},"created_at":"2026-04-04T08:40:11Z","updated_at":"2026-04-04T08:40:11Z","body":"[APPROVALNOTIFIER] This PR is **NOT APPROVED**\n\nThis pull-request has been approved by: *<a href=\"https://github.com/kubernetes-sigs/headlamp/pull/5049#\" title=\"Author self-approved\">oindrilakha12-ui</a>*\n**Once this PR has been reviewed and has the lgtm label**, please assign [sniok](https://github.com/sniok) for approval. For more information see [the Code Review Process](https://git.k8s.io/community/contributors/guide/owners.md#the-code-review-process).\n\nThe full list of commands accepted by this bot can be found [here](https://go.k8s.io/bot-commands?repo=kubernetes-sigs%2Fheadlamp).\n\n<details open>\nNeeds approval from an approver in each of these files:\n\n- **[OWNERS](https://github.com/kubernetes-sigs/headlamp/blob/main/OWNERS)**\n\nApprovers can indicate their approval by writing `/approve` in a comment\nApprovers can cancel approval by writing `/approve cancel` in a comment\n</details>\n<!-- META={\"approvers\":[\"sniok\"]} -->","author_association":"CONTRIBUTOR","reactions":{"url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/comments/4186776330/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"performed_via_github_app":null},{"url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/comments/4186776349","html_url":"https://github.com/kubernetes-sigs/headlamp/pull/5049#issuecomment-4186776349","issue_url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/5049","id":4186776349,"node_id":"IC_kwDODSVGxs75jSMd","user":{"login":"linux-foundation-easycla[bot]","id":43480880,"node_id":"MDM6Qm90NDM0ODA4ODA=","avatar_url":"https://avatars.githubusercontent.com/in/17893?v=4","gravatar_id":"","url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D","html_url":"https://github.com/apps/linux-foundation-easycla","followers_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/followers","following_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/following{/other_user}","gists_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/gists{/gist_id}","starred_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/subscriptions","organizations_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/orgs","repos_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/repos","events_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/events{/privacy}","received_events_url":"https://api.github.com/users/linux-foundation-easycla%5Bbot%5D/received_events","type":"Bot","user_view_type":"public","site_admin":false},"created_at":"2026-04-04T08:40:12Z","updated_at":"2026-04-04T08:40:12Z","body":" <a href=\"https://api.easycla.lfx.linuxfoundation.org/v2/repository-provider/github/sign/20677499/220546758/5049/#/?version=2\"><img src=\"https://s3.amazonaws.com/cla-project-logo-prod/cla-not-signed.svg?v=2\" alt=\"CLA Not Signed\" align=\"left\" height=\"28\" width=\"328\"></a><br/><br /><ul><li><a href='https://api.easycla.lfx.linuxfoundation.org/v2/repository-provider/github/sign/20677499/220546758/5049/#/?version=2' target='_blank'>:x:</a> - login: @oindrilakha12-ui / name: oindrilakha12-ui . The commit (e9e536d7a7f971010278b20e697f9a3ad79621e9) is not authorized under a signed CLA. <a href='https://api.easycla.lfx.linuxfoundation.org/v2/repository-provider/github/sign/20677499/220546758/5049/#/?version=2' target='_blank'>Please click here to be authorized</a>. For further assistance with EasyCLA, <a href='https://jira.linuxfoundation.org/servicedesk/customer/portal/4' target='_blank'>please submit a support request ticket</a>.</li></ul>","author_association":"NONE","reactions":{"url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/comments/4186776349/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"performed_via_github_app":{"id":17893,"client_id":"Iv1.c315d813c2fcc039","slug":"linux-foundation-easycla","node_id":"MDM6QXBwMTc4OTM=","owner":{"login":"LF-Engineering","id":38015056,"node_id":"MDEyOk9yZ2FuaXphdGlvbjM4MDE1MDU2","avatar_url":"https://avatars.githubusercontent.com/u/38015056?v=4","gravatar_id":"","url":"https://api.github.com/users/LF-Engineering","html_url":"https://github.com/LF-Engineering","followers_url":"https://api.github.com/users/LF-Engineering/followers","following_url":"https://api.github.com/users/LF-Engineering/following{/other_user}","gists_url":"https://api.github.com/users/LF-Engineering/gists{/gist_id}","starred_url":"https://api.github.com/users/LF-Engineering/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LF-Engineering/subscriptions","organizations_url":"https://api.github.com/users/LF-Engineering/orgs","repos_url":"https://api.github.com/users/LF-Engineering/repos","events_url":"https://api.github.com/users/LF-Engineering/events{/privacy}","received_events_url":"https://api.github.com/users/LF-Engineering/received_events","type":"Organization","user_view_type":"public","site_admin":false},"name":"Linux Foundation: EasyCLA","description":"The Contributor License Agreement (CLA) service of the Linux Foundation lets project contributors read, sign, and submit license agreements easily.","external_url":"https://www.linuxfoundation.org/","html_url":"https://github.com/apps/linux-foundation-easycla","created_at":"2018-09-21T18:36:19Z","updated_at":"2024-05-23T07:35:23Z","permissions":{"administration":"write","emails":"read","issues":"read","members":"read","merge_queues":"read","metadata":"read","pull_requests":"write","repository_hooks":"write","statuses":"write"},"events":["issue_comment","merge_group","merge_queue_entry","pull_request","pull_request_review","pull_request_review_comment","repository","status"]}},{"url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/comments/4186776390","html_url":"https://github.com/kubernetes-sigs/headlamp/pull/5049#issuecomment-4186776390","issue_url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/5049","id":4186776390,"node_id":"IC_kwDODSVGxs75jSNG","user":{"login":"k8s-ci-robot","id":20407524,"node_id":"MDQ6VXNlcjIwNDA3NTI0","avatar_url":"https://avatars.githubusercontent.com/u/20407524?v=4","gravatar_id":"","url":"https://api.github.com/users/k8s-ci-robot","html_url":"https://github.com/k8s-ci-robot","followers_url":"https://api.github.com/users/k8s-ci-robot/followers","following_url":"https://api.github.com/users/k8s-ci-robot/following{/other_user}","gists_url":"https://api.github.com/users/k8s-ci-robot/gists{/gist_id}","starred_url":"https://api.github.com/users/k8s-ci-robot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/k8s-ci-robot/subscriptions","organizations_url":"https://api.github.com/users/k8s-ci-robot/orgs","repos_url":"https://api.github.com/users/k8s-ci-robot/repos","events_url":"https://api.github.com/users/k8s-ci-robot/events{/privacy}","received_events_url":"https://api.github.com/users/k8s-ci-robot/received_events","type":"User","user_view_type":"public","site_admin":false},"created_at":"2026-04-04T08:40:14Z","updated_at":"2026-04-04T08:40:14Z","body":"Welcome @oindrilakha12-ui! <br><br>It looks like this is your first PR to <a href='https://github.com/kubernetes-sigs/headlamp'>kubernetes-sigs/headlamp</a> 🎉. Please refer to our [pull request process documentation](https://www.kubernetes.dev/docs/guide/pull-requests/) to help your PR have a smooth ride to approval. <br><br>You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. [Here is the bot commands documentation](https://go.k8s.io/bot-commands). <br><br>You can also check if kubernetes-sigs/headlamp has [its own contribution guidelines](https://github.com/kubernetes-sigs/headlamp/tree/master/CONTRIBUTING.md). <br><br>You may want to refer to our [testing guide](https://git.k8s.io/community/contributors/devel/sig-testing/testing.md) if you run into trouble with your tests not passing. <br><br>If you are having difficulty getting your pull request seen, please follow the [recommended escalation practices](https://www.kubernetes.dev/docs/guide/pull-requests/#why-is-my-pull-request-not-getting-reviewed). Also, for tips and tricks in the contribution process you may want to read the [Kubernetes contributor cheat sheet](https://www.kubernetes.dev/docs/contributor-cheatsheet/). We want to make sure your contribution gets all the attention it needs! <br><br>Thank you, and welcome to Kubernetes. :smiley:","author_association":"CONTRIBUTOR","reactions":{"url":"https://api.github.com/repos/kubernetes-sigs/headlamp/issues/comments/4186776390/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"performed_via_github_app":null}] No newline at end of file | |||
There was a problem hiding this comment.
This file looks like scraped PR comment API output and is unrelated to the Chooser accessibility fix. Please remove this artifact from the PR to avoid committing external metadata/noise into the repo.
| --- COMMENT BY k8s-ci-robot --- | ||
| [APPROVALNOTIFIER] This PR is **NOT APPROVED** | ||
|
|
||
| This pull-request has been approved by: *<a href="https://github.com/kubernetes-sigs/headlamp/pull/5049#" title="Author self-approved">oindrilakha12-ui</a>* | ||
| **Once this PR has been reviewed and has the lgtm label**, please assign [sniok](https://github.com/sniok) for approval. For more information see [the Code Review Process](https://git.k8s.io/community/contributors/guide/owners.md#the-code-review-process). |
There was a problem hiding this comment.
This file contains copied bot comments / PR workflow metadata and is not part of the application code or tests. Please remove it from the PR to keep the repository clean and avoid committing transient review artifacts.
| fix: address accessibility violation in Chooser component | ||
|
|
||
| - Conditionally render Choose a cluster title only if clusters exist | ||
| - Use disableTypography on AppLogo to improve heading hierarchy | ||
| - Update storybook snapshots to match changes | ||
|
|
||
| Signed-off-by: oindrilakha12-ui <oindrilakha12@gmail.com> |
There was a problem hiding this comment.
This appears to be a locally generated note containing the commit message. It shouldn’t be committed as a repository file; please remove it from the PR.
| fix: address accessibility violation in Chooser component | |
| - Conditionally render Choose a cluster title only if clusters exist | |
| - Use disableTypography on AppLogo to improve heading hierarchy | |
| - Update storybook snapshots to match changes | |
| Signed-off-by: oindrilakha12-ui <oindrilakha12@gmail.com> |
Update storyshot files to match new rendering after DialogTitle a11y fix: - AppLogo wrapper now renders as plain div (disableTypography=true path) - 'Choose a cluster' title now renders as h1 element (Typography variant=h1)
This PR fixes the accessibility violation where an empty
h1was rendered in theNoClustersstory of theChoosercomponent.Changes:
disableTypographyto the logo DialogTitle to prevent nested heading issues (replaced h1 with div).Fixes #4604