Navigation: Improve accessibility (#4651, #4755, #4756)

[igotinfected]

Description

Implemented accessibility recommendations for MudNavGroup, MudNavMenu, and MudNavLink.

The main goal of this PR is to improve/fix keyboard navigation in navigation blocks and to address the issues linked below.

I introduced a NavigationContext that allows passing state down a navigation group chain which allows us to figure out whether buttons/links at a specific level of the chain should be focusable via keyboard navigation.

Usage of tabindex, aria-label, aria-expanded, aria-hidden, aria-controls attributes should now be better (but not necessarily perfect).

I also had to change the Localizer API to accept arguments which can be quite useful (passing a value to a longer translation to include it in a certain position for example).

Fixes #4651
Resolves #4756 (original issue is fixed/improved but implementation differs from request)
Fixes #4755

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)

NavMenu Sub Groups example comparison

chrome_E1b0GaRbDx.mp4

MudBlazor docs navigation comparison

chrome_aVp2Q3o3LD.mp4

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.10%. Comparing base (28bc599) to head (183b4a9).
Report is 55 commits behind head on dev.

❗ Current head 183b4a9 differs from pull request most recent head fa22ed0. Consider uploading reports for the commit fa22ed0 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #8684      +/-   ##
==========================================
+ Coverage   89.82%   90.10%   +0.27%     
==========================================
  Files         412      418       +6     
  Lines       11878    12028     +150     
  Branches     2364     2369       +5     
==========================================
+ Hits        10670    10838     +168     
+ Misses        681      658      -23     
- Partials      527      532       +5     

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

[igotinfected]

FYI @ScarletKuro @henon!

These changes should work with #8672. I made MudNavGroup a nav too because that cleans up the accessibility tree quite a bit:

@ScarletKuro I changed the Localizer API without thinking too much about it, let me know if you want it done differently (i.e. by adding an overload instead).

[ScarletKuro]

@ScarletKuro I changed the Localizer API without thinking too much about it, let me know if you want it done differently (i.e. by adding an overload instead).

Looks ok, as I understand it's optional and it doesn't break existing code and doesn't change how the Localizer is behaving.

[henon]

These changes should work with !8672.

@igotinfected please use # instead of ! to link to issues or PRs. i.e. #8672

[igotinfected]

These changes should work with !8672.

@igotinfected please use # instead of ! to link to issues or PRs. i.e. #8672

My bad, thanks for catching that (and in one of my other comments too), I'm on Azure DevOps at work where you have to use ! for PRs so it's just muscle memory 🤪

[henon]

@igotinfected Thanks. For this we don't need to add anything to the v7 migration guide right?

[igotinfected]

@henon nope should be transparent!