Skip to content

MudAvatar, MudAvatarGroup, MudBadge: Improve accessibility#8986

Merged
henon merged 3 commits intoMudBlazor:devfrom
danielchalmers:a11y-2
May 19, 2024
Merged

MudAvatar, MudAvatarGroup, MudBadge: Improve accessibility#8986
henon merged 3 commits intoMudBlazor:devfrom
danielchalmers:a11y-2

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented May 17, 2024

Description

Part of series in #8901

Avatar:

  • Add role="img" to the <div> element to indicate that it is an image or avatar.

AvatarGroup:

  • Add role="group" to the <div> to indicate it's a group.

Badge:

  • Add role="status" and aria-live="polite" to the outer to make screen readers aware of any updates to the badge content.
  • Add BadgeAriaLabel
  • Use a <div> instead of a <span> for the badge root container so it's properly a block element
  • Rename BadgeClassName to BadgeClassname
  • Fix markup using tabs instead of spaces
  • I didn't make the badge keyboard accessible due to added complexity but it should be if it's also clickable

How Has This Been Tested?

unit

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.

Avatar:
- Add role="img" to the <div> element to indicate that it is an image or avatar.

AvatarGroup:
- Add role="group" to the <div> to indicate it's a group.

Badge:
- Add role="status" and aria-live="polite" to the outer to make screen readers aware of any updates to the badge content.
- Add BadgeAriaLabel
- Rename BadgeClassName to BadgeClassname
- Fix markup using tabs instead of spaces
- I didn't make the badge keyboard accessible due to added complexity but it should be if it's also clickable
@danielchalmers danielchalmers requested a review from henon May 17, 2024 00:21
@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels May 17, 2024
@codecov
Copy link

codecov bot commented May 17, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.48%. Comparing base (28bc599) to head (3cd9f2b).
Report is 206 commits behind head on dev.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #8986      +/-   ##
==========================================
+ Coverage   89.82%   90.48%   +0.65%     
==========================================
  Files         412      396      -16     
  Lines       11878    12127     +249     
  Branches     2364     2364              
==========================================
+ Hits        10670    10973     +303     
+ Misses        681      621      -60     
- Partials      527      533       +6     

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

@henon
Copy link
Contributor

henon commented May 18, 2024

@igotinfected FYI

Copy link
Member

@igotinfected igotinfected 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 bcad85c into MudBlazor:dev May 19, 2024
@henon
Copy link
Contributor

henon commented May 19, 2024

Thanks Daniel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants