From 88acd45410577e14c19f1d6ac9b0c01e59ced80a Mon Sep 17 00:00:00 2001
From: MentatBot <160964065+MentatBot@users.noreply.github.com>
Date: Wed, 5 Feb 2025 00:51:04 +0000
Subject: [PATCH] Improve accessibility of progress tracking

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
---
 .../src/components/WelcomeDialog.jsx          | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/live-wallpaper-creator/src/components/WelcomeDialog.jsx b/live-wallpaper-creator/src/components/WelcomeDialog.jsx
index ad7b511..ae77bf2 100644
--- a/live-wallpaper-creator/src/components/WelcomeDialog.jsx
+++ b/live-wallpaper-creator/src/components/WelcomeDialog.jsx
@@ -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