feat: Add 'skip to selected tab' link to fbt view

Author: SiniCode

public/locales/en/translation.json

@@ -655,7 +655,8 @@
     "noAccessEndedCourse": "The feedback period has ended, and feedback can no longer be given for this course. Please check the information above to ensure that the course is correct.",
     "notFound": "Cannot find this course feedback! If you entered the URL manually, make sure it is correct",
     "interimFeedbackTab": "Interim feedbacks",
-    "respondents": "Respondents"
+    "respondents": "Respondents",
+    "skipToSelectedTab": "Skip to selected tab:"
   },
   "noadUser": {
     "noUser": "Something went wrong, you are currently not logged in. Try going through the email link again or contact the course teacher",

public/locales/fi/translation.json

@@ -649,7 +649,8 @@
     "noAccessEndedCourse": "Palauteaika on päättynyt, eikä kurssille voi enää antaa palautetta. Tarkista ylläolevista tiedoista, että kurssi on oikea.",
     "notFound": "Tätä kurssipalautetta ei löydy! Jos kirjoitit osoitteen manuaalisesti, tarkista että se on oikein.",
     "interimFeedbackTab": "Välipalautteet",
-    "respondents": "Vastanneet"
+    "respondents": "Vastanneet",
+    "skipToSelectedTab": "Siirry valitulle välilehdelle:"
   },
   "noadUser": {
     "noUser": "Jotain meni pieleen, et ole tällä hetkellä kirjatunut. Kokeile sähköpostin linkkiä uudestaan tai ota yhteys kurssin opettajaan",

public/locales/sv/translation.json

@@ -625,7 +625,8 @@
     "surveyTabDisabledTooltip": "Enkäten kan inte längre redigeras efter att feedbacken har öppnats",
     "editFeedbackResponseTab": "Redigera återkopplingsfeedback",
     "interimFeedbackTab": "Mellanrespons",
-    "respondents": "Respondenter"
+    "respondents": "Respondenter",
+    "skipToSelectedTab": "Gå till vald flik:"
   },
   "noadUser": {
     "noUser": "Något gick fel. Du är inte inloggad just nu. Pröva att trycka på e-postens länk igen eller ta kontakt med kursens lärare",

src/client/pages/FeedbackTarget/FeedbackTargetContent.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 /** @jsxImportSource @emotion/react */
 
-import { Navigate, Route, Routes, useMatch } from 'react-router-dom'
+import { Navigate, Route, Routes, useMatch, useLocation } from 'react-router-dom'
 
-import { Alert, Box } from '@mui/material'
+import { Alert, Box, Link } from '@mui/material'
 
 import { useTranslation } from 'react-i18next'
 import {
@@ -46,6 +46,26 @@ import ProtectedRoute from '../../components/common/ProtectedRoute'
 import Title from '../../components/common/Title'
 import { FeedbackTargetTabsContainer, FeedbackTargetTab } from './FeedbackTargetTabs'
 import FeedbackTargetInformation from './FeedbackTargetInformation'
+import { getActiveTabName } from './utils'
+
+const styles = {
+  skipLink: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: 1300,
+    px: 2,
+    py: 2,
+    bgcolor: '#01263a',
+    color: 'white',
+    // Hide visually but keep focusable
+    transform: 'translateY(-100%)',
+    '&:focus': {
+      transform: 'translateY(0)',
+      outline: '2px solid #fff',
+    },
+  },
+}
 
 const FeedbackTargetContent = () => {
   const { t, i18n } = useTranslation()
@@ -61,7 +81,7 @@ const FeedbackTargetContent = () => {
     feedbackCanBeGiven,
     userCreated,
   } = feedbackTarget
-
+  const { pathname } = useLocation()
   const fbtMatch = useMatch('/targets/:feedbackTargetId/*')
   const interimMatch = useMatch('/targets/:feedbackTargetId/interim-feedback/:interimFeedbackId/*')
   const pathnameBase = interimMatch?.pathnameBase || fbtMatch?.pathnameBase // This has to be done because of recursivity of interim feedbacks
@@ -115,9 +135,16 @@ const FeedbackTargetContent = () => {
     <>
       <Title>{`${visibleCourseCode} ${courseName}`}</Title>
       {!feedbackCanBeGiven && <Alert severity="error">{t('feedbackTargetView:feedbackDisabled')}</Alert>}
-
+      <Link href="#feedback-target-tab-content" sx={styles.skipLink}>
+        {`${t('feedbackTargetView:skipToSelectedTab')} ${getActiveTabName({
+          currentPath: pathname,
+          feedbackGiven,
+          isOpen,
+          isStudent,
+          feedbackResponseEmailSent,
+        })}`}
+      </Link>
       <FeedbackTargetInformation />
-
       <Box
         mb="2rem"
         sx={{

src/client/pages/FeedbackTarget/tabs/ContinuousFeedback/ContinuousFeedback.jsx

@@ -156,7 +156,7 @@ const ContinuousFeedback = () => {
   const [feedbackEnabled, setFeedbackEnabled] = useState(continuousFeedbackEnabled)
 
   return (
-    <Box>
+    <Box id="feedback-target-tab-content">
       {showSettings && (
         <ContinuousFeedbackSettings
           feedbackTarget={feedbackTarget}

src/client/pages/FeedbackTarget/tabs/EditFeedbackResponse/EditFeedbackResponse.jsx

@@ -62,7 +62,7 @@ const EditFeedbackResponse = () => {
   }
 
   return (
-    <Card>
+    <Card id="feedback-target-tab-content">
       <CardContent>
         <Instructions title={t('feedbackResponse:instructionTitle')}>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>

src/client/pages/FeedbackTarget/tabs/FeedbackView/FeedbackView.jsx

@@ -226,7 +226,7 @@ const FeedbackView = () => {
   }
 
   return (
-    <>
+    <Box id="feedback-target-tab-content">
       <PrivacyDialog open={privacyDialogOpen} onClose={handleClosePrivacyDialog} />
 
       {isStudent &&
@@ -266,7 +266,7 @@ const FeedbackView = () => {
           />
         </Box>
       )}
-    </>
+    </Box>
   )
 }
 

src/client/pages/FeedbackTarget/tabs/InterimFeedback/InterimFeedback.jsx

@@ -68,7 +68,7 @@ const InterimFeedback = () => {
   }
 
   return (
-    <Box mb={6} px={1}>
+    <Box id="feedback-target-tab-content" mb={6} px={1}>
       <Box sx={styles.buttonContainer}>
         <NorButton
           data-cy="interim-feedbacks-add-new"

src/client/pages/FeedbackTarget/tabs/Links/Links.jsx

@@ -18,7 +18,7 @@ const Links = () => {
   const sortedUsers = users.sort((a, b) => a.lastName?.localeCompare(b.lastName) ?? 0)
 
   return (
-    <Box>
+    <Box id="feedback-target-tab-content">
       <Typography variant="h6">Students and their respective feedback links</Typography>
       {sortedUsers.map(user => (
         <Box key={user.studentNumber} style={{ marginTop: 5 }}>

src/client/pages/FeedbackTarget/tabs/Logs/Logs.jsx

@@ -106,7 +106,7 @@ const Logs = () => {
   }
 
   return (
-    <Box display="flex" flexDirection="column">
+    <Box id="feedback-target-tab-content" display="flex" flexDirection="column">
       {!feedbackTargetLogs?.length > 0 && <Alert severity="info">No logs yet</Alert>}
       {feedbackTargetLogs.map((log, idx) => (
         <LogItem key={idx} log={log} parseLogMessage={getLogMessage} />