fix: Form summary page , press tab could not go Edit

GovAlta · Nov 12, 2024 · 84824c7 · 84824c7
1 parent b069850
commit 84824c7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/libs/jsonforms-components/src/lib/Controls/FormStepper/FormStepperControl.tsx b/libs/jsonforms-components/src/lib/Controls/FormStepper/FormStepperControl.tsx
@@ -254,7 +254,17 @@ export const FormStepper = (props: CategorizationStepperLayoutRendererProps): JS
                       <ReviewItemSection key={index}>
                         <ReviewItemHeader>
                           <ReviewItemTitle>{categoryLabel}</ReviewItemTitle>
-                          <Anchor onClick={() => setPage(index + 1)} data-testid={testId}>
+                          <Anchor
+                            tabIndex={readOnly ? -1 : 0}
+                            onClick={() => setPage(index + 1)}
+                            data-testid={testId}
+                            onKeyDown={(e) => {
+                              if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
+                                e.preventDefault();
+                                setPage(index + 1);
+                              }
+                            }}
+                          >
                             {readOnly ? 'View' : 'Edit'}
                           </Anchor>
                         </ReviewItemHeader>

diff --git a/libs/jsonforms-components/src/lib/Controls/FormStepper/styled-components.tsx b/libs/jsonforms-components/src/lib/Controls/FormStepper/styled-components.tsx
@@ -35,6 +35,11 @@ export const Anchor = styled.div`
   text-decoration: underline;
   outline: none;
   cursor: pointer;
+
+  &:focus {
+    outline: 2px solid #0070c4;
+    background-color: #e6f7ff;
+  }
 `;
 
 export const ReviewListItem = styled.div`