@aehrc/smart-forms-renderer 1.2.7 → 1.2.9

package/src/components/FormComponents/GroupItem/GroupHeading.tsx

@@ -64,15 +64,6 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
     <>
       <Box display="flex" alignItems="center" width="100%">
         <Box position="relative" display="flex" flexGrow={1} alignItems="center">
-          {/* Required asterisk position is in front of text */}
-          {required && requiredIndicatorPosition === 'start' ? (
-            <RequiredAsterisk
-              sx={{ position: 'absolute', top: 0, left: -8 }} // Adjust top and left values as needed
-            >
-              *
-            </RequiredAsterisk>
-          ) : null}
-
           {/* Group Heading typography */}
           {/* flexGrow: 1 is important if xhtml and markdown rendering has width: 100% */}
           <Typography
@@ -82,6 +73,14 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
             display="flex"
             alignItems="center"
             sx={{ flexGrow: 1, ...(parentStyles || {}) }}>
+            {/* Required asterisk position is in front of text */}
+            {required && requiredIndicatorPosition === 'start' ? (
+              <RequiredAsterisk
+                sx={{ position: 'absolute', top: 0, left: -8 }} // Adjust top and left values as needed
+              >
+                *
+              </RequiredAsterisk>
+            ) : null}
             <ItemTextSwitcher qItem={qItem} />
 
             {/* Required asterisk position is behind text */}

package/src/components/FormComponents/IntegerItem/IntegerField.tsx

@@ -25,6 +25,7 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import ItemRepopulateButton from '../ItemParts/ItemRepopulateButton';
 import type { RenderingExtensions } from '../../../hooks/useRenderingExtensions';
 import { StandardTextField } from '../Textfield.styles';
+import AccessibleFeedback from '../ItemParts/AccessibleFeedback';
 
 interface IntegerFieldProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -74,7 +75,7 @@ function IntegerField(props: IntegerFieldProps) {
       id={inputId}
       value={input}
       error={!!feedback}
-      helperText={feedback}
+      helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
       onChange={(event) => onInputChange(event.target.value)}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       label={displayPrompt}

package/src/components/FormComponents/Item.styles.ts

@@ -18,7 +18,7 @@
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
-export const StyledRequiredTypography = styled(Typography)(({ theme }) => ({
+export const StyledFeedbackTypography = styled(Typography)(({ theme }) => ({
   color: theme.palette.error.main,
   fontSize: '0.75rem',
   marginTop: 4

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2025 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type ReactNode } from 'react';
+
+interface AccessibleFeedbackProps {
+  children: ReactNode;
+  id?: string;
+}
+
+function AccessibleFeedback(props: AccessibleFeedbackProps) {
+  const { children, id } = props;
+
+  return (
+    <span id={id} role="alert" aria-live="assertive">
+      {children}
+    </span>
+  );
+}
+
+export default AccessibleFeedback;

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

@@ -10,9 +10,10 @@ import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import { useRendererConfigStore } from '../../../stores';
 import { getChoiceOrientation } from '../../../utils/choice';
 import CheckboxOptionList from '../ChoiceItems/CheckboxOptionList';
-import { StyledRequiredTypography } from '../Item.styles';
+import { StyledFeedbackTypography } from '../Item.styles';
 import ClearInputButton from './ClearInputButton';
 import ExpressionUpdateFadingIcon from './ExpressionUpdateFadingIcon';
+import AccessibleFeedback from './AccessibleFeedback';
 
 interface ChoiceCheckboxFormGroupProps {
   qItem: QuestionnaireItem;
@@ -50,6 +51,8 @@ function CheckboxFormGroup(props: ChoiceCheckboxFormGroupProps) {
 
   const answersEmpty = answers.length === 0;
 
+  const feedbackId = `${qItem.type}-${qItem.linkId}-feedback`;
+
   return (
     <>
       <Box
@@ -68,6 +71,7 @@ function CheckboxFormGroup(props: ChoiceCheckboxFormGroupProps) {
             {...(!isTabled
               ? { 'aria-labelledby': 'label-' + qItem.linkId }
               : { 'aria-label': qItem.text ?? 'Unnamed checkbox list' })}
+            aria-describedby={feedback ? feedbackId : undefined}
             role="group"
             row={orientation === ChoiceItemOrientation.Horizontal}
             sx={inputsFlexGrow ? { width: '100%', flexWrap: 'nowrap' } : {}}>
@@ -91,7 +95,11 @@ function CheckboxFormGroup(props: ChoiceCheckboxFormGroupProps) {
         <ClearInputButton buttonShown={!answersEmpty} readOnly={readOnly} onClear={onClear} />
       </Box>
 
-      {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}
+      {feedback ? (
+        <AccessibleFeedback id={feedbackId}>
+          <StyledFeedbackTypography>{feedback}</StyledFeedbackTypography>
+        </AccessibleFeedback>
+      ) : null}
     </>
   );
 }

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"
     />
   );

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -25,6 +25,8 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
 import { useFocusTabHeading } from '../../hooks/useFocusTabHeading';
 import useDisplayCqfAndCalculatedExpression from '../../hooks/useDisplayCqfAndCalculatedExpression';
+import RequiredAsterisk from '../FormComponents/ItemParts/RequiredAsterisk';
+import useRenderingExtensions from '../../hooks/useRenderingExtensions';
 
 interface FormBodySingleTabProps {
   qItem: QuestionnaireItem;
@@ -40,6 +42,10 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
   const switchTab = useQuestionnaireStore.use.switchTab();
   const disableHeadingFocusOnTabSwitch =
     useRendererConfigStore.use.disableHeadingFocusOnTabSwitch();
+  const requiredIndicatorPosition = useRendererConfigStore.use.requiredIndicatorPosition();
+
+  const { required } = useRenderingExtensions(qItem);
+  const readOnly = qItem.readOnly ?? false;
 
   const focusHeading = useFocusTabHeading();
 
@@ -68,14 +74,28 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
         <ListItemText
           primary={
             <Box display="flex" alignItems="center" justifyContent="space-between">
-              <Typography
-                id={`tab-${listIndex}`}
-                component="span"
-                fontWeight={600}
-                fontSize="0.8125rem"
-                aria-label={itemTextAriaLabel}>
-                {tabLabel}
-              </Typography>
+              <Box display="flex" gap={0.25}>
+                {/* Required asterisk position is in front of text */}
+                {required && requiredIndicatorPosition === 'start' ? (
+                  <RequiredAsterisk>*</RequiredAsterisk>
+                ) : null}
+                <Typography
+                  id={`tab-${listIndex}`}
+                  component="span"
+                  fontWeight={600}
+                  fontSize="0.8125rem"
+                  aria-label={itemTextAriaLabel}>
+                  {tabLabel}
+                </Typography>
+
+                {/* Required asterisk position is behind text */}
+                {required && requiredIndicatorPosition === 'end' ? (
+                  <RequiredAsterisk readOnly={readOnly} variant="groupHeading">
+                    *
+                  </RequiredAsterisk>
+                ) : null}
+              </Box>
+
               <Box display="flex" minHeight={24} minWidth={24} ml={1}>
                 {contextDisplayItems.map((item) => {
                   return <ContextDisplayItem key={item.linkId} displayItem={item} />;