diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 7464e82bb3e..e06e54eec9e 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -770,11 +770,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
index e312691bc4c..1b6342d035a 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
@@ -32,8 +32,6 @@ const meta: Meta<typeof PanelChrome> = {
     docs: {
       page: mdx,
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
 };
 
@@ -46,7 +44,7 @@ function getContentStyle(): CSSProperties {
   };
 }
 
-function renderPanel(name: string, overrides?: Partial<PanelChromeProps>) {
+function renderPanel(content: string, overrides?: Partial<PanelChromeProps>) {
   const props: PanelChromeProps = {
     width: PANEL_WIDTH,
     height: PANEL_HEIGHT,
@@ -60,7 +58,7 @@ function renderPanel(name: string, overrides?: Partial<PanelChromeProps>) {
   return (
     <PanelChrome {...props}>
       {(innerWidth: number, innerHeight: number) => {
-        return <div style={{ width: innerWidth, height: innerHeight, ...contentStyle }}>{name}</div>;
+        return <div style={{ width: innerWidth, height: innerHeight, ...contentStyle }}>{content}</div>;
       }}
     </PanelChrome>
   );
@@ -133,70 +131,74 @@ export const Examples = () => {
     <DashboardStoryCanvas>
       <div>
         <Stack gap={2} alignItems="flex-start" wrap="wrap">
-          {renderPanel('Has statusMessage', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'Panel with statusMessage',
             statusMessage: 'Error text',
             statusMessageOnClick: action('ErrorIndicator: onClick fired'),
           })}
-          {renderPanel('No padding, has statusMessage', {
+          {renderPanel('Content', {
             padding: 'none',
-            title: 'Default title',
+            title: 'Panel with statusMessage and no padding',
             statusMessage: 'Error text',
             statusMessageOnClick: action('ErrorIndicator: onClick fired'),
           })}
-          {renderPanel('No title, loadingState is Error, no statusMessage', {
+          {renderPanel('Content', {
             loadingState: LoadingState.Error,
+            title: 'No title, loadingState is Error, no statusMessage',
           })}
-          {renderPanel('loadingState is Streaming', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'loadingState is Streaming',
             loadingState: LoadingState.Streaming,
           })}
 
-          {renderPanel('loadingState is Loading', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'loadingState is Loading',
             loadingState: LoadingState.Loading,
           })}
 
           {renderPanel('Default panel: no non-required props')}
-          {renderPanel('No padding', {
+          {renderPanel('Content', {
             padding: 'none',
+            title: 'No padding',
           })}
-          {renderPanel('Very long title', {
+          {renderPanel('Content', {
             title: 'Very long title that should get ellipsis when there is no more space',
           })}
-          {renderPanel('No title, streaming loadingState', {
+          {renderPanel('Content', {
+            title: 'No title, streaming loadingState',
             loadingState: LoadingState.Streaming,
           })}
-          {renderPanel('Error status, menu', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'Error status, menu',
             menu,
             statusMessage: 'Error text',
             statusMessageOnClick: action('ErrorIndicator: onClick fired'),
           })}
-          {renderPanel('No padding; has statusMessage, menu', {
+          {renderPanel('Content', {
             padding: 'none',
-            title: 'Default title',
+            title: 'No padding; has statusMessage, menu',
             menu,
             statusMessage: 'Error text',
             statusMessageOnClick: action('ErrorIndicator: onClick fired'),
           })}
-          {renderPanel('No title, loadingState is Error, no statusMessage, menu', {
+          {renderPanel('Content', {
+            title: 'No title, loadingState is Error, no statusMessage, menu',
             menu,
             loadingState: LoadingState.Error,
           })}
-          {renderPanel('loadingState is Streaming, menu', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'loadingState is Streaming, menu',
             menu,
             loadingState: LoadingState.Streaming,
           })}
-          {renderPanel('loadingState is Loading, menu', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'loadingState is Loading, menu',
             menu,
             loadingState: LoadingState.Loading,
           })}
-          {renderPanel('No padding, deprecated loading indicator', {
+          {renderPanel('Content', {
             padding: 'none',
-            title: 'Default title',
+            title: 'No padding, deprecated loading indicator',
             leftItems: [
               <PanelChrome.LoadingIndicator
                 loading={loading}
@@ -205,12 +207,12 @@ export const Examples = () => {
               />,
             ],
           })}
-          {renderPanel('Display mode = transparent', {
-            title: 'Default title',
+          {renderPanel('Content', {
+            title: 'Display mode = transparent',
             displayMode: 'transparent',
             menu,
           })}
-          {renderPanel('Actions with button no menu', {
+          {renderPanel('Content', {
             title: 'Actions with button no menu',
             actions: (
               <Button size="sm" variant="secondary" key="A">
@@ -218,8 +220,8 @@ export const Examples = () => {
               </Button>
             ),
           })}
-          {renderPanel('Panel with two actions', {
-            title: 'I have two buttons',
+          {renderPanel('Content', {
+            title: 'Panel with two actions',
             actions: [
               <Button size="sm" variant="secondary" key="A">
                 Breakdown
@@ -227,8 +229,8 @@ export const Examples = () => {
               <Button aria-label="Close" size="sm" variant="secondary" icon="times" key="B" />,
             ],
           })}
-          {renderPanel('With radio button', {
-            title: 'I have a radio button',
+          {renderPanel('Content', {
+            title: 'With radio button',
             actions: [
               <RadioButtonGroup
                 key="radio-button-group"
@@ -241,16 +243,16 @@ export const Examples = () => {
               />,
             ],
           })}
-          {renderCollapsiblePanel('Collapsible panel', {
-            title: 'Default title',
+          {renderCollapsiblePanel('Content', {
+            title: 'Collapsible panel',
             collapsible: true,
           })}
-          {renderPanel('Menu always visible', {
+          {renderPanel('Content', {
             title: 'Menu always visible',
             showMenuAlways: true,
             menu,
           })}
-          {renderPanel('Panel with action link', {
+          {renderPanel('Content', {
             title: 'Panel with action link',
             actions: (
               <TextLink external href="http://www.example.com/some/page">
@@ -258,8 +260,8 @@ export const Examples = () => {
               </TextLink>
             ),
           })}
-          {renderPanel('Action and menu (should be rare)', {
-            title: 'Action and menu',
+          {renderPanel('Content', {
+            title: 'Action and menu (should be rare)',
             menu,
             actions: (
               <Button size="sm" variant="secondary">
@@ -279,7 +281,7 @@ export const ExamplesHoverHeader = () => {
       <div>
         <Stack gap={2} alignItems="flex-start" wrap="wrap">
           {renderPanel('Title items, menu, hover header', {
-            title: 'Default title',
+            title: 'Default title with description',
             description: 'This is a description',
             menu,
             hoverHeader: true,