frontend: Dialog: Provide automatic aria-labelledby for accessibility

mastermaxx03 · mastermaxx03 · commit fe73b27efba1 · 2026-02-08T12:19:21.000+05:30
diff --git a/frontend/src/components/App/Settings/__snapshots__/ShortcutsSettings.Default.stories.storyshot b/frontend/src/components/App/Settings/__snapshots__/ShortcutsSettings.Default.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                 tabindex="-1"
               >
diff --git a/frontend/src/components/App/__snapshots__/VersionDialog.VersionDialog.stories.storyshot b/frontend/src/components/App/__snapshots__/VersionDialog.VersionDialog.stories.storyshot
@@ -41,6 +41,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Headlamp
diff --git a/frontend/src/components/account/__snapshots__/AuthToken.ShowActions.stories.storyshot b/frontend/src/components/account/__snapshots__/AuthToken.ShowActions.stories.storyshot
@@ -86,6 +86,7 @@
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                  id="authtoken-dialog-title"
                   style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                 >
                   a title
diff --git a/frontend/src/components/account/__snapshots__/AuthToken.ShowError.stories.storyshot b/frontend/src/components/account/__snapshots__/AuthToken.ShowError.stories.storyshot
@@ -109,6 +109,7 @@
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                  id="authtoken-dialog-title"
                   style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                 >
                   a title
diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.AnError.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.AnError.stories.storyshot
@@ -85,6 +85,7 @@
                 >
                   <h1
                     class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                    id="authchooser-dialog-title"
                     style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                     tabindex="-1"
                   >
diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.AuthTypeoidc.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.AuthTypeoidc.stories.storyshot
@@ -85,6 +85,7 @@
                 >
                   <h1
                     class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                    id="authchooser-dialog-title"
                     style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                     tabindex="-1"
                   >
diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.BasicAuthChooser.stories.storyshot
@@ -85,6 +85,7 @@
                 >
                   <h1
                     class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                    id="authchooser-dialog-title"
                     style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                     tabindex="-1"
                   >
diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.HaveClusters.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.HaveClusters.stories.storyshot
@@ -85,6 +85,7 @@
                 >
                   <h1
                     class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                    id="authchooser-dialog-title"
                     style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                     tabindex="-1"
                   >
diff --git a/frontend/src/components/authchooser/__snapshots__/AuthChooser.Testing.stories.storyshot b/frontend/src/components/authchooser/__snapshots__/AuthChooser.Testing.stories.storyshot
@@ -85,6 +85,7 @@
                 >
                   <h1
                     class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                    id="authchooser-dialog-title"
                     style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                     tabindex="-1"
                   >
diff --git a/frontend/src/components/cluster/__snapshots__/Chooser.ManyClusters.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Chooser.ManyClusters.stories.storyshot
@@ -135,6 +135,7 @@
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                  id="chooser-dialog-title"
                   style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                   tabindex="-1"
                 >
diff --git a/frontend/src/components/cluster/__snapshots__/Chooser.NoClusters.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Chooser.NoClusters.stories.storyshot
@@ -135,6 +135,7 @@
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                  id="chooser-dialog-title"
                   style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                   tabindex="-1"
                 >
diff --git a/frontend/src/components/cluster/__snapshots__/Chooser.Normal.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Chooser.Normal.stories.storyshot
@@ -135,6 +135,7 @@
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                  id="chooser-dialog-title"
                   style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                   tabindex="-1"
                 >
diff --git a/frontend/src/components/cluster/__snapshots__/Chooser.SingleCluster.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Chooser.SingleCluster.stories.storyshot
@@ -135,6 +135,7 @@
               >
                 <h1
                   class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                  id="chooser-dialog-title"
                   style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
                   tabindex="-1"
                 >
diff --git a/frontend/src/components/common/Dialog.tsx b/frontend/src/components/common/Dialog.tsx
@@ -44,7 +44,7 @@ export interface OurDialogTitleProps extends DialogTitleProps {
  * reading can begin.
  */
 export function DialogTitle(props: OurDialogTitleProps) {
-  const { children, focusTitle, buttons, disableTypography = false, ...other } = props;
+  const { children, focusTitle, buttons, disableTypography = false, id, ...other } = props;
 
   // Don't render heading if there's no content to avoid empty heading violations
   if (!children && (!buttons || buttons.length === 0)) {
@@ -66,9 +66,10 @@ export function DialogTitle(props: OurDialogTitleProps) {
         {children && (
           <Grid item>
             {disableTypography ? (
-              children
+              <div id={id}>{children}</div>
             ) : (
               <Typography
+                id={id}
                 ref={focusedRef}
                 variant="h1"
                 style={{
@@ -156,11 +157,21 @@ export function Dialog(props: DialogProps) {
       />
     );
   }
+  const generatedId = React.useId();
+  const titleId = titleProps?.id || generatedId;
+  const dialogAriaProps = title ? { 'aria-labelledby': titleId } : {};
 
   return (
-    <MuiDialog maxWidth="lg" scroll="paper" fullWidth fullScreen={fullScreen} {...other}>
+    <MuiDialog
+      maxWidth="lg"
+      scroll="paper"
+      fullWidth
+      fullScreen={fullScreen}
+      {...dialogAriaProps}
+      {...other}
+    >
       {(!!title || withFullScreen) && (
-        <DialogTitle buttons={[<FullScreenButton />, <CloseButton />]} {...titleProps}>
+        <DialogTitle {...titleProps} id={titleId} buttons={[<FullScreenButton />, <CloseButton />]}>
           {title}
         </DialogTitle>
       )}
diff --git a/frontend/src/components/common/Resource/__snapshots__/EditorDialog.EditorDialogWithResource.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/EditorDialog.EditorDialogWithResource.stories.storyshot
@@ -40,6 +40,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id="editor-dialog-title-id"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Edit: Dummy_Name
diff --git a/frontend/src/components/common/Resource/__snapshots__/EditorDialog.ExtraActions.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/EditorDialog.ExtraActions.stories.storyshot
@@ -40,6 +40,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id="editor-dialog-title-id"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Edit: Dummy_Name
diff --git a/frontend/src/components/common/__snapshots__/ConfirmDialog.ConfirmDialog.stories.storyshot b/frontend/src/components/common/__snapshots__/ConfirmDialog.ConfirmDialog.stories.storyshot
@@ -42,6 +42,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id="alert-dialog-title"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 A fine title
diff --git a/frontend/src/components/common/__snapshots__/ConfirmDialog.ConfirmDialogCancelHidden.stories.storyshot b/frontend/src/components/common/__snapshots__/ConfirmDialog.ConfirmDialogCancelHidden.stories.storyshot
@@ -42,6 +42,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id="alert-dialog-title"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 A fine title
diff --git a/frontend/src/components/common/__snapshots__/Dialog.Dialog.stories.storyshot b/frontend/src/components/common/__snapshots__/Dialog.Dialog.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 A fine title
diff --git a/frontend/src/components/common/__snapshots__/Dialog.DialogAlreadyInFullScreen.stories.storyshot b/frontend/src/components/common/__snapshots__/Dialog.DialogAlreadyInFullScreen.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 A fine title
diff --git a/frontend/src/components/common/__snapshots__/Dialog.DialogWithCloseButton.stories.storyshot b/frontend/src/components/common/__snapshots__/Dialog.DialogWithCloseButton.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 A fine title
diff --git a/frontend/src/components/common/__snapshots__/Dialog.DialogWithFullScreenButton.stories.storyshot b/frontend/src/components/common/__snapshots__/Dialog.DialogWithFullScreenButton.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 A fine title
diff --git a/frontend/src/components/pod/__snapshots__/PodLogs.BigJsonLogs.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodLogs.BigJsonLogs.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Logs: pod-name
diff --git a/frontend/src/components/pod/__snapshots__/PodLogs.FormattedJsonLogs.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodLogs.FormattedJsonLogs.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Logs: pod-name
diff --git a/frontend/src/components/pod/__snapshots__/PodLogs.FormattingLogs.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodLogs.FormattingLogs.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Logs: pod-name
diff --git a/frontend/src/components/pod/__snapshots__/PodLogs.JsonLogs.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodLogs.JsonLogs.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Logs: pod-name
diff --git a/frontend/src/components/pod/__snapshots__/PodLogs.PlainLogs.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodLogs.PlainLogs.stories.storyshot
@@ -39,6 +39,7 @@
             >
               <h1
                 class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"
+                id=":mock-test-id:"
                 style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"
               >
                 Logs: pod-name

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@`
`39`	`39`	`>`
`40`	`40`	`<h1`
`41`	`41`	`class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"`
	`42`	`+ id=":mock-test-id:"`
`42`	`43`	`style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"`
`43`	`44`	`tabindex="-1"`
`44`	`45`	`>`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@`
`41`	`41`	`>`
`42`	`42`	`<h1`
`43`	`43`	`class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"`
	`44`	`+ id=":mock-test-id:"`
`44`	`45`	`style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"`
`45`	`46`	`>`
`46`	`47`	`Headlamp`
Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,7 @@`
`86`	`86`	`>`
`87`	`87`	`<h1`
`88`	`88`	`class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"`
	`89`	`+ id="authtoken-dialog-title"`
`89`	`90`	`style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"`
`90`	`91`	`>`
`91`	`92`	`a title`
Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,7 @@`
`109`	`109`	`>`
`110`	`110`	`<h1`
`111`	`111`	`class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"`
	`112`	`+ id="authtoken-dialog-title"`
`112`	`113`	`style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"`
`113`	`114`	`>`
`114`	`115`	`a title`
Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,7 @@`
`85`	`85`	`>`
`86`	`86`	`<h1`
`87`	`87`	`class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"`
	`88`	`+ id="authchooser-dialog-title"`
`88`	`89`	`style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"`
`89`	`90`	`tabindex="-1"`
`90`	`91`	`>`
Original file line number	Diff line number	Diff line change
`@@ -135,6 +135,7 @@`
`135`	`135`	`>`
`136`	`136`	`<h1`
`137`	`137`	`class="MuiTypography-root MuiTypography-h1 css-1kazmbo-MuiTypography-root"`
	`138`	`+ id="chooser-dialog-title"`
`138`	`139`	`style="font-size: 1.25rem; font-weight: 500; line-height: 1.6;"`
`139`	`140`	`tabindex="-1"`
`140`	`141`	`>`