Skip to content

fix(a11y)-3: prevent rendering empty dialog title headings#4397

Merged
illume merged 1 commit intokubernetes-sigs:mainfrom
Sagar-6203620715:fix-access-3
Jan 31, 2026
Merged

fix(a11y)-3: prevent rendering empty dialog title headings#4397
illume merged 1 commit intokubernetes-sigs:mainfrom
Sagar-6203620715:fix-access-3

Conversation

@Sagar-6203620715
Copy link
Contributor

@Sagar-6203620715 Sagar-6203620715 commented Jan 20, 2026

Summary

This PR fixes accessibility violations by preventing DialogTitle from rendering empty heading elements when no title content is provided.

Related Issue

Addresses point 3 from the accessibility issue

Changes

  • Updated DialogTitle to return null when both children and action buttons are absent
  • Conditionally render the heading only when title content exists
  • Preserved rendering of dialog action buttons when present

Steps to Test

  1. Open Storybook and navigate to dialogs without a title
  2. Run accessibility checks (Axe)
  3. Verify no empty heading violations are reported

Screenshots (if applicable)

N/A

Notes for the Reviewer

  • Centralized fix in Dialog.tsx; no story files were modified
  • Maintains existing dialog behavior while improving accessibility

@k8s-ci-robot k8s-ci-robot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Jan 20, 2026
Signed-off-by: Sagar Choudhary <sagar6203620715@gmail.com>
Copy link
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 fixes accessibility violations by preventing the DialogTitle component from rendering empty <h1> heading elements when no title content is provided. This addresses 11 empty heading violations identified by axe-storybook-testing across various dialog components (AuthToken, AuthChooser, and Chooser stories).

Changes:

  • Added early return in DialogTitle when both children and action buttons are absent to avoid rendering the component entirely
  • Conditionally render the title content Grid item only when children exist to prevent empty <h1> elements
  • Preserved rendering of dialog action buttons when present, ensuring fullscreen and close buttons still appear

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

Copy link
Contributor

@illume illume left a comment

Choose a reason for hiding this comment

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

🎉 thanks!

@k8s-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: illume, Sagar-6203620715

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

The pull request process is described 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 added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 31, 2026
@illume illume added frontend Issues related to the frontend a11y Accessibility related issues labels Jan 31, 2026
@illume illume merged commit f57da2b into kubernetes-sigs:main Jan 31, 2026
17 of 18 checks passed
@illume illume added this to the v0.40.0 milestone Feb 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Accessibility related issues approved Indicates a PR has been approved by an approver from all required OWNERS files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. frontend Issues related to the frontend 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.

3 participants