Merge pull request #1747 from aehrc/issue/1741

Enhance accessibility for mandatory fields

Author: fongsean

CHANGELOG.md

@@ -10,6 +10,14 @@ For changelogs of other libraries, please refer to their respective repositories
 
 Changelog only includes changes from version 0.36.0 onwards.
 
+## [1.2.8] - 2025-10-28
+### Fixed
+- Required field asterisks accessibility enhancements also applies to group headings and tab buttons.
+
+## [1.2.7] - 2025-10-28
+### Fixed
+- Required field asterisks are now properly announced as "Mandatory field" by screen readers. Refer to issue [#1741](https://github.com/aehrc/smart-forms/issues/1741)
+
 ## [1.2.6] - 2025-10-28
 ### Fixed
 - Remove `openOnFocus` prop from autocomplete fields to allow screen readers to read out label, placeholder text and control's role. Refer to issue [#1733](https://github.com/aehrc/smart-forms/issues/1733)

apps/smart-forms-app/package.json

@@ -28,7 +28,7 @@
     "@aehrc/sdc-assemble": "^2.0.2",
     "@aehrc/sdc-populate": "^4.6.2",
     "@aehrc/sdc-template-extract": "^1.0.14",
-    "@aehrc/smart-forms-renderer": "^1.2.6",
+    "@aehrc/smart-forms-renderer": "^1.2.8",
     "@dnd-kit/core": "^6.3.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

packages/smart-forms-renderer/package.json

@@ -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 */}

packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupHeading.tsx

@@ -60,16 +60,6 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
       <Box position="relative" display="flex" flexGrow={1} alignItems="center">
-        {/* Required asterisk position is in front of text */}
-        {required && requiredIndicatorPosition === 'start' ? (
-          <RequiredAsterisk
-            readOnly={readOnly}
-            variant={variant}
-            sx={{ position: 'absolute', top: 0, left: -8 }}>
-            *
-          </RequiredAsterisk>
-        ) : null}
-
         {/* Label typography */}
         {/* Added 0.5 marginTop (4px) because item labels doesn't look in line with their fields */}
         {/* flexGrow: 1 is important if xhtml and markdown rendering has width: 100% */}
@@ -85,6 +75,16 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
             ...(parentStyles || {}),
             ...itemStyles
           }}>
+          {/* Required asterisk position is in front of text */}
+          {required && requiredIndicatorPosition === 'start' ? (
+            <RequiredAsterisk
+              readOnly={readOnly}
+              variant={variant}
+              sx={{ position: 'absolute', top: 4, left: -8 }}>
+              *
+            </RequiredAsterisk>
+          ) : null}
+
           <ItemTextSwitcher qItem={qItem} />
 
           {/* Required asterisk position is behind text */}

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemLabel.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import type { TypographyProps } from '@mui/material/Typography';
 import Typography from '@mui/material/Typography';
 import { useRendererConfigStore } from '../../../stores';
+import { SrOnly } from '../SrOnly.styles';
 
 interface RequiredAsteriskProps extends TypographyProps {
   readOnly?: boolean;
@@ -32,9 +33,18 @@ function RequiredAsterisk(props: RequiredAsteriskProps) {
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 
   return (
-    <Typography component="span" color={readOnly ? readOnlyTextColor : 'error'} {...rest}>
-      {children}
-    </Typography>
+    <>
+      <Typography
+        component="span"
+        color={readOnly ? readOnlyTextColor : 'error'}
+        aria-hidden="true" // Hides visible asterisk from screen readers
+        {...rest}>
+        {children}
+      </Typography>
+
+      {/* Screen-reader-only accessible label */}
+      <SrOnly>Mandatory field</SrOnly>
+    </>
   );
 }
 

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/RequiredAsterisk.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} />;