From ddae97080d98026ff93297e4d14eb716e9c2fb79 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 21 Feb 2024 12:15:02 +0800
Subject: [PATCH] feat: wrap buttons in a fieldset and add an explanatory
 legend. (#6289)

This makes it more obvious to everyone what the buttons do.
---
 .../ConnectedInstances/ConnectedInstances.tsx | 49 +++++++++++++------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx
index f04bfe07cb..4bb1046899 100644
--- a/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx
+++ b/frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx
@@ -40,7 +40,16 @@ const EnvironmentSelectionContainer = styled('div')(({ theme }) => ({
         outlineOffset: theme.spacing(0.5),
     },
 
-    input: {
+    fieldset: {
+        border: 'none',
+        padding: 0,
+        margin: 0,
+    },
+    legend: {
+        marginBlockEnd: theme.spacing(3),
+    },
+
+    '.visually-hidden': {
         border: 0,
         clip: 'rect(0 0 0 0)',
         height: 'auto',
@@ -99,21 +108,29 @@ export const ConnectedInstances = () => {
     return (
         <Container>
             <EnvironmentSelectionContainer>
-                {allEnvironmentsSorted.map((env) => {
-                    return (
-                        <label key={env}>
-                            {env}
-                            <input
-                                defaultChecked={currentEnvironment === env}
-                                type='radio'
-                                name='active-environment'
-                                onClick={() => {
-                                    setCurrentEnvironment(env);
-                                }}
-                            />
-                        </label>
-                    );
-                })}
+                <fieldset>
+                    <legend>
+                        Select which environment to display data for. Only
+                        environments that have received traffic for this
+                        application will be shown here.
+                    </legend>
+                    {allEnvironmentsSorted.map((env) => {
+                        return (
+                            <label key={env}>
+                                {env}
+                                <input
+                                    defaultChecked={currentEnvironment === env}
+                                    className='visually-hidden'
+                                    type='radio'
+                                    name='active-environment'
+                                    onClick={() => {
+                                        setCurrentEnvironment(env);
+                                    }}
+                                />
+                            </label>
+                        );
+                    })}
+                </fieldset>
             </EnvironmentSelectionContainer>
             <ConnectedInstancesTable
                 loading={false}