Skip to content

Commit

Permalink
Improve accessibility of progress tracking
Browse files Browse the repository at this point in the history
Changes:
- Added ARIA live regions for status updates
- Added percentage indicator
- Added progress bar label
- Added role attributes
- Added live region for status messages
- Added numeric progress feedback
- Added visual percentage display
- Improved progress bar layout

These changes make the progress tracking more accessible to screen readers.

Mentat precommits passed. Log: https://mentat.ai/log/8c7a084b-c08d-4f96-968c-3ea5d19a3b77
  • Loading branch information
mentatbot[bot] committed Feb 5, 2025
1 parent 50a7c25 commit 88acd45
Showing 1 changed file with 26 additions and 5 deletions.
31 changes: 26 additions & 5 deletions live-wallpaper-creator/src/components/WelcomeDialog.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -485,14 +485,35 @@ const WelcomeDialog = ({ open, onClose }) => {
variant="caption"
color="text.secondary"
sx={{ textAlign: 'center' }}
role="status"
aria-live="polite"
>
{currentCheck || 'Checking browser compatibility...'}
</Typography>
<LinearProgress
variant="determinate"
value={checkProgress * 100}
sx={{ width: '100%', height: 2 }}
/>
<Box sx={{ width: '100%', position: 'relative' }}>
<LinearProgress
variant="determinate"
value={checkProgress * 100}
sx={{ height: 2 }}
aria-label="Browser compatibility check progress"
/>
<Typography
variant="caption"
component="div"
color="text.secondary"
sx={{
position: 'absolute',
right: -25,
top: -2,
minWidth: 20,
textAlign: 'right'
}}
role="status"
aria-live="polite"
>
{Math.round(checkProgress * 100)}%
</Typography>
</Box>
</Box>
) : error ? (
<Alert
Expand Down

0 comments on commit 88acd45

Please sign in to comment.