fix(storybook): add dialog title to Testing story

[CODEAbhinav-art]

Summary

This PR fixes an accessibility issue in the AuthChooser Storybook Testing story where the dialog rendered a DialogTitle with no text, resulting in an empty <h1>.

A meaningful testing dialog title is now provided so the dialog has a proper accessible name.

Related Issue

Fixes #4597

Changes

• Updated AuthChooser.stories.tsx to provide a testingTitle for the Testing story
• Fixed an accessibility issue causing an empty <h1> in the Storybook dialog
• Ensured the story reflects valid, accessible component usage

Steps to Test

1. Run Storybook:

   cd frontend
   npm run storybook

2. Open AuthChooser → Testing in Storybook
3. Verify the dialog displays the title “Authenticating cluster access”
4. Inspect the DOM to confirm the "" is non-empty

Screenshots (if applicable)

Notes for the Reviewer

• This change is scoped to Storybook only and does not affect runtime authentication logic.
• The fix ensures proper screen-reader semantics by providing a non-empty dialog title.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: CODEAbhinav-art / name: Abhinav Mishra (0c75748)

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: CODEAbhinav-art
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:

• OWNERS

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

[CODEAbhinav-art]

@illume Please review

[illume]

Looks good. I expect you need to update the snapshot tests.

Could you please check the commits?

[CODEAbhinav-art]

Looks good. I expect you need to update the snapshot tests.

Could you please check the commits?

Done...!

[illume]

@CODEAbhinav-art thanks for that.

Looking at this some more, this is strange… I would expect a change to the story rendering would make a change to a snapshot as well. This makes me think something is not right here. In 99% of cases if there is a change to how a component is rendered in the storybook, it will update the snapshots.

Can you please double check this? Or show me the before and after where you can see the difference in the DOM?

[CODEAbhinav-art]

@CODEAbhinav-art thanks for that.

Looking at this some more, this is strange… I would expect a change to the story rendering would make a change to a snapshot as well. This makes me think something is not right here. In 99% of cases if there is a change to how a component is rendered in the storybook, it will update the snapshots.

Can you please double check this? Or show me the before and after where you can see the difference in the DOM?

Thanks for pointing that out. I inspected the rendered DOM and noticed that in the Testing story, the visible h1-tag comes from the testingTitle prop, not title. Since I only updated the title prop, the snapshot did not change. I’m reviewing whether the correct prop should be updated to ensure the DialogTitle’s accessible name is populated as intended.

[CODEAbhinav-art]

@illume
I was overriding title, but the Testing story renders testingTitle when testingAuth is true. I’ve corrected the story to override testingTitle instead and updated the snapshots accordingly. The DOM now reflects the change.

[Copilot]

Pull request overview

Updates the AuthChooser Storybook “Testing” story to use a meaningful dialog title, aiming to avoid rendering an unlabeled/empty heading in the testing dialog and keep storyshots in sync.

Changes:

• Set a specific testingTitle for the Testing story args.
• Updated the corresponding Storyshots snapshot to reflect the new title text.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/components/authchooser/AuthChooser.stories.tsx	Sets testingTitle for the Testing story to provide a meaningful dialog title.
frontend/src/components/authchooser/snapshots/AuthChooser.Testing.stories.storyshot	Updates the snapshot to match the new dialog title text.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

In Storybook this dialog still renders an empty heading from the ClusterDialog header: ClusterDialog always renders a DialogTitle containing AppLogo, and with the default TestContext store plugins.loaded is false, so AppLogo renders EmptyContent and the title becomes an effectively empty <h1> (see the updated storyshot output). Setting testingTitle here only affects the inner dialog title, so the original a11y violation can still remain. Consider providing a mock store in the story decorator with plugins.loaded: true (and any minimal theme state), or otherwise ensuring the header DialogTitle has accessible text so no empty headings are produced in this story.

[illume]

@CODEAbhinav-art this looks like a good hint