feat: accessibility betterments for tab group -refs: #1289

UniversityOfHelsinkiCS · May 23, 2024 · 2cefac2 · 2cefac2
1 parent 5b7a160
commit 2cefac2
Showing 1 changed file with 24 additions and 12 deletions.
diff --git a/src/client/components/common/TabGroup.jsx b/src/client/components/common/TabGroup.jsx
@@ -2,19 +2,31 @@ import React from 'react'
 import { Box, Divider, Paper, Typography } from '@mui/material'
 
 export const TabGroup = ({ title, hideTitle = false, Icon, children }) => (
-  <Box display="flex">
-    <Box display="flex" flexDirection="column" pt="0.6rem">
-      {!hideTitle && (
-        <Box display="flex" gap="0.5rem" px="1.5rem" mb="auto" color="textSecondary" alignItems="center">
-          {Icon && <Icon sx={theme => ({ color: theme.palette.text.secondary })} />}
-          <Typography variant="button" color="textSecondary" sx={{ userSelect: 'none' }} fontSize="small">
-            {title}
-          </Typography>
-        </Box>
-      )}
-      <Box display="flex" alignItems="end">
-        {children}
+  <Box display="flex" flexDirection="column" pt="0.6rem">
+    {!hideTitle && (
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '0.5rem',
+          px: '1.5rem',
+          my: 'auto',
+          alignItems: 'center',
+        }}
+      >
+        {Icon && <Icon aria-hidden="true" sx={theme => ({ color: theme.palette.text.secondary })} />}
+        <Typography
+          id={`tab-list-${title}`}
+          variant="button"
+          color="textSecondary"
+          sx={{ userSelect: 'none' }}
+          fontSize="small"
+        >
+          {title}
+        </Typography>
       </Box>
+    )}
+    <Box role="tablist" aria-labelledby={`tab-list-${title}`} sx={{ display: 'flex', alignItems: 'end' }}>
+      {children}
     </Box>
   </Box>
 )