From 291f33541df8374f48eb294be93c98d775f5f68e Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 11 Jun 2025 11:53:30 +0100
Subject: [PATCH] Dashboards: Add `id`s to auto grid inputs for improved a11y
 (#106430)

---
 .../AutoGridLayoutManagerEditor.tsx            | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
index 5db18bd4553..f861aa45d46 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManagerEditor.tsx
@@ -104,9 +104,15 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
         className={styles.wideSelector}
       >
         {isStandardMinWidth ? (
-          <Combobox options={minWidthOptions} value={columnWidth} onChange={onNamedMinWidthChanged} />
+          <Combobox
+            id="min-column-width"
+            options={minWidthOptions}
+            value={columnWidth}
+            onChange={onNamedMinWidthChanged}
+          />
         ) : (
           <Input
+            id="min-column-width"
             defaultValue={columnWidth}
             onBlur={onCustomMinWidthChanged}
             ref={(ref) => setInputRef(ref)}
@@ -130,6 +136,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
       </Field>
       <Field label={t('dashboard.auto-grid.options.max-columns', 'Max columns')} className={styles.narrowSelector}>
         <Combobox
+          id="max-columns"
           options={colOptions}
           value={String(maxColumnCount)}
           onChange={({ value }) => layoutManager.onMaxColumnCountChanged(parseInt(value, 10))}
@@ -210,9 +217,10 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
         className={styles.wideSelector}
       >
         {isStandardHeight ? (
-          <Combobox options={minWidthOptions} value={rowHeight} onChange={onNamedMinHeightChanged} />
+          <Combobox id="min-height" options={minWidthOptions} value={rowHeight} onChange={onNamedMinHeightChanged} />
         ) : (
           <Input
+            id="min-height"
             defaultValue={rowHeight}
             onBlur={onCustomHeightChanged}
             ref={(ref) => setInputRef(ref)}
@@ -235,7 +243,11 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
         )}
       </Field>
       <Field label={t('dashboard.auto-grid.options.height-fill', 'Fill screen')} className={styles.narrowSelector}>
-        <InlineSwitch value={fillScreen} onChange={() => layoutManager.onFillScreenChanged(!fillScreen)} />
+        <InlineSwitch
+          id="fill-screen-toggle"
+          value={fillScreen}
+          onChange={() => layoutManager.onFillScreenChanged(!fillScreen)}
+        />
       </Field>
     </Stack>
   );