Stop "add values" from closing on adding a value (#9815)

Instead of closing the "add values" popover when you add a value, we now
keep it open to facilitate rapid entry of multiple values. It already
clears successfully and adds the new value to the list, so it's actually
quite smooth to use from just the keyboard now!

Additionally, I propose using a `form` element for the add values
popover, because it really is just a tiny form. This also allows us to
use regular form handling instead for submission instead of checking
what key the user pressed. It also means we don't need to specify the
action in the button, because the form handles it.

There's a few more things fixed: 
- I've added a label (only visible to screen readers) to the input label
(as per standard a11y guidelines).
- When you add a value by pressing the "add" button, your focus returns
to the input field, so that you can just start typing out the next one.
this is handy if you submit by mouse click or by tabbing to the button
instead of just hitting enter inside the input field.

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx

@@ -8,9 +8,11 @@ import {
     styled,
     TextField,
 } from '@mui/material';
+import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 import {
     type FC,
     forwardRef,
+    useId,
     useImperativeHandle,
     useRef,
     useState,
@@ -135,6 +137,8 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
             ref,
             () => positioningRef.current as HTMLButtonElement,
         );
+        const inputRef = useRef<HTMLInputElement>(null);
+        const inputId = useId();
 
         const handleAdd = () => {
             const newValues = parseParameterStrings(inputValues);
@@ -152,14 +156,7 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
             onAddValues(newValues);
             setInputValues('');
             setError('');
-            setOpen(false);
-        };
-
-        const handleKeyPress = (event: React.KeyboardEvent) => {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                handleAdd();
-            }
+            inputRef?.current?.focus();
         };
 
         return (
@@ -186,32 +183,44 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
                         horizontal: 'left',
                     }}
                 >
-                    <div>
+                    <form
+                        onSubmit={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            handleAdd();
+                        }}
+                    >
                         {error && <ErrorMessage>{error}</ErrorMessage>}
                         <InputRow>
+                            <ScreenReaderOnly>
+                                <label htmlFor={inputId}>
+                                    Constraint Value
+                                </label>
+                            </ScreenReaderOnly>
                             <StyledTextField
+                                id={inputId}
                                 placeholder='Enter value'
                                 value={inputValues}
                                 onChange={(e) => {
                                     setInputValues(e.target.value);
                                     setError('');
                                 }}
-                                onKeyPress={handleKeyPress}
                                 size='small'
                                 variant='standard'
                                 fullWidth
+                                inputRef={inputRef}
                                 autoFocus
                             />
                             <Button
                                 variant='text'
+                                type='submit'
                                 color='primary'
-                                onClick={handleAdd}
                                 disabled={!inputValues.trim()}
                             >
                                 Add
                             </Button>
                         </InputRow>
-                    </div>
+                    </form>
                 </StyledPopover>
             </>
         );