Skip to content

MudFocusTrap, MudFlexBreak, MudIcon, MudSpacer: Improve accessibility#9007

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

MudFocusTrap, MudFlexBreak, MudIcon, MudSpacer: Improve accessibility#9007
henon merged 2 commits intoMudBlazor:devfrom
danielchalmers:a11y-3

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented May 18, 2024 •
edited
Loading

Description

Part of a series in #8901. Reminder: I'm not an expert.

FocusTrap:

  • Added aria-hidden="true" to elements that should be ignored by screen readers (e.g., bumpers and fallback divs)

FlexBreak

  • Added aria-hidden="true"

Icon:

  • Add aria-hidden="true" and role="img" to the secondary span like the first
  • Moved @attributes="UserAttributes" to the ends so the user can override all attributes

Spacer

  • Added aria-hidden="true"

How Has This Been Tested?

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.

@danielchalmers
FocusTrap,FlexBreak,Grid,Item,Icon: Improve accessibility
108dbd4 
FocusTrap:
- Added aria-hidden="true" to elements that should be ignored by screen readers (e.g., bumpers and fallback divs)

FlexBreak
- Added aria-hidden="true"

Grid:
- Use the role="grid" attribute to define it as a grid layout. This makes it easier for assistive technologies to understand the structure of the content.

Item:
- Use the role="gridcell" attribute to indicate that it is a cell within the grid.

Icon:
- Add aria-hidden="true" and role="img" to the secondary span like the first
- Moved @attributes="UserAttributes" to the ends so the user can override all attributes

Spacer
- Added aria-hidden="true"
@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 18, 2024
@danielchalmers
Copy link
Member Author

danielchalmers commented May 18, 2024

@igotinfected These I'm less sure about, what do you think?

@codecov
Copy link

codecov bot commented May 18, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.51%. Comparing base (28bc599) to head (4328675).
Report is 214 commits behind head on dev.

Additional details and impacted files 
@@            Coverage Diff             @@
##              dev    #9007      +/-   ##
==========================================
+ Coverage   89.82%   90.51%   +0.68%     
==========================================
  Files         412      394      -18     
  Lines       11878    12139     +261     
  Branches     2364     2369       +5     
==========================================
+ Hits        10670    10988     +318     
+ Misses        681      620      -61     
- Partials      527      531       +4

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

@igotinfected
Copy link
Member

igotinfected commented May 19, 2024

@igotinfected These I'm less sure about, what do you think?

The only thing I'm unsure about is MudGrid and MudItem, these two could technically be used for anything by a user.

There seem to be ongoing discussions (linked issues go into more detail) about clarifying the use of role=grid for layout purposes, but I can't find anything conclusive.

Though the one thing currently that speaks against using role=grid in this case in my opinion is the keyboard navigation that should be implemented according to W3C docs (layout grids section).

The keyboard behaviour as defined could be considered as breaking depending on how it's implemented. One of our applications at work for example uses MudGrid and MudItem for the layout of a form where each MudItem usually contains one form component. The focus should go directly to the form component, not to the cell (MudItem div) itself. We would likely have to have a way to disable focus on the cell.

@danielchalmers danielchalmers changed the title FocusTrap,FlexBreak,Grid,Item,Icon: Improve accessibility MudFocusTrap, MudFlexBreak, MudIcon: Improve accessibility May 19, 2024
@danielchalmers danielchalmers changed the title MudFocusTrap, MudFlexBreak, MudIcon: Improve accessibility MudFocusTrap, MudFlexBreak, MudIcon, MudSpacer: Improve accessibility May 19, 2024
@danielchalmers
Copy link
Member Author

danielchalmers commented May 19, 2024

Thanks @igotinfected, I reverted MudGrid and MudItem and will circle back round in the future. Do you still want to be pinged on these PRs? I'll be making several more hopefully.

@henon Should be ready to go

@igotinfected
Copy link
Member

igotinfected commented May 19, 2024

@danielchalmers feel free if you want a second opinion, I'm in the learning stage on accessibility just like you :)

@danielchalmers danielchalmers requested a review from henon May 19, 2024 19:44
@henon henon merged commit 2d7f330 into MudBlazor:dev May 20, 2024
@henon
Copy link
Contributor

henon commented May 20, 2024

Thanks!

danielchalmers added a commit to danielchalmers/MudBlazor that referenced this pull request May 31, 2024
@danielchalmers
MudFocusTrap: Don't hide focusable elements from accessibility tree
dfe9d9b 
Reverts parts of MudBlazor#9007

> The problem is: Removing a focusable element like a link from the accessibility tree does not remove it from tab order. A screen reader user tabbing through the website will arrive at the link and hear “empty” or something similar. Please, don't do this!

Going to err on the side of caution because it's easy to make accessibility worse unintentionally.

https://oidaisdes.org/common-aria-mistakes.en/
@danielchalmers danielchalmers mentioned this pull request May 31, 2024
Merged
7 tasks
@dependabot dependabot bot mentioned this pull request Aug 7, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@henon henon Awaiting requested review from henon

Assignees

No one assigned

Labels

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.

3 participants

@danielchalmers @igotinfected @henon