Various components: Improve localization and ARIA#9071
Conversation
|
@igotinfected Thanks for all your help, I've got another for you. This time I'm doing refinement on earlier PRs in addition to more localization. I realized I added too many aria-labels which is more harmful than anything. If a button (for example) already has text, it really doesn't need a label as well. Icon buttons are where they come in best. Speaking of icons, I'm not sure it's right that we hide all icons from screen readers: Seems like it's the right thing only if they are decorative or already described by a label? |
because im not sure if it's the right thing to do when it's not keyboard navigatable
|
Do you know what's up with this error @ScarletKuro ?
|
Look at the test, it's using a context that has no mudblazor services registered at all. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## dev #9071 +/- ##
==========================================
+ Coverage 89.82% 90.63% +0.80%
==========================================
Files 412 398 -14
Lines 11878 12378 +500
Branches 2364 2405 +41
==========================================
+ Hits 10670 11219 +549
+ Misses 681 621 -60
- Partials 527 538 +11 ☔ View full report in Codecov by Sentry. |
igotinfected
left a comment
There was a problem hiding this comment.
Added some thoughts!
Seems like it's the right thing only if they are decorative or already described by a label?
Yeah from what I see they should only be aria-hidden if they don't have a function. I think you can consider icons not to have a function if the parent (say a div or a button or an a) have an accessible label.
For cases like MudInput in this PR for instance you could choose to add the label to the MudButton instead of the MudIcon. I assume that if the icon is aria-hidden the label might not even be shown in the accessibility tree or be announced by a screen reader.
Looking at the MudIcon razor code by itself I think that if IsAngleBracket is true and a Title is provided you are already in the clear from an accessibility point of view for most modern browsers (with aria-hidden="false" or not present at all).
|
Also for the resource keys I would suggest not using punctuation/special characters in the resources to be able to use static references (in reference to the |
Yes! I tried to fix all that but it didn't render properly due to the weird markup and all the text was literally "MudDataGrid_etcetc", then I couldn't figure out how the punctuation was actually used. Didn't have time to familiarize myself with the technicalities so just reverted the changes :( |
|
@henon Ready to review |
Should we change the datagrid keys? Though it will be a breaking change :( I dislike that we now have inconsistencies where some use |
@ScarletKuro Take a look at bd0d536 and see if you can figure out why it renders the keys literally (The filter placeholder will say "MudDataGrid_FilterValue") |
If you look at |
|
@ScarletKuro So weird, thanks for the explanation. What do you think we should do about it? I can do the bulk of the refactoring |
We'll do it but not in v7. Let's just put it on our list and at some time when we make another major version and don't have a massive change set we'll do it. Adding this to the v8 project, but we don't necessarily have to do it in v8, it can wait. |
|
Is this ready to merge? |
@henon Yes EDIT: Wait for @jperson2000 |
|
@jperson2000 Mind taking a look at these doc changes? |
jperson2000
left a comment
There was a problem hiding this comment.
It's great to see the improvements for accessibility and localization! The only thought I had was to communicate to users what "aria-label" is somehow, but I couldn't think of a specific suggestion or docs change. Good changes, though, with active language.
|
@henon Ready to merge! |
|
Thanks |
Description
Now that I've implemented several PRs for this area, I'm able to look back an make revisions on earlier work. I now understand that ARIA labels should be used more sparingly ("No ARIA is better than bad ARIA").
Reviewed all aria-labels and localization in MudBlazor in order to:
nullinstead of an empty stringNotes:
aria-labelledby/aria-describedby)How Has This Been Tested?
visually
Type of Changes
Checklist
dev).