Quality pass: fix P0 audit findings across FilterPanel, ArrangementDialog, steps
FilterPanel (4 P0 + 2 P1 fixes):
- Add forwardRef (project convention)
- Use React.useId() for unique popover/heading IDs (was static)
- Change aria-describedby to aria-controls (correct ARIA pattern)
- Add role="dialog" + aria-labelledby on Popover paper
- Popover header now uses label prop (was hardcoded "Filters")
- Clear all font size uses theme.typography.caption (was hardcoded)
- Badge uses aria-hidden + visually-hidden text (cleaner SR output)
- Add maxHeight + overflow scroll to body, aria-label on Done button
ArrangementDialog (3 P0 + 1 P1 fixes):
- Add forwardRef
- Focus management: titleRef focused on step change via useEffect
- Add aria-live region announcing step transitions to screen readers
- Fix borderRadius from 3 to 2 (theme convention)
Sticky header padding (visual fix):
- ProvidersStep + VenueStep: mx/px now responsive { xs: -2/2, md: -3/3 }
matching the panel's px: { xs: 2, md: 3 } — fixes mobile misalignment
CoffinDetailsStep:
- Wrap CTA area in form element with onSubmit + aria-busy
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -214,8 +214,8 @@ export const VenueStep: React.FC<VenueStepProps> = ({
|
||||
zIndex: 1,
|
||||
bgcolor: 'background.default',
|
||||
pb: 1,
|
||||
mx: -3,
|
||||
px: 3,
|
||||
mx: { xs: -2, md: -3 },
|
||||
px: { xs: 2, md: 3 },
|
||||
}}
|
||||
>
|
||||
<Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
|
||||
|
||||
Reference in New Issue
Block a user