Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 75x 1x 1x 1x 1x 1x 1x 75x | /**
* BaseLayout Component
* Story 1.17, Task 6b, 11b & 12b: Role-adaptive base layout wrapper with responsive design and accessibility
*
* Main layout structure with AppHeader and content area.
* Uses Material-UI Box/Container with Swiss design grid system.
* Supports mobile (< 768px), tablet (768px-1024px), and desktop (> 1024px) breakpoints.
* Implements WCAG 2.1 AA accessibility with skip links and semantic HTML.
*/
import { Box, Container, Link, CssBaseline } from '@mui/material';
import AppHeader from '../Navigation/AppHeader';
import type { UserProfile } from '@/types/user';
import type { NotificationsResponse } from '@/types/notification';
interface BaseLayoutProps {
children: React.ReactNode;
maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
user?: UserProfile;
notifications?: NotificationsResponse;
}
export function BaseLayout({ children, maxWidth = false, user, notifications }: BaseLayoutProps) {
const handleSkipLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
const mainContent = document.getElementById('main-content');
Eif (mainContent) {
mainContent.focus();
// scrollIntoView may not be available in test environments (jsdom)
Eif (typeof mainContent.scrollIntoView === 'function') {
mainContent.scrollIntoView({ behavior: 'smooth' });
}
}
};
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
backgroundColor: 'background.default',
}}
>
<CssBaseline />
{/* Skip to Main Content Link (WCAG 2.1 - Bypass Blocks) */}
<Link
href="#main-content"
onClick={handleSkipLinkClick}
sx={{
position: 'absolute',
left: '-9999px',
top: '0',
zIndex: 9999,
padding: '0.5rem 1rem',
backgroundColor: 'primary.main',
color: 'primary.contrastText',
textDecoration: 'none',
'&:focus': {
left: '0',
top: '0',
outline: '3px solid',
outlineColor: 'primary.dark',
outlineOffset: '2px',
},
}}
>
Skip to main content
</Link>
{/* App Header */}
<AppHeader user={user} notifications={notifications} />
{/* Main Content Area */}
<Box
component="main"
id="main-content"
tabIndex={-1}
sx={{
flex: 1,
py: 3,
width: '100%',
'&:focus': {
outline: 'none', // Skip link will handle focus, no visual outline needed on main
},
}}
>
{maxWidth === false ? (
// Full-width layout (no Container)
<Box sx={{ px: { xs: 2, sm: 3 } }}>{children}</Box>
) : (
// Constrained layout with Container
<Container maxWidth={maxWidth} sx={{ px: { xs: 2, sm: 3 } }}>
{children}
</Container>
)}
</Box>
</Box>
);
}
|