Skip to content

MudBaseInput components: add helper text reference to aria-describedby attribute#9193

Merged
henon merged 4 commits intoMudBlazor:devfrom
igotinfected:feature/mudinput-error-text-accessibility
Jun 21, 2024
Merged

MudBaseInput components: add helper text reference to aria-describedby attribute#9193
henon merged 4 commits intoMudBlazor:devfrom
igotinfected:feature/mudinput-error-text-accessibility

Conversation

@igotinfected
Copy link
Member

@igotinfected igotinfected commented Jun 16, 2024 •
edited
Loading

Description

Adds a reference to helper text to the aria-describedby attribute for all MudBaseInput inheritors.

Consumers can use this feature in two ways:

  • provide the HelperId parameter: this value will always be present in the aria-describedby attribute
  • provide the HelperText parameter: this value will only be present when the input does not have any errors because the ErrorText replaces the HelperText internally once validation is triggered

This PR affects the following components:

  • MudTextField
  • MudAutocomplete
  • MudSelect
  • MudNumericField

MudPicker inheritors will follow in a separate PR :)

Also fixed some smaller issues:

  • MudNumericField:
    • add ErrorText id to aria-describedby
    • ensure ConversionErrorText is also displayed when available
    • ensure AdornmentAriaLabel is rendered
  • MudAutocomplete:
    • add ErrorText id to aria-describedby
    • ensure ConversionErrorText is also displayed when available
    • ensure AdornmentAriaLabel is rendered
  • MudTextField with mask:
    • ensure AdornmentAriaLabel is rendered

How Has This Been Tested?

Unit tests and quick visual checks.

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label Jun 16, 2024
@igotinfected
Copy link
Member Author

igotinfected commented Jun 16, 2024 •
edited
Loading

TODO:

  • need to allow consumers to pass a HelperId for their own helper labels
  • when HelperText is used instead of a custom helper label, we need to remove the HelperId from aria-describedby since the ErrorId is placed on the same label internally
  • tests
  • document small fixes

FYI @danielchalmers, already working as-is, should be able to finish it up in the next few days

@codecov
Copy link

codecov bot commented Jun 16, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.85%. Comparing base (28bc599) to head (c143b8c).
Report is 284 commits behind head on dev.

Additional details and impacted files 
@@            Coverage Diff             @@
##              dev    #9193      +/-   ##
==========================================
+ Coverage   89.82%   90.85%   +1.02%     
==========================================
  Files         412      401      -11     
  Lines       11878    12525     +647     
  Branches     2364     2439      +75     
==========================================
+ Hits        10670    11379     +709     
+ Misses        681      607      -74     
- Partials      527      539      +12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@igotinfected igotinfected changed the title TextField: make HelperText accessible MudBaseInput components: add helper text reference to aria-describedby property Jun 17, 2024
@igotinfected igotinfected changed the title MudBaseInput components: add helper text reference to aria-describedby property MudBaseInput components: add helper text reference to aria-describedby attribute Jun 17, 2024
@igotinfected igotinfected marked this pull request as ready for review June 18, 2024 20:34
@igotinfected
Copy link
Member Author

igotinfected commented Jun 18, 2024

Good to go!

cc @ScarletKuro @danielchalmers

danielchalmers
danielchalmers approved these changes Jun 19, 2024
View reviewed changes
Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

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

Wonderful, LGTM. Thanks for getting this working

@danielchalmers danielchalmers requested a review from henon June 19, 2024 03:10
henon
henon approved these changes Jun 20, 2024
View reviewed changes
Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

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

LGTM

@henon henon merged commit 6e5407d into MudBlazor:dev Jun 21, 2024
@henon
Copy link
Contributor

henon commented Jun 21, 2024

Thanks

@igotinfected igotinfected deleted the feature/mudinput-error-text-accessibility branch June 21, 2024 19:19
@igotinfected igotinfected mentioned this pull request Jul 8, 2024
Closed
@igotinfected igotinfected mentioned this pull request Jul 19, 2024
Closed
2 tasks
@dependabot dependabot bot mentioned this pull request Aug 7, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@henon henon henon approved these changes

@danielchalmers danielchalmers danielchalmers approved these changes

Assignees

No one assigned

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@igotinfected @henon @danielchalmers