Rating, ToggleGroup: Improve accessibility

[danielchalmers]

Description

MudRating

• Add role="radiogroup"
• Add aria-readonly="@ReadOnly"
• Fix mud-disabled class not applied to root so :active style was still applied
• Format razor & C#

MudRatingItem

• Add role="radio"
• Add aria-checked="@Checked" for readonly items
• Add localized label ("{0} Rating")
• Format razor & C#

MudToggleGroup

• Add role="group"
• Format razor
• still needs proper keyboard support (Waiting for [Draft] Introduce KeyInterceptorService withs sync/async support to replace KeyInterceptor #9003)

MudToggleItem

• Add role="checkbox"
• Add aria-checked="@Selected"

How Has This Been Tested?

visually

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.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.64%. Comparing base (28bc599) to head (905adae).
Report is 236 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #9058      +/-   ##
==========================================
+ Coverage   89.82%   90.64%   +0.81%     
==========================================
  Files         412      398      -14     
  Lines       11878    12374     +496     
  Branches     2364     2403      +39     
==========================================
+ Hits        10670    11216     +546     
+ Misses        681      620      -61     
- Partials      527      538      +11     

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

[danielchalmers]

cc @igotinfected 1 of 3

[igotinfected]

Added a few suggestions, as usual huge thanks for the work!

[danielchalmers]

What do you think now @igotinfected? Should be a good compromise i think

Maybe the ToggleItem needs a localizable label like MudRatingItem?

Also getting ARIA attributes must conform to valid values: Invalid ARIA attribute value: aria-checked="" on the ToggleItem. Any idea why?

Is there a difference in aria attributes and regular ones?
Here's a snippet I found: aria-checked="@(BoolValue.ToString().ToLower())" checked="@BoolValue".
One formats and one doesn't.

[igotinfected]

LGTM!

Maybe the ToggleItem needs a localizable label like MudRatingItem?

Users can add aria-label to MudToggleItem directly, should be fine?

Also getting ARIA attributes must conform to valid values: Invalid ARIA attribute value: aria-checked="" on the ToggleItem. Any idea why?

Pretty sure I ran into the same problem in one of my accessibility PRs... IIRC it's because aria-checked (and a bunch of other aria attributes) only have two valid values: true or false. This implies that they cannot be an empty string, or be used like disabled, or readonly, or checked, which are implicitly == true when no value is provided.

I think Blazor outputs attribute="" when passed a boolean true, hence the need to pass it a string like the snippet you posted: aria-checked="@(BoolValue.ToString().ToLower())" checked="@BoolValue"

[danielchalmers]

@henon Ready to review

[henon]

Thanks