feat: wrap buttons in a fieldset and add an explanatory legend. (#6289)

This makes it more obvious to everyone what the buttons do.

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,12 +108,19 @@ export const ConnectedInstances = () => {
     return (
         <Container>
             <EnvironmentSelectionContainer>
+                <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={() => {
@@ -114,6 +130,7 @@ export const ConnectedInstances = () => {
                             </label>
                         );
                     })}
+                </fieldset>
             </EnvironmentSelectionContainer>
             <ConnectedInstancesTable
                 loading={false}