Render aria-invalid if the state is invalid

src/Components/Web/ref/Microsoft.AspNetCore.Components.Web.netcoreapp.cs

@@ -46,7 +46,7 @@ public abstract partial class InputBase<TValue> : Microsoft.AspNetCore.Component
     {
         protected InputBase() { }
         [Microsoft.AspNetCore.Components.ParameterAttribute(CaptureUnmatchedValues=true)]
-        public System.Collections.Generic.IReadOnlyDictionary<string, object> AdditionalAttributes { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
+        public System.Collections.Generic.Dictionary<string, object> AdditionalAttributes { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
         protected string CssClass { get { throw null; } }
         protected TValue CurrentValue { get { throw null; } set { } }
         protected string CurrentValueAsString { get { throw null; } set { } }

src/Components/Web/ref/Microsoft.AspNetCore.Components.Web.netstandard2.0.cs

@@ -46,7 +46,7 @@ public abstract partial class InputBase<TValue> : Microsoft.AspNetCore.Component
     {
         protected InputBase() { }
         [Microsoft.AspNetCore.Components.ParameterAttribute(CaptureUnmatchedValues=true)]
-        public System.Collections.Generic.IReadOnlyDictionary<string, object> AdditionalAttributes { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
+        public System.Collections.Generic.Dictionary<string, object> AdditionalAttributes { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
         protected string CssClass { get { throw null; } }
         protected TValue CurrentValue { get { throw null; } set { } }
         protected string CurrentValueAsString { get { throw null; } set { } }

src/Components/Web/src/Forms/InputBase.cs

@@ -3,6 +3,7 @@
 
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Linq.Expressions;
 using System.Threading.Tasks;
 
@@ -25,7 +26,7 @@ public abstract class InputBase<TValue> : ComponentBase, IDisposable
         /// <summary>
         /// Gets or sets a collection of additional attributes that will be applied to the created element.
         /// </summary>
-        [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
+        [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> AdditionalAttributes { get; set; }
 
         /// <summary>
         /// Gets or sets the value of the input. This should be used with two-way binding.
@@ -127,7 +128,7 @@ protected string CurrentValueAsString
         /// </summary>
         protected InputBase()
         {
-            _validationStateChangedHandler = (sender, eventArgs) => StateHasChanged();
+            _validationStateChangedHandler = OnValidateStateChanged;
         }
 
         /// <summary>
@@ -216,10 +217,37 @@ public override Task SetParametersAsync(ParameterView parameters)
                     $"{nameof(Forms.EditContext)} dynamically.");
             }
 
+            SetAdditionalAttributesIfValidationFailed();
+
             // For derived components, retain the usual lifecycle with OnInit/OnParametersSet/etc.
             return base.SetParametersAsync(ParameterView.Empty);
         }
 
+        private void OnValidateStateChanged(object sender, ValidationStateChangedEventArgs eventArgs)
+        {
+            SetAdditionalAttributesIfValidationFailed();
+
+            StateHasChanged();
+        }
+
+        private void SetAdditionalAttributesIfValidationFailed()
+        {
+            if (EditContext.GetValidationMessages(FieldIdentifier).Any())
+            {
+                // To make the `Input` components accessible by default
+                // we will automatically render the `aria-invalid` attribute when the validation fails
+                if (AdditionalAttributes == null)
+                {
+                    AdditionalAttributes = new Dictionary<string, object>();
+                    AdditionalAttributes["aria-invalid"] = true;
+                }
+                else if (!AdditionalAttributes.ContainsKey("aria-invalid"))
+                {
+                    AdditionalAttributes["aria-invalid"] = true;
+                }
+            }
+        }
+
         protected virtual void Dispose(bool disposing)
         {
         }

src/Components/Web/test/Forms/InputBaseTest.cs

@@ -362,6 +362,7 @@ public async Task RespondsToValidationStateChangeNotifications()
             var inputComponentId = componentFrame1.ComponentId;
             var component = (TestInputComponent<string>)componentFrame1.Component;
             Assert.Equal("valid", component.CssClass);
+            Assert.Null(component.AdditionalAttributes);
 
             // Act: update the field state in the EditContext and notify
             var messageStore = new ValidationMessageStore(rootComponent.EditContext);
@@ -372,6 +373,8 @@ public async Task RespondsToValidationStateChangeNotifications()
             var batch2 = renderer.Batches.Skip(1).Single();
             Assert.Equal(inputComponentId, batch2.DiffsByComponentId.Keys.Single());
             Assert.Equal("invalid", component.CssClass);
+            Assert.NotNull(component.AdditionalAttributes);
+            Assert.True(component.AdditionalAttributes.ContainsKey("aria-invalid"));
         }
 
         [Fact]
@@ -400,6 +403,73 @@ public async Task UnsubscribesFromValidationStateChangeNotifications()
             Assert.Empty(renderer.Batches.Skip(1));
         }
 
+        [Fact]
+        public async Task AriaAttributeIsRenderedWhenTheValidationStateIsInvalidOnFirstRender()
+        {
+            // Arrange// Arrange
+            var model = new TestModel();
+            var invalidContext = new EditContext(model);
+
+            var rootComponent = new TestInputHostComponent<string, TestInputComponent<string>>
+            {
+                EditContext = invalidContext,
+                ValueExpression = () => model.StringProperty
+            };
+
+            var fieldIdentifier = FieldIdentifier.Create(() => model.StringProperty);
+            var messageStore = new ValidationMessageStore(invalidContext);
+            messageStore.Add(fieldIdentifier, "Test error message");
+
+            var renderer = new TestRenderer();
+            var rootComponentId = renderer.AssignRootComponentId(rootComponent);
+            await renderer.RenderRootComponentAsync(rootComponentId);
+
+
+            // Initally, it rendered one batch and is valid
+            var batch1 = renderer.Batches.Single();
+            var componentFrame1 = batch1.GetComponentFrames<TestInputComponent<string>>().Single();
+            var inputComponentId = componentFrame1.ComponentId;
+            var component = (TestInputComponent<string>)componentFrame1.Component;
+            Assert.Equal("invalid", component.CssClass);
+            Assert.NotNull(component.AdditionalAttributes);
+            Assert.Equal(1, component.AdditionalAttributes.Count);
+            Assert.True((bool)component.AdditionalAttributes["aria-invalid"]);
+        }
+
+        [Fact]
+        public async Task UserSpecifiedAriaValueIsNotChangedIfInvalid()
+        {
+            // Arrange// Arrange
+            var model = new TestModel();
+            var invalidContext = new EditContext(model);
+
+            var rootComponent = new TestInputHostComponent<string, TestInputComponent<string>>
+            {
+                EditContext = invalidContext,
+                ValueExpression = () => model.StringProperty
+            };
+            rootComponent.AdditionalAttributes = new Dictionary<string, object>();
+            rootComponent.AdditionalAttributes["aria-invalid"] = "userSpecifiedValue";
+
+            var fieldIdentifier = FieldIdentifier.Create(() => model.StringProperty);
+            var messageStore = new ValidationMessageStore(invalidContext);
+            messageStore.Add(fieldIdentifier, "Test error message");
+
+            var renderer = new TestRenderer();
+            var rootComponentId = renderer.AssignRootComponentId(rootComponent);
+            await renderer.RenderRootComponentAsync(rootComponentId);
+
+            // Initally, it rendered one batch and is valid
+            var batch1 = renderer.Batches.Single();
+            var componentFrame1 = batch1.GetComponentFrames<TestInputComponent<string>>().Single();
+            var inputComponentId = componentFrame1.ComponentId;
+            var component = (TestInputComponent<string>)componentFrame1.Component;
+            Assert.Equal("invalid", component.CssClass);
+            Assert.NotNull(component.AdditionalAttributes);
+            Assert.Equal(1, component.AdditionalAttributes.Count);
+            Assert.Equal("userSpecifiedValue", component.AdditionalAttributes["aria-invalid"]);
+        }
+
         private static TComponent FindComponent<TComponent>(CapturedBatch batch)
             => batch.ReferenceFrames
                     .Where(f => f.FrameType == RenderTreeFrameType.Component)

src/Components/test/E2ETest/Tests/FormsTest.cs

@@ -94,16 +94,20 @@ public void InputTextInteractsWithEditContext()
             Browser.Equal("valid", () => nameInput.GetAttribute("class"));
             nameInput.SendKeys("Bert\t");
             Browser.Equal("modified valid", () => nameInput.GetAttribute("class"));
+            EnsureAttributeRendering(nameInput, "aria-invalid");
 
             // Can become invalid
             nameInput.SendKeys("01234567890123456789\t");
             Browser.Equal("modified invalid", () => nameInput.GetAttribute("class"));
+            EnsureAttributeRendering(nameInput, "aria-invalid", false);
             Browser.Equal(new[] { "That name is too long" }, messagesAccessor);
 
             // Can become valid
             nameInput.Clear();
             nameInput.SendKeys("Bert\t");
             Browser.Equal("modified valid", () => nameInput.GetAttribute("class"));
+            Browser.Equal(false, () => nameInput.GetAttribute("aria-invalid") != null);
+            EnsureAttributeRendering(nameInput, "aria-invalid");
             Browser.Empty(messagesAccessor);
         }
 
@@ -456,5 +460,10 @@ private void ApplyInvalidInputDateValue(string cssSelector, string invalidValue)
                 + $"elem.value = {JsonSerializer.Serialize(invalidValue, TestJsonSerializerOptionsProvider.Options)};"
                 + "elem.dispatchEvent(new KeyboardEvent('change'));");
         }
+
+        private void EnsureAttributeRendering(IWebElement element, string attributeName, bool shouldBeRendered = true)
+        {
+            Browser.Equal(shouldBeRendered, () => element.GetAttribute(attributeName) != null);
+        }
     }
 }