fix(ProgressBar): adds focus outline

Updates `ProgressBar` to show focus outline for screenreader only text.
Codecademy · Feb 5, 2025 · d12d013 · d12d013
1 parent 7638bb7
commit d12d013
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx
@@ -149,7 +149,7 @@ const ProgressBarWrapper = styled.div<ProgressBarElementWrapperProps>`
   ${progressBarBackgroundVariants};
   ${progressBarSizeVariants};
   ${progressBarBackgroundOverride};
-  ${progressBarFlatVariants}
+  ${progressBarFlatVariants};
 `;
 
 const Bar = styled(Box)(progressBarForegroundVariants);
@@ -170,15 +170,18 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
   variant,
 }) => {
   const showBarBorder = percent > 0 || minimumPercent > 0;
+  const id = React.useId();
   return (
     <ProgressBarWrapper
+      aria-labelledby={id}
       aria-live="polite"
+      role="figure"
       flat={flat}
       size={size}
       variant={variant}
       backgroundOverride={Pattern ? 'pattern' : 'none'}
     >
-      <Text as="label" screenreader>{`Progress: ${percent}%`}</Text>
+      <Text as="label" id={id} screenreader>{`Progress: ${percent}%`}</Text>
       {Pattern && <Pattern width="100%" position="absolute" zIndex={0} />}
       <Bar
         variant={variant}