PanelChrome: Use labelledby for accessible title (#88781)

* Add labelledby to PanelChrome

* Fix React's subpar useId

* No labelledby if there is no title

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}