Fix P1/P2 audit issues on LineItem + PackageDetail

- LineItem: add aria-label to info icon for screen readers (P1)
- PackageDetail: stack CTA buttons vertically on narrow screens (P2)
- PackageDetail: section headings use component="h3" for hierarchy (P2)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 22:58:39 +11:00
parent 377ff41aac
commit cd44f0c992
2 changed files with 3 additions and 2 deletions

View File

@@ -87,6 +87,7 @@ export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
{info && ( {info && (
<Tooltip title={info} arrow placement="top"> <Tooltip title={info} arrow placement="top">
<InfoOutlinedIcon <InfoOutlinedIcon
aria-label="More information"
sx={{ sx={{
fontSize: 16, fontSize: 16,
color: 'text.secondary', color: 'text.secondary',

View File

@@ -122,7 +122,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
</Box> </Box>
{/* CTA buttons */} {/* CTA buttons */}
<Box sx={{ display: 'flex', gap: 1.5, mb: 3 }}> <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 1.5, mb: 3 }}>
<Button <Button
variant="contained" variant="contained"
size="large" size="large"
@@ -150,7 +150,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
{/* Sections */} {/* Sections */}
{sections.map((section, sectionIdx) => ( {sections.map((section, sectionIdx) => (
<Box key={section.heading} sx={{ mb: sectionIdx < sections.length - 1 ? 2 : 0 }}> <Box key={section.heading} sx={{ mb: sectionIdx < sections.length - 1 ? 2 : 0 }}>
<Typography variant="label" sx={{ display: 'block', mb: 1.5 }}> <Typography variant="label" component="h3" sx={{ display: 'block', mb: 1.5 }}>
{section.heading} {section.heading}
</Typography> </Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>