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:
@@ -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',
|
||||||
|
|||||||
@@ -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 }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user