From df987fe2e5be4ba66db1cb22cd1a4d845a9e4d31 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Thu, 20 Jun 2024 09:43:46 +0200
Subject: [PATCH] PanelChrome: Use labelledby for accessible title (#88781)

* Add labelledby to PanelChrome

* Fix React's subpar useId

* No labelledby if there is no title
---
 .../src/components/PanelChrome/PanelChrome.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index ef72c19eca9..1aeff49e69f 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -135,6 +135,7 @@ export function PanelChrome({
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
   const panelContentId = useId();
+  const panelTitleId = useId().replace(/:/g, '_');
 
   const hasHeader = !hoverHeader;
 
@@ -179,7 +180,13 @@ export function PanelChrome({
       {/* Non collapsible title */}
       {!collapsible && title && (
         <div className={styles.title}>
-          <Text element="h2" variant="h6" truncate title={typeof title === 'string' ? title : undefined}>
+          <Text
+            element="h2"
+            variant="h6"
+            truncate
+            title={typeof title === 'string' ? title : undefined}
+            id={panelTitleId}
+          >
             {title}
           </Text>
         </div>
@@ -206,7 +213,7 @@ export function PanelChrome({
                 aria-hidden={!!title}
                 aria-label={!title ? 'toggle collapse panel' : undefined}
               />
-              <Text variant="h6" truncate>
+              <Text variant="h6" truncate id={panelTitleId}>
                 {title}
               </Text>
             </button>
@@ -249,6 +256,7 @@ export function PanelChrome({
     <section
       className={cx(styles.container, { [styles.transparentContainer]: isPanelTransparent })}
       style={containerStyles}
+      aria-labelledby={!!title ? panelTitleId : undefined}
       data-testid={testid}
       tabIndex={0} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       onFocus={onFocus}