feat(a11y): Add ARIA live regions for real-time updates

Implements ARIA live regions for the TimerDisplay and HrTile components to improve accessibility for screen reader users, addressing WCAG compliance for real-time data annunciation.

This change adds 'aria-live="polite"' to the timer phase label and wraps the heart rate data in a container with 'aria-live="polite"' and 'aria-atomic="true"'.

These changes ensure that critical state updates, such as Tabata phase changes and real-time heart rate data, are announced by screen readers.

Author: google-labs-jules[bot]

components/HrTile.tsx

@@ -1,5 +1,6 @@
 // File: components/HrTile.tsx
 'use client'
+import Box from '@mui/material/Box'
 import CardContent from '@mui/material/CardContent'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
@@ -34,10 +35,11 @@ const HrTile = ({ name, bpm, percentMax, background }: HrTileProps) => {
           justifyContent: 'center',
         }}
       >
-        <CardContent sx={{ p: 0 }}>
-          {/* Giant Percentage - should dominate the tile */}
-          <Typography
-            data-testid="live-hr-percent"
+        <Box aria-live="polite" aria-atomic="true">
+          <CardContent sx={{ p: 0 }}>
+            {/* Giant Percentage - should dominate the tile */}
+            <Typography
+              data-testid="live-hr-percent"
             sx={{
               fontFamily: 'var(--font-roboto-mono), "Courier New", monospace',
               fontSize: { xs: '6rem', sm: '7rem', md: '8rem' },
@@ -77,6 +79,7 @@ const HrTile = ({ name, bpm, percentMax, background }: HrTileProps) => {
             </Typography>
           )}
         </CardContent>
+        </Box>
       </StyledCard>
     </Tooltip>
   )

components/TimerDisplay.tsx

@@ -199,6 +199,7 @@ const TimerDisplay = ({
           <Typography
             data-testid="timer-phase-label"
             variant="h6"
+            aria-live="polite"
             sx={{
               mb: 1,
               color: phaseColor,