Skip to content

Input: Add required and aria-required attributes (#5437)#8691

Merged
henon merged 9 commits intoMudBlazor:devfrom
igotinfected:feature/required-inputs-should-have-required-attribute
Apr 18, 2024
Merged

Input: Add required and aria-required attributes (#5437)#8691
henon merged 9 commits intoMudBlazor:devfrom
igotinfected:feature/required-inputs-should-have-required-attribute

Conversation

@igotinfected
Copy link
Member

@igotinfected igotinfected commented Apr 14, 2024 •
edited
Loading

Description

Implemented the required and aria-required attributes in most components that emit inputs.

Affected components:

  • MudInput, MudRangeInput, MudMask
  • MudTextField, MudAutocomplete, MudSelect, MudNumericField
  • MudDatePicker, MudDateRangerPicker, MudColorPicker
  • MudFileUpload
  • MudCheckBox, MudSwitch, MudRadio

Resolves #5437

How Has This Been Tested?

Visually + unit tests.

Types 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)

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 bug Unexpected behavior or functionality not working as intended enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library labels Apr 14, 2024
@codecov
Copy link

codecov bot commented Apr 14, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.13%. Comparing base (28bc599) to head (9c61b63).
Report is 76 commits behind head on dev.

❗ Current head 9c61b63 differs from pull request most recent head b9d2d1f. Consider uploading reports for the commit b9d2d1f to get more accurate results

Additional details and impacted files 
@@            Coverage Diff             @@
##              dev    #8691      +/-   ##
==========================================
+ Coverage   89.82%   90.13%   +0.30%     
==========================================
  Files         412      419       +7     
  Lines       11878    12181     +303     
  Branches     2364     2397      +33     
==========================================
+ Hits        10670    10979     +309     
+ Misses        681      664      -17     
- Partials      527      538      +11

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

@igotinfected igotinfected marked this pull request as ready for review April 14, 2024 18:07
ScarletKuro
ScarletKuro reviewed Apr 15, 2024
View reviewed changes
danielchalmers
danielchalmers reviewed Apr 16, 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.

So stoked for all these accessibility changes!

I do think all inputs should have required; MudCheckBox, MudSwitch, MudRadio, etc. Seems fairly standard and I don't see the downside.

@igotinfected
Copy link
Member Author

igotinfected commented Apr 16, 2024

So stoked for all these accessibility changes!

I do think all inputs should have required; MudCheckBox, MudSwitch, MudRadio, etc. Seems fairly standard and I don't see the downside.

Yup, will add MudCheckBox, MudSwitch, and MudRadioGroup (all three inherit from MudFormComponent which is the class containing Required logic). MudRadio on its own is not a form-control.

@igotinfected igotinfected changed the title Input: Add required and aria-required attr. (#5437) Input: Add required and aria-required attributes (#5437) Apr 16, 2024
@igotinfected
Copy link
Member Author

igotinfected commented Apr 16, 2024

So stoked for all these accessibility changes!
I do think all inputs should have required; MudCheckBox, MudSwitch, MudRadio, etc. Seems fairly standard and I don't see the downside.

Yup, will add MudCheckBox, MudSwitch, and MudRadioGroup (all three inherit from MudFormComponent which is the class containing Required logic). MudRadio on its own is not a form-control.

Done. For MudRadioGroup the MDN doc states that the element with the role="radiogroup" attribute should also have required & aria-required, so that's what I did.

henon
henon reviewed Apr 18, 2024
View reviewed changes
src/MudBlazor.UnitTests.Viewer/TestComponents/ColorPicker/SimpleColorPickerTest.razor
Comment on lines +13 to 20
DisableToolbar="DisableToolbar"
DisableColorField="DisableColorField"
DisablePreview="DisablePreview"
DisableSliders="DisableSliders"
DisableInputs="DisableInput"
DisableModeSwitch="DisableModeSwitch"
DisableAlpha="DisableAlpha"
DisableDragEffect="DisableDragEffect"
Copy link
Contributor

@henon henon Apr 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@danielchalmers do you want to flip all these Disable* in colorpicker for v7? In a separate PR of course

Copy link
Member

@danielchalmers danielchalmers Apr 18, 2024

Choose a reason for hiding this comment

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

Sure if someone can remind me after this is merged

@henon
Copy link
Contributor

henon commented Apr 18, 2024

Sorry, the branch is heavily conflicted. The code base is mutating pretty heavily due to all the breaking changes we make.

@igotinfected
Copy link
Member Author

igotinfected commented Apr 18, 2024

Sorry, the branch is heavily conflicted. The code base is mutating pretty heavily due to all the breaking changes we make.

No worries! Will clean it up when I find the time :)

@igotinfected
Copy link
Member Author

igotinfected commented Apr 18, 2024

Well turns out the conflicts were all due to my other recently merged PRs... 😇

@igotinfected
MudTextField: add missing tests for Mask case
b9d2d1f 
 # Please enter the commit message for your changes. Lines starting
@henon henon merged commit cd1cb6e into MudBlazor:dev Apr 18, 2024
@henon
Copy link
Contributor

henon commented Apr 18, 2024

Thanks again

@igotinfected igotinfected deleted the feature/required-inputs-should-have-required-attribute branch April 18, 2024 19:10
biegehydra pushed a commit to biegehydra/MudBlazor that referenced this pull request Apr 26, 2024
@igotinfected @biegehydra
Input: Add required and aria-required attributes (MudBlazor#5437) (…
56aea9c 
…MudBlazor#8691)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielchalmers danielchalmers danielchalmers left review comments

@ScarletKuro ScarletKuro ScarletKuro left review comments

@henon henon henon approved these changes

Assignees

No one assigned

Labels

bug Unexpected behavior or functionality not working as intended 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.

MudTextField not adding the required attribute

4 participants

@igotinfected @henon @danielchalmers @ScarletKuro