@aehrc/smart-forms-renderer 1.2.8 → 1.2.9

package/src/components/FormComponents/ItemParts/ClearButtonAdornment.tsx

@@ -14,29 +14,28 @@ export function ClearButtonAdornment(props: ClearButtonAdornmentProps) {
   }
 
   return (
-    <span title="Clear">
-      <IconButton
-        aria-label="Clear"
-        size="small"
-        tabIndex={-1}
-        onClick={(e) => {
-          onClear();
+    <IconButton
+      aria-hidden="true"
+      tabIndex={-1}
+      size="small"
+      title="Clear"
+      onClick={(e) => {
+        onClear();
 
-          // Manually re-focus the input field
-          const input = e.currentTarget.closest('.MuiOutlinedInput-root')?.querySelector('input');
-          if (input) {
-            input.focus();
-          }
-        }}
-        onMouseDown={(e) => {
-          e.preventDefault(); // Prevent the button from stealing focus
-        }}
-        className="StandardTextField-clearIndicator"
-        sx={{
-          p: 0.5
-        }}>
-        <ClearIcon fontSize="small" />
-      </IconButton>
-    </span>
+        // Manually re-focus the input field
+        const input = e.currentTarget.closest('.MuiOutlinedInput-root')?.querySelector('input');
+        if (input) {
+          input.focus();
+        }
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault(); // Prevent the button from stealing focus
+      }}
+      className="StandardTextField-clearIndicator"
+      sx={{
+        p: 0.5
+      }}>
+      <ClearIcon fontSize="small" />
+    </IconButton>
   );
 }

package/src/components/FormComponents/ItemParts/RadioFormGroup.tsx

@@ -1,14 +1,15 @@
 import Box from '@mui/material/Box';
 import RadioGroup from '@mui/material/RadioGroup';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
-import type { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import { useRendererConfigStore } from '../../../stores';
 import { getChoiceOrientation } from '../../../utils/choice';
-import { StyledRequiredTypography } from '../Item.styles';
+import { StyledFeedbackTypography } from '../Item.styles';
 import ClearInputButton from './ClearInputButton';
 import ExpressionUpdateFadingIcon from './ExpressionUpdateFadingIcon';
 import RadioOptionList from './RadioOptionList';
+import AccessibleFeedback from './AccessibleFeedback';
 
 interface ChoiceRadioGroupProps {
   qItem: QuestionnaireItem;
@@ -44,6 +45,8 @@ function RadioFormGroup(props: ChoiceRadioGroupProps) {
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
+  const feedbackId = qItem.type + '-' + qItem.linkId + '-feedback';
+
   return (
     <>
       <Box
@@ -64,6 +67,7 @@ function RadioFormGroup(props: ChoiceRadioGroupProps) {
               ? { 'aria-labelledby': 'label-' + qItem.linkId }
               : { 'aria-label': qItem.text ?? 'Unnamed radio group' })}
             aria-readonly={readOnly && readOnlyVisualStyle === 'readonly'}
+            aria-describedby={feedback ? feedbackId : undefined}
             row={orientation === ChoiceItemOrientation.Horizontal}
             sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}
             onChange={(e) => {
@@ -93,7 +97,11 @@ function RadioFormGroup(props: ChoiceRadioGroupProps) {
         <ClearInputButton buttonShown={!!valueRadio} readOnly={readOnly} onClear={onClear} />
       </Box>
 
-      {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
+      {feedback ? (
+        <AccessibleFeedback id={feedbackId}>
+          <StyledFeedbackTypography>{feedback}</StyledFeedbackTypography>
+        </AccessibleFeedback>
+      ) : null}
     </>
   );
 }

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionField.tsx

@@ -27,8 +27,8 @@ import type {
   PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import { useRendererConfigStore } from '../../../stores';
-import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface OpenChoiceSelectAnswerOptionFieldProps
   extends PropsWithIsTabledAttribute,
@@ -83,6 +83,7 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
             textFieldWidth={textFieldWidth}
             isTabled={isTabled}
             placeholder={entryFormat || displayPrompt}
+            helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
             {...params}
             slotProps={{
               input: {
@@ -99,8 +100,6 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
           />
         )}
       />
-
-      {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
     </>
   );
 }

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetField.tsx

@@ -28,8 +28,8 @@ import type {
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 import { useRendererConfigStore } from '../../../stores';
-import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface OpenChoiceSelectAnswerValueSetFieldProps
   extends PropsWithIsTabledAttribute,
@@ -88,6 +88,7 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
             textFieldWidth={textFieldWidth}
             isTabled={isTabled}
             placeholder={entryFormat || displayPrompt}
+            helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
             {...params}
             slotProps={{
               input: {
@@ -110,8 +111,6 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
           {terminologyError.answerValueSet}
         </Typography>
       ) : null}
-
-      {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
     </>
   );
 }

package/src/components/FormComponents/QuantityItem/QuantityField.tsx

@@ -22,6 +22,7 @@ import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 import { StandardTextField } from '../Textfield.styles';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface QuantityFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -104,7 +105,7 @@ function QuantityField(props: QuantityFieldProps) {
           )
         }
       }}
-      helperText={feedback}
+      helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
       data-test="q-item-quantity-field"
     />
   );

package/src/components/FormComponents/SliderItem/SliderField.tsx

@@ -22,8 +22,9 @@ import Stack from '@mui/material/Stack';
 import SliderLabels from './SliderLabels';
 import SliderDisplayValue from './SliderDisplayValue';
 import { useRendererConfigStore } from '../../../stores';
-import { StyledRequiredTypography } from '../Item.styles';
+import { StyledFeedbackTypography } from '../Item.styles';
 import { StandardSlider } from './Slider.styles';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface SliderFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -69,6 +70,8 @@ function SliderField(props: SliderFieldProps) {
 
   const hasLabels = !!(minLabel || maxLabel);
 
+  const feedbackId = itemType + '-' + linkId + '-feedback';
+
   return (
     <>
       <Stack sx={{ ...sliderSx }}>
@@ -95,12 +98,17 @@ function SliderField(props: SliderFieldProps) {
           disabled={readOnly && readOnlyVisualStyle === 'disabled'}
           readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
           aria-readonly={readOnly && readOnlyVisualStyle === 'readonly'}
+          aria-describedby={feedback ? feedbackId : undefined}
           valueLabelDisplay="auto"
           data-test="q-item-slider-field"
         />
       </Stack>
 
-      {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
+      {feedback ? (
+        <AccessibleFeedback id={feedbackId}>
+          <StyledFeedbackTypography>{feedback}</StyledFeedbackTypography>
+        </AccessibleFeedback>
+      ) : null}
     </>
   );
 }

package/src/components/FormComponents/StringItem/StringField.tsx

@@ -25,6 +25,7 @@ import ItemRepopulateButton from '../ItemParts/ItemRepopulateButton';
 import type { RenderingExtensions } from '../../../hooks/useRenderingExtensions';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { StandardTextField } from '../Textfield.styles';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface StringFieldProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -90,7 +91,7 @@ function StringField(props: StringFieldProps) {
           )
         }
       }}
-      helperText={feedback}
+      helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
       data-test="q-item-string-field"
     />
   );

package/src/components/FormComponents/TextItem/TextField.tsx

@@ -23,6 +23,7 @@ import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon'
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { RenderingExtensions } from '../../../hooks/useRenderingExtensions';
 import ItemRepopulateButton from '../ItemParts/ItemRepopulateButton';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface TextFieldProps {
   qItem: QuestionnaireItem;
@@ -79,7 +80,7 @@ function TextField(props: TextFieldProps) {
           )
         }
       }}
-      helperText={feedback}
+      helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
       data-test="q-item-text-field"
     />
   );

package/src/components/FormComponents/UrlItem/UrlField.tsx

@@ -22,6 +22,7 @@ import { StandardTextField } from '../Textfield.styles';
 import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface UrlFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -81,7 +82,7 @@ function UrlField(props: UrlFieldProps) {
           )
         }
       }}
-      helperText={feedback}
+      helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
       data-test="q-item-url-field"
     />
   );