fix: Form summary page , press tab could not go Edit (#3699)

* Error creating events by calendar if End Date before Start Date or End time is before Start time * fix:Status service view includes extraneous top margin above heading * fix: add and edit notification type cancel state * fix:Save button in queue editor disables incorrectly on role changes * feat:form UI schema code completion hints based on the data schema * fix: scroll in form editor and help content. * fix:icon accessibilty issue and web-component upgrade issue * fix: Form -- All uppercase letter in Input label in schema, but in preview show input label in Pascal Case * fix: mobile view bottom up lay out * fix: Form summary page , press tab could not go Edit --------- Co-authored-by: Shuang chen <shuangchen@AthenaMacBook.local> Co-authored-by: Shuang chen <shuangchen@AthenaMacBook.lan> Co-authored-by: athena-chen-chen <athena.chen@gov.ab.ca>
GovAlta · Nov 12, 2024 · d321771 · d321771
1 parent fc7e781
commit d321771
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`