Progress: Improve accessibility (#9060)

MudBlazor · May 25, 2024 · 85ec53b · 85ec53b
1 parent 35fed96
commit 85ec53b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/src/MudBlazor/Components/Progress/MudProgressCircular.razor b/src/MudBlazor/Components/Progress/MudProgressCircular.razor
@@ -1,16 +1,23 @@
 @namespace MudBlazor
+@using MudBlazor.Extensions
 @inherits MudComponentBase
 
-<div @attributes="UserAttributes" class="@DivClassname" role="progressbar" style="@Style" aria-valuenow="@_valueState.Value">
+<div role="progressbar"
+     aria-valuenow="@_valueState.Value.ToInvariantString()"
+     aria-valuemin="@Min.ToInvariantString()"
+     aria-valuemax="@Max.ToInvariantString()"
+     aria-live="@((Indeterminate ? null : "polite"))"
+     class="@Classname"
+     style="@Style"
+     @attributes="UserAttributes">
     <svg class="mud-progress-circular-svg" viewBox="22 22 44 44">
         @if (Indeterminate)
         {
             <circle class="@SvgClassname" cx="44" cy="44" r="20" fill="none" stroke-width="@StrokeWidth"></circle>
         }
         else
         {
-            <circle class="@SvgClassname" cx="44" cy="44" r="20" fill="none" stroke-width="@StrokeWidth" style="stroke-dasharray: @_magicNumber; stroke-dashoffset: @_svgValue;"></circle>
+            <circle class="@SvgClassname" cx="44" cy="44" r="20" fill="none" stroke-width="@StrokeWidth" style="stroke-dasharray: @MagicNumber; stroke-dashoffset: @_svgValue;"></circle>
         }
     </svg>
 </div>
-
diff --git a/src/MudBlazor/Components/Progress/MudProgressCircular.razor.cs b/src/MudBlazor/Components/Progress/MudProgressCircular.razor.cs
@@ -10,9 +10,9 @@ public partial class MudProgressCircular : MudComponentBase
     {
         private int _svgValue;
         private readonly ParameterState<double> _valueState;
-        private const int _magicNumber = 126; // weird, but required for the SVG to work
+        private const int MagicNumber = 126; // weird, but required for the SVG to work
 
-        protected string DivClassname =>
+        protected string Classname =>
             new CssBuilder("mud-progress-circular")
                 .AddClass($"mud-{Color.ToDescriptionString()}-text")
                 .AddClass($"mud-progress-{Size.ToDescriptionString()}")
@@ -91,7 +91,7 @@ private int ToSvgValue(double value)
             // calculate fraction, which is a value between 0 and 1
             var fraction = (minValue - Min) / (Max - Min);
             // now project into the range of the SVG value (126 .. 0)
-            return (int)Math.Round(_magicNumber - (_magicNumber * fraction));
+            return (int)Math.Round(MagicNumber - (MagicNumber * fraction));
         }
     }
 }
diff --git a/src/MudBlazor/Components/Progress/MudProgressLinear.razor b/src/MudBlazor/Components/Progress/MudProgressLinear.razor
@@ -2,7 +2,14 @@
 @using MudBlazor.Extensions
 @inherits MudComponentBase
 
-<div @attributes="UserAttributes" class="@DivClassname" style="@Style" role="progressbar" aria-valuenow="@_valueState.Value.ToInvariantString()" aria-valuemin="@_minState.Value.ToInvariantString()" aria-valuemax="@_maxState.Value.ToInvariantString()">
+<div role="progressbar"
+     aria-valuenow="@_valueState.Value.ToInvariantString()"
+     aria-valuemin="@_minState.Value.ToInvariantString()"
+     aria-valuemax="@_maxState.Value.ToInvariantString()"
+     aria-live="@((Indeterminate ? null : "polite"))"
+     class="@Classname" 
+     style="@Style" 
+     @attributes="UserAttributes">
     <div class="mud-progress-linear-bars">
         @if (Indeterminate)
         {
@@ -20,7 +27,8 @@
             <div class="mud-progress-linear-bar" style="@GetStyledBar1Transform()"></div>
         }
     </div>
-    @if(ChildContent is not null)
+
+    @if (ChildContent is not null)
     {
         <div class="mud-progress-linear-content">
             @ChildContent

diff --git a/src/MudBlazor/Components/Progress/MudProgressLinear.razor.cs b/src/MudBlazor/Components/Progress/MudProgressLinear.razor.cs
@@ -13,7 +13,7 @@ public partial class MudProgressLinear : MudComponentBase
         private readonly ParameterState<double> _valueState;
         private readonly ParameterState<double> _bufferValueState;
 
-        protected string DivClassname =>
+        protected string Classname =>
             new CssBuilder("mud-progress-linear")
                 .AddClass("mud-progress-linear-rounded", Rounded)
                 .AddClass($"mud-progress-linear-striped", Striped)