From cd44f0c99242ddba4e5e588a44e0b7ecc02e8a27 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Wed, 25 Mar 2026 22:58:39 +1100
Subject: [PATCH] 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>
---
 src/components/molecules/LineItem/LineItem.tsx           | 1 +
 src/components/organisms/PackageDetail/PackageDetail.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/LineItem/LineItem.tsx b/src/components/molecules/LineItem/LineItem.tsx
index 4beeefe..326b631 100644
--- a/src/components/molecules/LineItem/LineItem.tsx
+++ b/src/components/molecules/LineItem/LineItem.tsx
@@ -87,6 +87,7 @@ export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
           {info && (
             <Tooltip title={info} arrow placement="top">
               <InfoOutlinedIcon
+                aria-label="More information"
                 sx={{
                   fontSize: 16,
                   color: 'text.secondary',
diff --git a/src/components/organisms/PackageDetail/PackageDetail.tsx b/src/components/organisms/PackageDetail/PackageDetail.tsx
index 126199f..a33da37 100644
--- a/src/components/organisms/PackageDetail/PackageDetail.tsx
+++ b/src/components/organisms/PackageDetail/PackageDetail.tsx
@@ -122,7 +122,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
           </Box>
 
           {/* 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
               variant="contained"
               size="large"
@@ -150,7 +150,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
           {/* Sections */}
           {sections.map((section, sectionIdx) => (
             <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}
               </Typography>
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>