@aehrc/smart-forms-renderer 1.0.0-alpha.30 → 1.0.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/components/FormComponents/GroupItem/TabButtonsWrapper.js +10 -0
  2. package/lib/components/FormComponents/GroupItem/TabButtonsWrapper.js.map +1 -1
  3. package/lib/components/Renderer/FormBodyTabbed.js +1 -1
  4. package/lib/components/Renderer/FormBodyTabbed.js.map +1 -1
  5. package/lib/components/Tabs/FormBodySingleTab.js +6 -0
  6. package/lib/components/Tabs/FormBodySingleTab.js.map +1 -1
  7. package/lib/hooks/useFocusTabHeading.d.ts +1 -0
  8. package/lib/hooks/useFocusTabHeading.js +20 -0
  9. package/lib/hooks/useFocusTabHeading.js.map +1 -0
  10. package/package.json +1 -1
  11. package/src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx +13 -0
  12. package/src/components/Renderer/FormBodyTabbed.tsx +1 -0
  13. package/src/components/Tabs/FormBodySingleTab.tsx +7 -0
  14. package/src/hooks/useFocusTabHeading.ts +21 -0
  15. package/src/stories/assets/questionnaires/QAdvancedTextApperance.ts +1 -1
package/lib/components/FormComponents/GroupItem/TabButtonsWrapper.js CHANGED
@@ -21,11 +21,13 @@ import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores'
21
21
  import NextTabButton from './NextTabButton';
22
22
  import PreviousTabButton from './PreviousTabButton';
23
23
  import useNextAndPreviousVisibleTabs from '../../../hooks/useNextAndPreviousVisibleTabs';
24
+ import { useFocusTabHeading } from '../../../hooks/useFocusTabHeading';
24
25
  const TabButtonsWrapper = memo(function TabButtonsWrapper(props) {
25
26
  const { currentTabIndex, tabs } = props;
26
27
  const switchTab = useQuestionnaireStore.use.switchTab();
27
28
  const disableTabButtons = useRendererStylingStore.use.disableTabButtons();
28
29
  const { previousTabIndex, nextTabIndex, numOfVisibleTabs } = useNextAndPreviousVisibleTabs(currentTabIndex, tabs);
30
+ const focusHeading = useFocusTabHeading();
29
31
  const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
30
32
  // Event handlers
31
33
  function handlePreviousTabButtonClick() {
@@ -35,6 +37,10 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props) {
35
37
  switchTab(previousTabIndex);
36
38
  // Scroll to top of page
37
39
  window.scrollTo(0, 0);
40
+ // Focus the first heading in the new tab panel
41
+ setTimeout(() => {
42
+ focusHeading(`tabpanel-${previousTabIndex}`);
43
+ }, 100); // Small delay to ensure panel is rendered
38
44
  }
39
45
  function handleNextTabButtonClick() {
40
46
  if (nextTabIndex === null) {
@@ -43,6 +49,10 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props) {
43
49
  switchTab(nextTabIndex);
44
50
  // Scroll to top of page
45
51
  window.scrollTo(0, 0);
52
+ // Focus the first heading in the new tab panel
53
+ setTimeout(() => {
54
+ focusHeading(`tabpanel-${nextTabIndex}`);
55
+ }, 100); // Small delay to ensure panel is rendered
46
56
  }
47
57
  if (tabsNotDefined) {
48
58
  return null;
package/lib/components/FormComponents/GroupItem/TabButtonsWrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabButtonsWrapper.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,6BAA6B,MAAM,8CAA8C,CAAC;AAOzF,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC,KAA6B;IACrF,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAExC,MAAM,SAAS,GAAG,qBAAqB,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;IACxD,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAE1E,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,6BAA6B,CACxF,eAAe,EACf,IAAI,CACL,CAAC;IAEF,MAAM,cAAc,GAAG,eAAe,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC;IAE3E,iBAAiB;IACjB,SAAS,4BAA4B;QACnC,IAAI,gBAAgB,KAAK,IAAI,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,SAAS,CAAC,gBAAgB,CAAC,CAAC;QAE5B,wBAAwB;QACxB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxB,CAAC;IAED,SAAS,wBAAwB;QAC/B,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,SAAS,CAAC,YAAY,CAAC,CAAC;QAExB,wBAAwB;QACxB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxB,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,2EAA2E;IAC3E,IAAI,iBAAiB,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,uBAAuB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAC1D,MAAM,mBAAmB,GAAG,YAAY,KAAK,IAAI,CAAC;IAElD,gIAAgI;IAChI,MAAM,kBAAkB,GAAG,gBAAgB,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC,aACtB,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,KAAC,iBAAiB,IAChB,UAAU,EAAE,kBAAkB,EAC9B,kBAAkB,EAAE,4BAA4B,GAChD,CACH,EACD,KAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,GAAI,EACnB,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,KAAC,aAAa,IAAC,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAE,wBAAwB,GAAI,CAC5F,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"TabButtonsWrapper.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx"],"names":[],"mappings":"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"}
package/lib/components/Renderer/FormBodyTabbed.js CHANGED
@@ -60,7 +60,7 @@ function FormBodyTabbed(props) {
60
60
  }
61
61
  const isRepeated = (_a = qItem.repeats) !== null && _a !== void 0 ? _a : false;
62
62
  const tabIsMarkedAsComplete = (_b = tabs[qItem.linkId].isComplete) !== null && _b !== void 0 ? _b : false;
63
- return (_jsx(TabPanel, { sx: { p: 0 }, value: i.toString(), "data-test": "renderer-tab-panel", children: _jsx(GroupItem, { qItem: qItem, qrItem: qrItem !== null && qrItem !== void 0 ? qrItem : null, isRepeated: isRepeated, groupCardElevation: 1, tabIsMarkedAsComplete: tabIsMarkedAsComplete, tabs: tabs, currentTabIndex: currentTab, parentIsReadOnly: parentIsReadOnly, onQrItemChange: handleQrGroupChange }) }, qItem.linkId));
63
+ return (_jsx(TabPanel, { sx: { p: 0 }, value: i.toString(), id: `tabpanel-${i}`, "data-test": "renderer-tab-panel", children: _jsx(GroupItem, { qItem: qItem, qrItem: qrItem !== null && qrItem !== void 0 ? qrItem : null, isRepeated: isRepeated, groupCardElevation: 1, tabIsMarkedAsComplete: tabIsMarkedAsComplete, tabs: tabs, currentTabIndex: currentTab, parentIsReadOnly: parentIsReadOnly, onQrItemChange: handleQrGroupChange }) }, qItem.linkId));
64
64
  }) }))] }) }));
65
65
  }
66
66
  export default FormBodyTabbed;
package/lib/components/Renderer/FormBodyTabbed.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormBodyTabbed.js","sourceRoot":"","sources":["../../../src/components/Renderer/FormBodyTabbed.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"FormBodyTabbed.js","sourceRoot":"","sources":["../../../src/components/Renderer/FormBodyTabbed.tsx"],"names":[],"mappings":"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"}
package/lib/components/Tabs/FormBodySingleTab.js CHANGED
@@ -22,12 +22,18 @@ import ListItemText from '@mui/material/ListItemText';
22
22
  import Typography from '@mui/material/Typography';
23
23
  import { useQuestionnaireStore } from '../../stores';
24
24
  import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
25
+ import { useFocusTabHeading } from '../../hooks/useFocusTabHeading';
25
26
  const FormBodySingleTab = memo(function FormBodySingleTab(props) {
26
27
  const { contextDisplayItems, selected, tabLabel, listIndex } = props;
27
28
  const switchTab = useQuestionnaireStore.use.switchTab();
29
+ const focusHeading = useFocusTabHeading();
28
30
  function handleTabClick() {
29
31
  switchTab(listIndex);
30
32
  window.scrollTo(0, 0);
33
+ // Focus the first heading in the new tab panel
34
+ setTimeout(() => {
35
+ focusHeading(`tabpanel-${listIndex}`);
36
+ }, 100); // Small delay to ensure panel is rendered
31
37
  }
32
38
  return (_jsx(_Fragment, { children: _jsx(ListItemButton, { selected: selected, sx: { my: 0.1, minHeight: '36px' }, onClick: handleTabClick, children: _jsx(ListItemText, { primary: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { fontWeight: 600, fontSize: "0.8125rem", children: tabLabel }), _jsx(Box, { display: "flex", minHeight: 24, minWidth: 24, ml: 1, children: contextDisplayItems.map((item) => {
33
39
  return _jsx(ContextDisplayItem, { displayItem: item }, item.linkId);
package/lib/components/Tabs/FormBodySingleTab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormBodySingleTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/FormBodySingleTab.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAShF,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC,KAA6B;IACrF,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,MAAM,SAAS,GAAG,qBAAqB,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;IAExD,SAAS,cAAc;QACrB,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxB,CAAC;IAED,OAAO,CACL,4BACE,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,EAClC,OAAO,EAAE,cAAc,YACvB,KAAC,YAAY,IACX,OAAO,EACL,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,aACpE,KAAC,UAAU,IAAC,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAC,WAAW,YAC9C,QAAQ,GACE,EACb,KAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YACnD,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gCAChC,OAAO,KAAC,kBAAkB,IAAmB,WAAW,EAAE,IAAI,IAA9B,IAAI,CAAC,MAAM,CAAuB,CAAC;4BACrE,CAAC,CAAC,GACE,IACF,GAER,GACa,GAChB,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"FormBodySingleTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/FormBodySingleTab.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AASpE,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC,KAA6B;IACrF,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,MAAM,SAAS,GAAG,qBAAqB,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;IACxD,MAAM,YAAY,GAAG,kBAAkB,EAAE,CAAC;IAE1C,SAAS,cAAc;QACrB,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEtB,+CAA+C;QAC/C,UAAU,CAAC,GAAG,EAAE;YACd,YAAY,CAAC,YAAY,SAAS,EAAE,CAAC,CAAC;QACxC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,0CAA0C;IACrD,CAAC;IAED,OAAO,CACL,4BACE,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,EAClC,OAAO,EAAE,cAAc,YACvB,KAAC,YAAY,IACX,OAAO,EACL,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,aACpE,KAAC,UAAU,IAAC,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAC,WAAW,YAC9C,QAAQ,GACE,EACb,KAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YACnD,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gCAChC,OAAO,KAAC,kBAAkB,IAAmB,WAAW,EAAE,IAAI,IAA9B,IAAI,CAAC,MAAM,CAAuB,CAAC;4BACrE,CAAC,CAAC,GACE,IACF,GAER,GACa,GAChB,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
package/lib/hooks/useFocusTabHeading.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function useFocusTabHeading(): (tabPanelId: string) => void;
package/lib/hooks/useFocusTabHeading.js ADDED
@@ -0,0 +1,20 @@
1
+ import { useCallback } from 'react';
2
+ export function useFocusTabHeading() {
3
+ return useCallback((tabPanelId) => {
4
+ // Find the first heading in the tab panel that was just activated
5
+ const tabPanel = document.getElementById(tabPanelId);
6
+ if (!tabPanel)
7
+ return;
8
+ // Look for the first heading element within the tab panel
9
+ const firstHeading = tabPanel.querySelector('h1, h2, h3, h4, h5, h6');
10
+ if (!firstHeading)
11
+ return;
12
+ // If heading doesn't have tabindex=-1, add it
13
+ if (!firstHeading.hasAttribute('tabindex')) {
14
+ firstHeading.setAttribute('tabindex', '-1');
15
+ }
16
+ // Focus the heading
17
+ firstHeading.focus();
18
+ }, []);
19
+ }
20
+ //# sourceMappingURL=useFocusTabHeading.js.map
package/lib/hooks/useFocusTabHeading.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFocusTabHeading.js","sourceRoot":"","sources":["../../src/hooks/useFocusTabHeading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,MAAM,UAAU,kBAAkB;IAChC,OAAO,WAAW,CAAC,CAAC,UAAkB,EAAE,EAAE;QACxC,kEAAkE;QAClE,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,0DAA0D;QAC1D,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACtE,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,8CAA8C;QAC9C,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YAC3C,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC;QAED,oBAAoB;QACnB,YAA4B,CAAC,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aehrc/smart-forms-renderer",
3
- "version": "1.0.0-alpha.30",
3
+ "version": "1.0.0-alpha.31",
4
4
  "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx CHANGED
@@ -22,6 +22,7 @@ import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores'
22
22
  import NextTabButton from './NextTabButton';
23
23
  import PreviousTabButton from './PreviousTabButton';
24
24
  import useNextAndPreviousVisibleTabs from '../../../hooks/useNextAndPreviousVisibleTabs';
25
+ import { useFocusTabHeading } from '../../../hooks/useFocusTabHeading';
25
26
 
26
27
  interface TabButtonsWrapperProps {
27
28
  currentTabIndex?: number;
@@ -39,6 +40,8 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
39
40
  tabs
40
41
  );
41
42
 
43
+ const focusHeading = useFocusTabHeading();
44
+
42
45
  const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
43
46
 
44
47
  // Event handlers
@@ -51,6 +54,11 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
51
54
 
52
55
  // Scroll to top of page
53
56
  window.scrollTo(0, 0);
57
+
58
+ // Focus the first heading in the new tab panel
59
+ setTimeout(() => {
60
+ focusHeading(`tabpanel-${previousTabIndex}`);
61
+ }, 100); // Small delay to ensure panel is rendered
54
62
  }
55
63
 
56
64
  function handleNextTabButtonClick() {
@@ -62,6 +70,11 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
62
70
 
63
71
  // Scroll to top of page
64
72
  window.scrollTo(0, 0);
73
+
74
+ // Focus the first heading in the new tab panel
75
+ setTimeout(() => {
76
+ focusHeading(`tabpanel-${nextTabIndex}`);
77
+ }, 100); // Small delay to ensure panel is rendered
65
78
  }
66
79
 
67
80
  if (tabsNotDefined) {
package/src/components/Renderer/FormBodyTabbed.tsx CHANGED
@@ -105,6 +105,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
105
105
  key={qItem.linkId}
106
106
  sx={{ p: 0 }}
107
107
  value={i.toString()}
108
+ id={`tabpanel-${i}`}
108
109
  data-test="renderer-tab-panel">
109
110
  <GroupItem
110
111
  qItem={qItem}
package/src/components/Tabs/FormBodySingleTab.tsx CHANGED
@@ -23,6 +23,7 @@ import Typography from '@mui/material/Typography';
23
23
  import { useQuestionnaireStore } from '../../stores';
24
24
  import type { QuestionnaireItem } from 'fhir/r4';
25
25
  import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
26
+ import { useFocusTabHeading } from '../../hooks/useFocusTabHeading';
26
27
 
27
28
  interface FormBodySingleTabProps {
28
29
  contextDisplayItems: QuestionnaireItem[];
@@ -35,10 +36,16 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
35
36
  const { contextDisplayItems, selected, tabLabel, listIndex } = props;
36
37
 
37
38
  const switchTab = useQuestionnaireStore.use.switchTab();
39
+ const focusHeading = useFocusTabHeading();
38
40
 
39
41
  function handleTabClick() {
40
42
  switchTab(listIndex);
41
43
  window.scrollTo(0, 0);
44
+
45
+ // Focus the first heading in the new tab panel
46
+ setTimeout(() => {
47
+ focusHeading(`tabpanel-${listIndex}`);
48
+ }, 100); // Small delay to ensure panel is rendered
42
49
  }
43
50
 
44
51
  return (
package/src/hooks/useFocusTabHeading.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { useCallback } from 'react';
2
+
3
+ export function useFocusTabHeading() {
4
+ return useCallback((tabPanelId: string) => {
5
+ // Find the first heading in the tab panel that was just activated
6
+ const tabPanel = document.getElementById(tabPanelId);
7
+ if (!tabPanel) return;
8
+
9
+ // Look for the first heading element within the tab panel
10
+ const firstHeading = tabPanel.querySelector('h1, h2, h3, h4, h5, h6');
11
+ if (!firstHeading) return;
12
+
13
+ // If heading doesn't have tabindex=-1, add it
14
+ if (!firstHeading.hasAttribute('tabindex')) {
15
+ firstHeading.setAttribute('tabindex', '-1');
16
+ }
17
+
18
+ // Focus the heading
19
+ (firstHeading as HTMLElement).focus();
20
+ }, []);
21
+ }
package/src/stories/assets/questionnaires/QAdvancedTextApperance.ts CHANGED
@@ -332,7 +332,7 @@ export const qRenderingXhtmlGroupPropagation: Questionnaire = {
332
332
 
333
333
  export const qRenderingXhtmlGroupPropagationCalcExpression: Questionnaire = {
334
334
  resourceType: 'Questionnaire',
335
- id: 'CalcExpression',
335
+ id: 'RenderingXhtmlGroupPropagationCalcExpression',
336
336
  name: 'RenderingXhtmlGroupPropagationCalcExpression',
337
337
  title: 'RenderingXhtmlGroupPropagationCalcExpression',
338
338
  version: '0.1.0',