Skip to content

Render aria-invalid if the state is invalid #23131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 22, 2020
Merged

Render aria-invalid if the state is invalid #23131

merged 8 commits into from
Jun 22, 2020

Conversation

mkArtakMSFT
Copy link
Contributor

Automatically render aria-invalid attribute for components derived from the InputBase, when the validation state is invalid.

Note: I've made a small breaking change by changing the type of the AdditionalProperties property. This was necessary to avoid copying existing values later on.

One question I have here, is what will happen if the developer explicitly specifies the aria-invalid=false when declaring the component?

Addresses #14214

@ghost ghost added the area-blazor Includes: Blazor, Razor Components label Jun 19, 2020
@mkArtakMSFT mkArtakMSFT requested a review from a team June 19, 2020 05:11
@SteveSandersonMS
Copy link
Member

One question I have here, is what will happen if the developer explicitly specifies the aria-invalid=false when declaring the component?

I'd recommend that, if the AdditionalAttributes dictionary already contains an entry for aria-invalid, then we shouldn't overwrite it.

@SteveSandersonMS
Copy link
Member

SteveSandersonMS commented Jun 19, 2020

Is it possible also to add an E2E test to show that:

  • The aria-invalid attribute does actually appear on the rendered DOM element when the field becomes invalid
  • The same attribute actually does disappear from the rendered DOM element when the field later becomes valid

It should be possible to do that by extending the existing test cases, for example here (with the code being tested here). Thanks!

@@ -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; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of interest, is IDictionary also a viable option here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dictionary implements IReadOnlyDictionary and is not a code breaking change, where as if I change this to IDictionary instead, tests where we have something like the following, break. I expect this will also break customer code.

public new IReadOnlyDictionary<string, object> AdditionalAttributes => base.AdditionalAttributes;

Let me know if you want me to change this to IDictionary - I am not against it.


private void SetAdditionalAttributesIfValidationFailed()
{
if (!EditContext.GetValidationMessages(FieldIdentifier).Any())
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it help if we added a IsValid \ HasValidationMessages to EditContext?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes sense to add IsValid for sure, and not in this particular case only. I've seen customers in other comments also using this technique to check the validation state.

@mkArtakMSFT
Copy link
Contributor Author

@SteveSandersonMS please let me know if you have any concerns with current state.

@mkArtakMSFT
Copy link
Contributor Author

@SteveSandersonMS let me know if you want me to change something here. I'm merging this now as the branching will happen tomorrow.

@mkArtakMSFT mkArtakMSFT merged commit adbedd2 into master Jun 22, 2020
@mkArtakMSFT mkArtakMSFT deleted the newb branch June 22, 2020 04:43
@SteveSandersonMS
Copy link
Member

@mkArtakMSFT Looks good - thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhance accessibility of the Blazor Input components by adding aria-invalid
3 participants