Merge pull request #2584 from bcgov/bugfix/DESENG-687-fix-engagement-…

…authoring-focus-trap

[To Main] DESENG-687: Bugfix - Fix keyboard focus being trapped on buttons on authoring page
yay yippee ^w^

CHANGELOG.MD

@@ -1,3 +1,7 @@
+## August 28, 2024
+
+- **Bugfix** Fix keyboard focus being trapped on buttons on authoring page [🎟️ DESENG-687](https://citz-gdx.atlassian.net/browse/DESENG-687)
+
 ## August 27, 2024
 
 - **Task** Upgrade to Node v20 [🎟️ DESENG-682](https://citz-gdx.atlassian.net/browse/DESENG-682)

met-web/src/components/engagement/admin/view/AuthoringTab.tsx

@@ -6,9 +6,10 @@ import { faArrowRightLong } from '@fortawesome/pro-light-svg-icons';
 import { faCheck } from '@fortawesome/pro-solid-svg-icons';
 import { MetLabel, MetHeader3 } from 'components/common';
 import { SystemMessage } from 'components/common/Layout/SystemMessage';
-import { When } from 'react-if';
-import { Grid, Link } from '@mui/material';
+import { Unless, When } from 'react-if';
+import { Grid } from '@mui/material';
 import { colors } from 'styles/Theme';
+import { Link } from 'components/common/Navigation';
 
 const StatusCircle = (props: StatusCircleProps) => {
     const statusCircleStyles = {
@@ -52,17 +53,15 @@ const AuthoringButton = (props: AuthoringButtonProps) => {
         paddingRight: '0.4rem',
     };
     return (
-        <Link style={{ textDecoration: 'none' }} href={props.item.link}>
-            <button style={buttonStyles}>
-                <When condition={props.item.completed}>
-                    <FontAwesomeIcon style={checkStyles} icon={faCheck} />
-                </When>
-                <span style={textStyles}>{props.item.title}</span>
-                <When condition={!props.item.completed}>
-                    <StatusCircle required={props.item.required} />
-                </When>
-                <FontAwesomeIcon style={arrowStyles} icon={faArrowRightLong} />
-            </button>
+        <Link underline="none" style={{ ...buttonStyles }} to={props.item.link}>
+            <When condition={props.item.completed}>
+                <FontAwesomeIcon style={checkStyles} icon={faCheck} />
+            </When>
+            <span style={textStyles}>{props.item.title}</span>
+            <Unless condition={props.item.completed}>
+                <StatusCircle required={props.item.required} />
+            </Unless>
+            <FontAwesomeIcon style={arrowStyles} icon={faArrowRightLong} />
         </Link>
     );
 };