From c30765bbeac13d5b8f30d2bbac918cc96f3014d0 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 5 Jun 2025 15:15:31 +0100
Subject: [PATCH] Dashboards: A11y improvements for edit experience (#106321)

* Dashboards: A11y improvements for edit experience

* Pass descriptor to render function
---
 .../edit-pane/VizPanelEditableElement.tsx     | 11 ++++--
 .../panel-edit/getPanelFrameOptions.tsx       | 34 +++++++++++++------
 .../layout-auto-grid/AutoGridItemEditor.tsx   |  7 ++--
 .../DashboardGridItemEditor.tsx               |  7 ++--
 .../PanelEditor/OptionsPaneItemDescriptor.tsx |  6 ++--
 .../PanelEditor/getPanelFrameOptions.tsx      | 20 ++++++-----
 6 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
index 5d7e1485cbb..58f6d2c2ddd 100644
--- a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
@@ -55,22 +55,27 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.title-option', 'Title'),
+            id: 'PanelFrameTitle',
             value: panel.state.title,
             popularRank: 1,
-            render: () => <PanelFrameTitleInput panel={panel} isNewElement={isNewElement} />,
+            render: (descriptor) => (
+              <PanelFrameTitleInput id={descriptor.props.id} panel={panel} isNewElement={isNewElement} />
+            ),
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.description', 'Description'),
+            id: 'description-text-area',
             value: panel.state.description,
-            render: () => <PanelDescriptionTextArea panel={panel} />,
+            render: (descriptor) => <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />,
           })
         )
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.viz-panel.options.transparent-background', 'Transparent background'),
-            render: () => <PanelBackgroundSwitch panel={panel} />,
+            id: 'transparent-background',
+            render: (descriptor) => <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />,
           })
         );
     }, [panel, isNewElement]);
diff --git a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
index 6821a05e542..75fd0c1ef2a 100644
--- a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
@@ -37,10 +37,11 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard-scene.get-panel-frame-options.title.title', 'Title'),
+        id: 'PanelFrameTitle',
         value: panel.state.title,
         popularRank: 1,
-        render: function renderTitle() {
-          return <PanelFrameTitleInput panel={panel} />;
+        render: function renderTitle(descriptor) {
+          return <PanelFrameTitleInput id={descriptor.props.id} panel={panel} />;
         },
         addon: config.featureToggles.dashgpt && (
           <GenAIPanelTitleButton
@@ -54,9 +55,10 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard-scene.get-panel-frame-options.title.description', 'Description'),
+        id: 'description-text-area',
         value: panel.state.description,
-        render: function renderDescription() {
-          return <PanelDescriptionTextArea panel={panel} />;
+        render: function renderDescription(descriptor) {
+          return <PanelDescriptionTextArea id={descriptor.props.id} panel={panel} />;
         },
         addon: config.featureToggles.dashgpt && (
           <GenAIPanelDescriptionButton
@@ -69,8 +71,9 @@ export function getPanelFrameOptions(panel: VizPanel): OptionsPaneCategoryDescri
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard-scene.get-panel-frame-options.title.transparent-background', 'Transparent background'),
-        render: function renderTransparent() {
-          return <PanelBackgroundSwitch panel={panel} />;
+        id: 'transparent-background',
+        render: function renderTransparent(descriptor) {
+          return <PanelBackgroundSwitch id={descriptor.props.id} panel={panel} />;
         },
       })
     )
@@ -112,7 +115,15 @@ function ScenePanelLinksEditor({ panelLinks }: ScenePanelLinksEditorProps) {
   );
 }
 
-export function PanelFrameTitleInput({ panel, isNewElement }: { panel: VizPanel; isNewElement?: boolean }) {
+export function PanelFrameTitleInput({
+  panel,
+  isNewElement,
+  id,
+}: {
+  panel: VizPanel;
+  isNewElement?: boolean;
+  id?: string;
+}) {
   const { title } = panel.useState();
   const notInPanelEdit = panel.getPanelContext().app !== CoreApp.PanelEditor;
   const [prevTitle, setPrevTitle] = React.useState(panel.state.title);
@@ -125,6 +136,7 @@ export function PanelFrameTitleInput({ panel, isNewElement }: { panel: VizPanel;
     <Input
       ref={ref}
       data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Title')}
+      id={id}
       value={title}
       onFocus={() => setPrevTitle(title)}
       onBlur={() => editPanelTitleAction(panel, title, prevTitle)}
@@ -135,13 +147,13 @@ export function PanelFrameTitleInput({ panel, isNewElement }: { panel: VizPanel;
   );
 }
 
-export function PanelDescriptionTextArea({ panel }: { panel: VizPanel }) {
+export function PanelDescriptionTextArea({ panel, id }: { panel: VizPanel; id?: string }) {
   const { description } = panel.useState();
   const [prevDescription, setPrevDescription] = React.useState(panel.state.description);
 
   return (
     <TextArea
-      id="description-text-area"
+      id={id}
       value={description}
       onChange={(evt) => panel.setState({ description: evt.currentTarget.value })}
       onFocus={() => setPrevDescription(panel.state.description)}
@@ -157,7 +169,7 @@ export function PanelDescriptionTextArea({ panel }: { panel: VizPanel }) {
   );
 }
 
-export function PanelBackgroundSwitch({ panel }: { panel: VizPanel }) {
+export function PanelBackgroundSwitch({ panel, id }: { panel: VizPanel; id?: string }) {
   const { displayMode = 'default' } = panel.useState();
 
   const onChange = () => {
@@ -171,7 +183,7 @@ export function PanelBackgroundSwitch({ panel }: { panel: VizPanel }) {
     });
   };
 
-  return <Switch value={displayMode === 'transparent'} id="transparent-background" onChange={onChange} />;
+  return <Switch value={displayMode === 'transparent'} id={id} onChange={onChange} />;
 }
 
 function updatePanelTitleState(panel: VizPanel, title: string) {
diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
index 5531db284e9..1c77c0d9261 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemEditor.tsx
@@ -15,11 +15,12 @@ export function getOptions(model: AutoGridItem): OptionsPaneCategoryDescriptor[]
   }).addItem(
     new OptionsPaneItemDescriptor({
       title: t('dashboard.auto-grid.item-options.repeat.variable.title', 'Repeat by variable'),
+      id: 'repeat-by-variable-select',
       description: t(
         'dashboard.auto-grid.item-options.repeat.variable.description',
         'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.'
       ),
-      render: () => <RepeatByOption item={model} />,
+      render: (descriptor) => <RepeatByOption id={descriptor.props.id} item={model} />,
     })
   );
 
@@ -28,12 +29,12 @@ export function getOptions(model: AutoGridItem): OptionsPaneCategoryDescriptor[]
   return [repeatCategory, conditionalRenderingCategory];
 }
 
-function RepeatByOption({ item }: { item: AutoGridItem }) {
+function RepeatByOption({ item, id }: { item: AutoGridItem; id?: string }) {
   const { variableName } = item.useState();
 
   return (
     <RepeatRowSelect2
-      id="repeat-by-variable-select"
+      id={id}
       sceneContext={item}
       repeat={variableName}
       onChange={(value?: string) => item.setRepeatByVariable(value)}
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
index 30627f76300..2ef2e14eda3 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
@@ -18,11 +18,12 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.default-layout.item-options.repeat.variable.title', 'Repeat by variable'),
+        id: 'repeat-by-variable-select',
         description: t(
           'dashboard.default-layout.item-options.repeat.variable.description',
           'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.'
         ),
-        render: () => <RepeatByOption gridItem={gridItem} />,
+        render: (descriptor) => <RepeatByOption id={descriptor.props.id} gridItem={gridItem} />,
       })
     )
     .addItem(
@@ -86,12 +87,12 @@ function MaxPerRowOption({ gridItem }: OptionComponentProps) {
   );
 }
 
-function RepeatByOption({ gridItem }: OptionComponentProps) {
+function RepeatByOption({ gridItem, id }: OptionComponentProps & { id?: string }) {
   const { variableName, width } = gridItem.useState();
 
   return (
     <RepeatRowSelect2
-      id="repeat-by-variable-select"
+      id={id}
       sceneContext={gridItem}
       repeat={variableName}
       onChange={(value?: string) => {
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index 4612d6e28c9..c9ff8e91ea8 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -16,7 +16,7 @@ export interface OptionsPaneItemInfo {
   value?: any;
   description?: string;
   popularRank?: number;
-  render: () => React.ReactElement;
+  render: (descriptor: OptionsPaneItemDescriptor) => React.ReactElement;
   skipField?: boolean;
   showIf?: () => boolean;
   /** Hook for controlling visibility */
@@ -66,7 +66,7 @@ function OptionsPaneItem({ itemDescriptor, searchQuery }: OptionsPaneItemProps)
   }
 
   if (skipField) {
-    return render();
+    return render(itemDescriptor);
   }
 
   return (
@@ -77,7 +77,7 @@ function OptionsPaneItem({ itemDescriptor, searchQuery }: OptionsPaneItemProps)
       aria-label={selectors.components.PanelEditor.OptionsPane.fieldLabel(key)}
       htmlFor={id}
     >
-      {render()}
+      {render(itemDescriptor)}
     </Field>
   );
 }
diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
index a481cc0e016..4461b4da51d 100644
--- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
@@ -40,13 +40,14 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-panel-frame-category.title.title', 'Title'),
+        id: 'PanelFrameTitle',
         value: panel.title,
         popularRank: 1,
-        render: function renderTitle() {
+        render: function renderTitle(descriptor) {
           return (
             <Input
               data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Title')}
-              id="PanelFrameTitle"
+              id={descriptor.props.id}
               defaultValue={panel.title}
               onBlur={(e) => onPanelConfigChange('title', e.currentTarget.value)}
             />
@@ -64,13 +65,14 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-panel-frame-category.title.description', 'Description'),
+        id: 'description-text-area',
         description: panel.description,
         value: panel.description,
-        render: function renderDescription() {
+        render: function renderDescription(descriptor) {
           return (
             <TextArea
               data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Description')}
-              id="description-text-area"
+              id={descriptor.props.id}
               defaultValue={panel.description}
               onBlur={(e) => onPanelConfigChange('description', e.currentTarget.value)}
             />
@@ -84,12 +86,13 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: t('dashboard.get-panel-frame-category.title.transparent-background', 'Transparent background'),
-        render: function renderTransparent() {
+        id: 'transparent-background',
+        render: function renderTransparent(descriptor) {
           return (
             <Switch
               data-testid={selectors.components.PanelEditor.OptionsPane.fieldInput('Transparent background')}
               value={panel.transparent}
-              id="transparent-background"
+              id={descriptor.props.id}
               onChange={(e) => onPanelConfigChange('transparent', e.currentTarget.checked)}
             />
           );
@@ -127,12 +130,13 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         .addItem(
           new OptionsPaneItemDescriptor({
             title: t('dashboard.get-panel-frame-category.title.repeat-by-variable', 'Repeat by variable'),
+            id: 'repeat-by-variable-select',
             description:
               'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.',
-            render: function renderRepeatOptions() {
+            render: function renderRepeatOptions(descriptor) {
               return (
                 <RepeatRowSelect
-                  id="repeat-by-variable-select"
+                  id={descriptor.props.id}
                   repeat={panel.repeat}
                   onChange={(value?: string) => {
                     onPanelConfigChange('repeat', value);