Skip to content

fix: empty DialogTitle h1 in NoClusters story#5049

Open
oindrilakha12-ui wants to merge 3 commits intokubernetes-sigs:mainfrom
oindrilakha12-ui:fix-empty-heading-noclusters
Open

fix: empty DialogTitle h1 in NoClusters story#5049
oindrilakha12-ui wants to merge 3 commits intokubernetes-sigs:mainfrom
oindrilakha12-ui:fix-empty-heading-noclusters

Conversation

@oindrilakha12-ui
Copy link
Copy Markdown

@oindrilakha12-ui oindrilakha12-ui commented Apr 4, 2026

This PR fixes the accessibility violation where an empty h1 was rendered in the NoClusters story of the Chooser component.

Changes:

  • Conditionally render the "Choose a cluster" title only when clusters are available.
  • Added disableTypography to the logo DialogTitle to prevent nested heading issues (replaced h1 with div).
  • Updated Storybook snapshots to match the new rendered output.

Fixes #4604

@k8s-ci-robot
Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: oindrilakha12-ui
Once this PR has been reviewed and has the lgtm label, please assign sniok for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@k8s-ci-robot k8s-ci-robot requested review from skoeva and vyncent-t April 4, 2026 08:40
@linux-foundation-easycla
Copy link
Copy Markdown

linux-foundation-easycla bot commented Apr 4, 2026

CLA Signed

The committers listed above are authorized under a signed CLA.

  • ✅ login: oindrilakha12-ui / name: Oindrila Khan (65d0edc)
  • ✅ login: oindrilakha12-ui / name: oindrilakha12-ui (57e3b59, ac574dd)

@k8s-ci-robot
Copy link
Copy Markdown
Contributor

Welcome @oindrilakha12-ui!

It looks like this is your first PR to kubernetes-sigs/headlamp 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

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.

You can also check if kubernetes-sigs/headlamp has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

@k8s-ci-robot k8s-ci-robot added cncf-cla: no Indicates the PR's author has not signed the CNCF CLA. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Apr 4, 2026
@oindrilakha12-ui oindrilakha12-ui force-pushed the fix-empty-heading-noclusters branch from e9e536d to 423ece1 Compare April 4, 2026 09:15
@k8s-ci-robot k8s-ci-robot added do-not-merge/invalid-commit-message Indicates that a PR should not merge because it has an invalid commit message. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Apr 4, 2026
@oindrilakha12-ui oindrilakha12-ui force-pushed the fix-empty-heading-noclusters branch from 664da7e to d52e4e3 Compare April 4, 2026 09:26
@k8s-ci-robot k8s-ci-robot removed the do-not-merge/invalid-commit-message Indicates that a PR should not merge because it has an invalid commit message. label Apr 4, 2026
@itvi-1234
Copy link
Copy Markdown
Contributor

itvi-1234 commented Apr 4, 2026

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>
@oindrilakha12-ui oindrilakha12-ui force-pushed the fix-empty-heading-noclusters branch from d52e4e3 to 57e3b59 Compare April 4, 2026 09:41
@k8s-ci-robot k8s-ci-robot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. and removed cncf-cla: no Indicates the PR's author has not signed the CNCF CLA. labels Apr 4, 2026
@oindrilakha12-ui
Copy link
Copy Markdown
Author

Hi @itvi-1234 , I had already signed in CNCF-CLA

@illume illume requested a review from Copilot April 4, 2026 18:32
@illume illume requested review from Copilot and removed request for Copilot April 4, 2026 18:36
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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” DialogTitle only when clusters are available.
  • Adds disableTypography to the logo DialogTitle to 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.

Comment on lines +436 to +439
{clusterList.length > 0 && (
<DialogTitle id="chooser-dialog-title" focusTitle>
{t('Choose a cluster')}
</DialogTitle>
Copy link

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Suggested change
{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>

Copilot uses AI. Check for mistakes.
@@ -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
Copy link

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Comment on lines +1 to +5
--- 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).
Copy link

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
Comment on lines +1 to +7
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>
Copy link

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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>

Copilot uses AI. Check for mistakes.
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/M Denotes a PR that changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

**cluster/Chooser**: frontend/src/components/cluster/Chooser.stories.tsx - Fix empty DialogTitle h1 in NoClusters story

4 participants