feat: improve keyboard navigation and screen reader accessibility for… (aehrc#1767)

* feat: improve keyboard navigation and screen reader accessibility for choice dropdown fields

- Remove multiline prop from Choice Select fields to render as proper single-line combobox
- Add aria-labelledby to link field labels for proper VoiceOver announcement
- Use aria-label fallback for tabled fields without visible labels

This ensures VoiceOver announces the field name (e.g., 'Smoking status, combo box')
and enables standard keyboard navigation (Tab to focus, Arrow keys to navigate options,
Enter to select, Escape to close).

Fixes aehrc#1762

* fix: Update Choice test to query for input instead of textarea

After removing multiline prop from Select fields, the component now renders as <input> instead of <textarea>. Updated test to query for 'input' element to match the new rendering.

* feat: Add openOnFocus to enable keyboard-only dropdown access

Add openOnFocus prop to MUI Autocomplete components for Select choice fields.
This enables the dropdown to open automatically when the field receives Tab focus,
allowing full keyboard-only navigation without requiring mouse interaction.

- Tab to field → dropdown opens automatically
- Arrow keys → navigate options
- Enter → select option
- Escape → close dropdown

* feat: Add explicit role='combobox' for proper VoiceOver recognition

- Explicitly set role='combobox' on input element to ensure entire dropdown component (text input + arrow) is recognized as one unit
- Removes 'openOnFocus' to prevent automatic dropdown opening that interferes with VoiceOver field name announcement
- Maintains aria-labelledby for proper field name announcement

This ensures VoiceOver announces 'Smoking status, combo box' and provides proper keyboard navigation instructions to users.

Fixes aehrc#1762

* style: Fix prettier formatting in ChoiceSelectAnswerOptionFields

---------

Co-authored-by: Maryam Mehdizadeh <maryam.mehdizadeh@csiro.au>

Author: MaryamMehd

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx

@@ -78,7 +78,6 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
         readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
         renderInput={(params) => (
           <StandardTextField
-            multiline
             textFieldWidth={textFieldWidth}
             isTabled={isTabled}
             placeholder={entryFormat || displayPrompt}
@@ -93,7 +92,14 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
                     <ExpressionUpdateFadingIcon fadeIn={expressionUpdated} disabled={readOnly} />
                     <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                   </>
-                )
+                ),
+                inputProps: {
+                  ...params.inputProps,
+                  ...(isTabled
+                    ? { 'aria-label': qItem.text ?? 'Unnamed choice dropdown' }
+                    : { 'aria-labelledby': `label-${qItem.linkId}` }),
+                  role: 'combobox'
+                }
               }
             }}
           />

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx

@@ -85,7 +85,6 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
           readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
           renderInput={(params) => (
             <StandardTextField
-              multiline
               textFieldWidth={textFieldWidth}
               isTabled={isTabled}
               placeholder={entryFormat || displayPrompt}
@@ -103,7 +102,10 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
                   ),
                   inputProps: {
                     ...params.inputProps,
-                    'aria-label': qItem.text ?? 'Unnamed choice dropdown'
+                    ...(isTabled
+                      ? { 'aria-label': qItem.text ?? 'Unnamed choice dropdown' }
+                      : { 'aria-labelledby': `label-${qItem.linkId}` }),
+                    role: 'combobox'
                   }
                 }
               }}

packages/smart-forms-renderer/src/stories/itemTypes/Choice.stories.tsx

@@ -122,7 +122,7 @@ export const ChoiceAnswerOptionBasic: Story = createStory({
     expect(resultAfterClear).toHaveLength(0);
 
     const elementAfterClear = await findByLinkIdOrLabel(canvasElement, aoTargetLinkId);
-    const input = elementAfterClear.querySelector('textarea');
+    const input = elementAfterClear.querySelector('input');
     expect(input?.value).toBe('');
   }
 }) as Story;