2
0
Эх сурвалжийг харах

Remove aria-invalid when validation state changes to valid (#28854)

The original logic for input validation was adding aria-invalid attribute when validation state changed to invalid.
However, as is reported in the below referred issue, the attribute didn't get removed, when state later changed to valid.

This change addresses that issue.
Also removing blazor.webassembly.js per review comment.

Addresses #28823
Artak 5 жил өмнө
parent
commit
cd5303d6d8

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
src/Components/Web.JS/dist/Release/blazor.server.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
src/Components/Web.JS/dist/Release/blazor.webassembly.js


+ 24 - 4
src/Components/Web/src/Forms/InputBase.cs

@@ -226,7 +226,7 @@ namespace Microsoft.AspNetCore.Components.Forms
                     $"{nameof(Forms.EditContext)} dynamically.");
             }
 
-            SetAdditionalAttributesIfValidationFailed();
+            UpdateAdditionalValidationAttributes();
 
             // For derived components, retain the usual lifecycle with OnInit/OnParametersSet/etc.
             return base.SetParametersAsync(ParameterView.Empty);
@@ -234,16 +234,17 @@ namespace Microsoft.AspNetCore.Components.Forms
 
         private void OnValidateStateChanged(object? sender, ValidationStateChangedEventArgs eventArgs)
         {
-            SetAdditionalAttributesIfValidationFailed();
+            UpdateAdditionalValidationAttributes();
 
             StateHasChanged();
         }
 
-        private void SetAdditionalAttributesIfValidationFailed()
+        private void UpdateAdditionalValidationAttributes()
         {
+            var hasAriaInvalidAttribute = AdditionalAttributes != null && AdditionalAttributes.ContainsKey("aria-invalid");
             if (EditContext.GetValidationMessages(FieldIdentifier).Any())
             {
-                if (AdditionalAttributes != null && AdditionalAttributes.ContainsKey("aria-invalid"))
+                if (hasAriaInvalidAttribute)
                 {
                     // Do not overwrite the attribute value
                     return;
@@ -258,6 +259,25 @@ namespace Microsoft.AspNetCore.Components.Forms
                 // we will automatically render the `aria-invalid` attribute when the validation fails
                 additionalAttributes["aria-invalid"] = true;
             }
+            else if (hasAriaInvalidAttribute)
+            {
+                // No validation errors. Need to remove `aria-invalid` if it was rendered already
+
+                if (AdditionalAttributes!.Count == 1)
+                {
+                    // Only aria-invalid argument is present which we don't need any more
+                    AdditionalAttributes = null;
+                }
+                else
+                {
+                    if (ConvertToDictionary(AdditionalAttributes, out var additionalAttributes))
+                    {
+                        AdditionalAttributes = additionalAttributes;
+                    }
+
+                    additionalAttributes.Remove("aria-invalid");
+                }
+            }
         }
 
         /// <summary>

+ 37 - 0
src/Components/Web/test/Forms/InputBaseTest.cs

@@ -468,6 +468,43 @@ namespace Microsoft.AspNetCore.Components.Forms
             Assert.Equal("userSpecifiedValue", component.AdditionalAttributes["aria-invalid"]);
         }
 
+        [Fact]
+        public async Task AriaAttributeRemovedWhenStateChangesToValidFromInvalid()
+        {
+            // Arrange
+            var model = new TestModel();
+            var rootComponent = new TestInputHostComponent<string, TestInputComponent<string>>
+            {
+                EditContext = new EditContext(model),
+                ValueExpression = () => model.StringProperty
+            };
+            var fieldIdentifier = FieldIdentifier.Create(() => model.StringProperty);
+            var renderer = new TestRenderer();
+            var messageStore = new ValidationMessageStore(rootComponent.EditContext);
+            messageStore.Add(fieldIdentifier, "Artificial error message");
+            var rootComponentId = renderer.AssignRootComponentId(rootComponent);
+            await renderer.RenderRootComponentAsync(rootComponentId);
+
+            // Initally, it rendered one batch and is invalid
+            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.True(component.AdditionalAttributes.ContainsKey("aria-invalid"));
+
+            // Act: update the field state in the EditContext and notify
+            messageStore.Clear(fieldIdentifier);
+            await renderer.Dispatcher.InvokeAsync(rootComponent.EditContext.NotifyValidationStateChanged);
+
+            // Assert: The input component rendered itself again and now has the new class
+            var batch2 = renderer.Batches.Skip(1).Single();
+            Assert.Equal(inputComponentId, batch2.DiffsByComponentId.Keys.Single());
+            Assert.Equal("valid", component.CssClass);
+            Assert.Null(component.AdditionalAttributes);
+        }
+
         class TestModel
         {
             public string StringProperty { get; set; }

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно