Skip to content
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

FormComponent: accessible validation messages #4185

Merged
merged 5 commits into from
May 12, 2022

Conversation

jeffej01
Copy link
Contributor

Added aria-invalid and aria-describedby attributes to inputs when validation error present.

This allows screen readers to know the control has an error and what the error message is. Without these screen reader users are unlikely to be informed of the error.

To implement the aria-describedby attribute, an error id has been generated and added to both the input control via the aria-describedby attribute and the id attrribute of the error message

@JonBunator JonBunator added enhancement New feature or request needs review labels Mar 27, 2022
@@ -61,6 +61,13 @@ protected MudFormComponent(Converter<T, U> converter)
[Category(CategoryTypes.FormComponent.Validation)]
public bool Error { get; set; }

/// <summary>
/// If error, used by aria-describedby.
Copy link
Collaborator

Choose a reason for hiding this comment

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

In MudInputControl you have this comment which I like a lot more:
The ErrorId that will be used by aria-describedby if Error true

@@ -118,7 +118,7 @@ public async Task TextFieldConversionError()
comp.Find("input").Change("seventeen");
comp.Find("input").Blur();
//Console.WriteLine(comp.Markup);
comp.FindAll("div.mud-input-error").Count.Should().Be(1);
comp.FindAll("div.mud-input-error").Count.Should().Be(2);
Copy link
Collaborator

Choose a reason for hiding this comment

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

why did the count increase 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.

When there's a validation error the control itself is given a mud-input-error class and also the the error message label. This is existing and can be seen on the MudBlazor docs. Not sure how this test ever passed before!

@henon
Copy link
Collaborator

henon commented May 10, 2022

Just a minor change to be made to the comment, then this can be merged.

@codecov
Copy link

codecov bot commented May 12, 2022

Codecov Report

Merging #4185 (84c997f) into dev (f2b3414) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##              dev    #4185   +/-   ##
=======================================
  Coverage   91.27%   91.28%           
=======================================
  Files         362      362           
  Lines       12488    12489    +1     
=======================================
+ Hits        11399    11400    +1     
  Misses       1089     1089           
Impacted Files Coverage Δ
src/MudBlazor/Components/Input/MudInput.razor 100.00% <ø> (ø)
...azor/Components/InputControl/MudInputControl.razor 100.00% <ø> (ø)
...r/Components/InputControl/MudInputControl.razor.cs 100.00% <ø> (ø)
src/MudBlazor/Components/Select/MudSelect.razor 87.50% <ø> (ø)
.../MudBlazor/Components/TextField/MudTextField.razor 100.00% <ø> (ø)
src/MudBlazor/Base/MudFormComponent.cs 87.98% <100.00%> (+0.05%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f2b3414...84c997f. Read the comment docs.

@henon henon merged commit fc8240d into MudBlazor:dev May 12, 2022
@henon henon added this to the 6.0.11 milestone May 12, 2022
@henon
Copy link
Collaborator

henon commented May 12, 2022

Thanks!

jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
jammerware pushed a commit to jammerware/MudBlazor that referenced this pull request Sep 20, 2022
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
3dots pushed a commit to 3dots/MudBlazor that referenced this pull request Mar 23, 2023
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
ScarletKuro pushed a commit to ScarletKuro/MudBlazor that referenced this pull request Mar 27, 2023
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
ferraridavide pushed a commit to ferraridavide/MudBlazor that referenced this pull request May 30, 2023
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
ilovepilav pushed a commit to ilovepilav/MudBlazor that referenced this pull request Nov 25, 2023
* MudInput validation errors make aria friendly.

* Improved comment on errorid in MudFormCompnent

Co-authored-by: Meinrad Recheis <meinrad.recheis@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants