DiamondLightSource · VictoriaBeilsten-Edmands · Dec 1, 2025 · Nov 28, 2025
diff --git a/frontend/relay-workflows-lib/lib/components/WorkflowInfo.tsx b/frontend/relay-workflows-lib/lib/components/WorkflowInfo.tsx
@@ -59,7 +59,9 @@ export default function WorkflowInfo({ fragmentRef }: WorkflowInfoProps) {
   return (
     <Accordion sx={{ width: "100%" }} defaultExpanded>
       <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
-        <Typography variant="h6">Workflow Information</Typography>
+        <Typography variant="h6" component="h2">
+          Workflow Information
+        </Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Typography variant="body1">

diff --git a/frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx b/frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx
@@ -44,14 +44,16 @@ const RetriggerWorkflowBase: React.FC<RetriggerWorkflowProps> = ({
   const templateName = data.workflow.templateRef;
 
   return templateName ? (
-    <NavLink
-      title="Rerun workflow"
-      to={`/templates/${templateName}/${visitToText(
-        instrumentSession,
-      )}-${workflowName}`}
-    >
-      <RefreshIcon />
-    </NavLink>
+    <Tooltip title="Rerun workflow">
+      <NavLink
+        title="Rerun workflow"
+        to={`/templates/${templateName}/${visitToText(
+          instrumentSession,
+        )}-${workflowName}`}
+      >
+        <RefreshIcon />
+      </NavLink>
+    </Tooltip>
   ) : (
     <NoTemplateIcon />
   );

diff --git a/frontend/relay-workflows-lib/lib/views/WorkflowsListView.tsx b/frontend/relay-workflows-lib/lib/views/WorkflowsListView.tsx
@@ -139,7 +139,7 @@ const WorkflowsListView: React.FC<WorkflowsListViewProps> = ({
                 key={`${JSON.stringify(workflowQueryFilter)}-${JSON.stringify(fetchKey)}`}
                 fallback={
                   <Box>
-                    <Typography variant="h6" fontWeight="bold">
+                    <Typography variant="h6" component="h2" fontWeight="bold">
                       Loading Workflows...
                     </Typography>
                   </Box>

diff --git a/frontend/workflows-lib/lib/components/common/PaginationControls.tsx b/frontend/workflows-lib/lib/components/common/PaginationControls.tsx
@@ -1,4 +1,11 @@
-import { Box, FormControl, MenuItem, Pagination, Select } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Pagination,
+  Select,
+} from "@mui/material";
 
 interface PaginationControlsProps {
   currentPage: number;
@@ -35,7 +42,10 @@ export default function PaginationControls({
         boundaryCount={0}
       />
       <FormControl sx={{ width: 80 }}>
+        <InputLabel id="workflows-limit-label">Workflows Limit</InputLabel>
         <Select
+          labelId="workflows-limit-label"
+          id="workflows-limit-select"
           size="small"
           value={selectedLimit.toString()}
           onChange={(e) => {

diff --git a/frontend/workflows-lib/lib/components/template/ScienceGroupSelector.tsx b/frontend/workflows-lib/lib/components/template/ScienceGroupSelector.tsx
@@ -46,8 +46,10 @@ export default function ScienceGroupSelector({
     <>
       <Stack direction="row" spacing={1}>
         <FormControl sx={{ width: 300 }}>
-          <InputLabel>Science Group</InputLabel>
+          <InputLabel id="science-group-label">Science Group</InputLabel>
           <Select
+            labelId="science-group-label"
+            id="science-group-select"
             onChange={handleSelect}
             value={scienceGroup[0] ?? ""}
             input={<OutlinedInput label="Science Group" />}

diff --git a/frontend/workflows-lib/lib/components/template/TemplateSearchField.tsx b/frontend/workflows-lib/lib/components/template/TemplateSearchField.tsx
@@ -23,6 +23,8 @@ export default function TemplateSearchField({
   return (
     <Box display="flex" flexDirection="column" alignItems="center">
       <TextField
+        id="search-templates"
+        label="Search templates"
         onChange={(e) => {
           setSearchBoxContents(e.target.value);
         }}
@@ -33,14 +35,17 @@ export default function TemplateSearchField({
             startAdornment: <Search />,
             endAdornment: (
               <InputAdornment position="end">
-                <IconButton onClick={handleClear} data-testid="clear-search">
+                <IconButton
+                  onClick={handleClear}
+                  data-testid="clear-search"
+                  aria-label="Clear Search"
+                >
                   <Clear />
                 </IconButton>
               </InputAdornment>
             ),
           },
         }}
-        aria-label="Search templates"
         value={searchBoxContents}
       />
     </Box>

diff --git a/frontend/workflows-lib/lib/components/workflow/ArtifactFilteredList.tsx b/frontend/workflows-lib/lib/components/workflow/ArtifactFilteredList.tsx
@@ -82,6 +82,7 @@ export const ArtifactFilteredList: React.FC<ArtifactFilteredListProps> = ({
                 >
                   <Typography
                     variant="h6"
+                    component="h3"
                     sx={{ flexGrow: 1, textAlign: "left" }}
                   >
                     Output Name
@@ -124,6 +125,7 @@ export const ArtifactFilteredList: React.FC<ArtifactFilteredListProps> = ({
                 >
                   <Typography
                     variant="h6"
+                    component="h3"
                     sx={{ flexGrow: 1, textAlign: "left" }}
                   >
                     Parent Task
@@ -132,7 +134,7 @@ export const ArtifactFilteredList: React.FC<ArtifactFilteredListProps> = ({
                     sx={{
                       marginLeft: "auto",
                       color:
-                        sortType.name === "parentTask" ? "inherit" : "#888",
+                        sortType.name === "parentTask" ? "inherit" : "#737373",
                       position: "absolute",
                       right: "10px",
                       fontSize: "1.3em",
@@ -181,7 +183,7 @@ export const ArtifactFilteredList: React.FC<ArtifactFilteredListProps> = ({
                     overflow: "hidden",
                     whiteSpace: "nowrap",
                     maxWidth: "200px",
-                    color: "#777",
+                    color: "#737373",
                   }}
                 >
                   {artifact.parentTask || "N/A"}

diff --git a/frontend/workflows-lib/lib/components/workflow/FuzzySearchBar.tsx b/frontend/workflows-lib/lib/components/workflow/FuzzySearchBar.tsx
@@ -44,7 +44,7 @@ export const FuzzySearchBar: React.FC<SearchBarProps> = ({
         setLocalQuery(e.target.value);
       }}
       placeholder="Search by name or parent task"
-      sx={{ width: "70%", marginRight: 0.5 }}
+      sx={{ width: "70%", marginRight: 0.5, color: "#737373" }}
       slotProps={{
         htmlInput: {
           "data-testid": "searchOutputs",

diff --git a/frontend/workflows-lib/lib/components/workflow/ScrollableImages.tsx b/frontend/workflows-lib/lib/components/workflow/ScrollableImages.tsx
@@ -150,6 +150,7 @@ const ScrollableImages = ({
               size="small"
               sx={{ minWidth: 36, width: 36, height: 36 }}
               data-testid="prev-button"
+              aria-label="previous image"
             >
               <ArrowBackIcon fontSize="small" />
             </Button>
@@ -201,6 +202,7 @@ const ScrollableImages = ({
               size="small"
               sx={{ minWidth: 36, width: 36, height: 36 }}
               data-testid="next-button"
+              aria-label="next image"
             >
               <ArrowForwardIcon fontSize="small" />
             </Button>
@@ -210,6 +212,7 @@ const ScrollableImages = ({
           <Box sx={{ display: "flex" }}>
             <Box
               data-testid="numeration"
+              aria-label="Enter image number"
               component="input"
               type="number"
               value={numberValue}

diff --git a/frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx b/frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx
@@ -78,7 +78,9 @@ export const TaskInfo: React.FC<TaskInfoProps> = ({
   return (
     <Accordion sx={{ width: "100%", my: 0 }} defaultExpanded>
       <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
-        <Typography variant="h6">Output Information</Typography>
+        <Typography variant="h6" component="h2">
+          Output Information
+        </Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Box

diff --git a/frontend/workflows-lib/lib/components/workflow/TasksFlowNode.tsx b/frontend/workflows-lib/lib/components/workflow/TasksFlowNode.tsx
@@ -61,7 +61,7 @@ const TaskFlowNode: React.FC<TaskFlowNodeProps> = ({ data, onNavigate }) => {
       >
         <Tooltip title={data.label}>
           <Typography
-            variant="subtitle1"
+            component="h3"
             noWrap
             sx={{
               fontWeight: 500,

diff --git a/frontend/workflows-lib/lib/components/workflow/WorkflowAccordion.tsx b/frontend/workflows-lib/lib/components/workflow/WorkflowAccordion.tsx
@@ -5,6 +5,7 @@ import {
   AccordionSummary,
   Box,
   styled,
+  Tooltip,
   Typography,
 } from "@mui/material";
 import MuiAccordionDetails from "@mui/material/AccordionDetails";
@@ -46,11 +47,14 @@ const WorkflowAccordion: React.FC<WorkflowProps> = ({
         <Box sx={{ display: "flex", flexBasis: 0, flexGrow: 5, gap: 2 }}>
           {getWorkflowStatusIcon(workflow.status)}
           {workflowLink && (
-            <Link
-              to={`/workflows/${visitToText(workflow.instrumentSession)}/${workflow.name}`}
-            >
-              <OpenInNewIcon />
-            </Link>
+            <Tooltip title="Open workflow in tab">
+              <Link
+                to={`/workflows/${visitToText(workflow.instrumentSession)}/${workflow.name}`}
+                aria-label={`Open workflow ${workflow.name} in tab`}
+              >
+                <OpenInNewIcon />
+              </Link>
+            </Tooltip>
           )}
           {retriggerComponent &&
             React.createElement(retriggerComponent, {
@@ -60,7 +64,7 @@ const WorkflowAccordion: React.FC<WorkflowProps> = ({
           <Typography>{workflow.name}</Typography>
         </Box>
         <Box flexBasis={0} flexGrow={1}>
-          <Typography color="grey">
+          <Typography color="#757575">
             Creator: {workflow.creator || "Unknown"}
           </Typography>
         </Box>