Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve localization and accessibility #8901

Open
danielchalmers opened this issue May 7, 2024 · 5 comments
Open

Improve localization and accessibility #8901

danielchalmers opened this issue May 7, 2024 · 5 comments
Labels
accessibility enhancement New feature or request epic help wanted Issue that can be implemented by the community

Comments

@danielchalmers
Copy link
Contributor

danielchalmers commented May 7, 2024 •
edited

Is your feature request related to a problem?

MudBlazor was ranked low for accessibility but is improving. There are several issues and PRs regarding ARIA but they have been handled in a patchwork style without any concerted tracking. This is affecting the usability and SEO of consumers (which means we need your help as we can't do it alone).

Describe the solution you'd like

Accessibility information for web authors.

Accessibility includes things like aria and role attributes and extends past keyboard navigation and semantic HTML.

For localization, at a minimum we need localized aria-labels (How?) for relevant parts of a component. DataGrid alone will need several for the sort button, add filter, column options, etc.

All components should be checked for basic compatibility:

  • MudAlert
  • MudAppBar
  • MudAutocomplete
  • MudAvatar
  • MudAvatarGroup
  • MudBadge
  • BreadcrumbLink
  • BreadcrumbSeparator
  • MudBreadcrumbs
  • MudButton
  • MudFab
  • MudIconButton
  • MudToggleIconButton
  • MudButtonGroup
  • MudCard
  • MudCardActions
  • MudCardContent
  • MudCardHeader
  • MudCardMedia
  • MudCarousel
  • MudCarouselItem
  • MudChart
  • Bar
  • Donut
  • Line
  • Pie
  • StackedBar
  • Filters
  • Legend
  • MudCheckBox
  • MudChip
  • MudChipSet
  • MudCollapse
  • MudColorPicker
  • MudContainer
  • Column
  • FilterHeaderCell
  • FooterCell
  • HeaderCell
  • HierarchyColumn
  • MudDataGrid
  • MudDataGridPager
  • Row
  • SelectColumn
  • MudBaseDatePicker
  • MudDateRangePicker
  • MudDialog
  • MudDialogInstance
  • MudDivider
  • MudDrawer
  • MudDrawerContainer
  • MudDrawerHeader
  • MudDropContainer
  • MudDropZone
  • MudDynamicDropItem
  • MudExpansionPanel
  • MudExpansionPanels
  • MudField
  • MudFileUpload
  • MudFocusTrap
  • MudForm
  • MudFlexBreak
  • MudGrid
  • MudItem
  • MudIcon
  • MudImage
  • MudInput
  • MudInputAdornment
  • MudInputLabel
  • MudRangeInput
  • MudInputControl
  • MudLink
  • MudList
  • MudListItem
  • MudListSubheader
  • MudMainContent
  • MudMask
  • MudMenu
  • MudMenuItem
  • MudMessageBox
  • MudNavGroup
  • MudNavLink
  • MudNavMenu
  • MudNumericField
  • MudOverlay
  • MudPageContentNavigation
  • MudPagination
  • MudPicker
  • MudPickerContent
  • MudPickerToolbar
  • MudPopover
  • MudProgressCircular
  • MudProgressLinear
  • MudRadio
  • MudRadioGroup
  • MudRating
  • MudRatingItem
  • MudScrollToTop
  • MudSelect
  • MudSelectItem
  • MudSkeleton
  • MudSlider
  • MudSnackbarElement
  • MudSpacer
  • MudStack
  • MudSwipeArea
  • MudSwitch
  • MudTable
  • MudTableGroupRow
  • MudTablePager
  • MudTableSortLabel
  • MudTd
  • MudTFootRow
  • MudTh
  • MudTHeadRow
  • MudTr
  • MudSimpleTable
  • MudTabPanel
  • MudTabs
  • MudTextField
  • MudTimeline
  • MudTimelineItem
  • MudTimePicker
  • MudToggleGroup
  • MudToggleItem
  • MudToolBar
  • MudTooltip
  • MudTreeView
  • MudTreeViewItem
  • MudTreeViewItemToggleButton
  • MudText

Other things to think about:

  • Adding classes to relevant elements for targeted styling and testing
  • Reducing number of DOM elements

Have you seen this feature anywhere else?

❗ Search for aria-label on the MUI button page and it will return 246 results.
(Though this particular issue is for the fundamental components, not the docs)

Describe alternatives you've considered

Hardcoding labels in English. English is a good default but it's crucial to keep it open for localization.

🙏 If you want to help, please pick any of the components above or check the open accessibility issues. Leave a comment if there are better ways of doing this or if you have other accessibility concerns!
@danielchalmers danielchalmers added the enhancement New feature or request label May 7, 2024
@danielchalmers danielchalmers changed the title Accessibility: Add aria-label properties to all components Accessibility: Add aria-label properties to all components May 7, 2024
@danielchalmers danielchalmers mentioned this issue May 7, 2024
Closed
6 tasks
@danielchalmers
Copy link
Contributor Author

danielchalmers commented May 7, 2024 •
edited

@henon @ScarletKuro @mikes-gh @igotinfected

@danielchalmers danielchalmers mentioned this issue May 7, 2024
Closed
@henon henon added the epic label May 7, 2024
@ScarletKuro ScarletKuro added the help wanted Issue that can be implemented by the community label May 7, 2024
@ScarletKuro
Copy link
Member

Community help to address this is wanted.

@ScarletKuro
Copy link
Member

Should I pin this?

@ScarletKuro ScarletKuro pinned this issue May 7, 2024
@ScarletKuro
Copy link
Member

I unpinned the nullable one and pinned this instead as it's more important.

@danielchalmers
Copy link
Contributor Author

danielchalmers commented May 8, 2024 •
edited

Don't forget roles, for example:

It's used in a few places but sparingly.

@danielchalmers danielchalmers changed the title Accessibility: Add aria-label properties to all components Accessibility: Add ARIA properties to all components May 8, 2024
@danielchalmers danielchalmers mentioned this issue May 8, 2024
Closed
2 tasks
danielchalmers added a commit to danielchalmers/MudBlazor that referenced this issue May 14, 2024
@danielchalmers
MudAlert, MudButtons, MudChip: Improve accessibility
ddfbf86 
MudBlazor#8901

Alert:
- Using aria-live="assertive" so screen readers immediately announce the alert's content to users
- Add way of specifying the ARIA label for the close icon, with a default English one provided
- Change from a Toggle to a regular button to show intent

Buttons:
- Add MudBaseButton.AriaLabel and hooked it up
- Add ToggleIconButton.AriaLabel, ToggleIconButton.ToggledAriaLabel

Chip:
- Add role="button" to indicate the chip is interactive
- Add CloseIconAriaLabel - Closes MudBlazor#6278
- Add role="group" to ChipSet
@danielchalmers danielchalmers mentioned this issue May 14, 2024
Merged
7 tasks
@danielchalmers danielchalmers changed the title Accessibility: Add ARIA properties to all components Improve localization and accessibility on all components May 15, 2024
@danielchalmers danielchalmers changed the title Improve localization and accessibility on all components Improve localization and accessibility May 15, 2024
This was referenced May 17, 2024
Merged
Open
Merged
danielchalmers added a commit to danielchalmers/MudBlazor that referenced this issue May 20, 2024
@danielchalmers
MudColorPicker, MudBaseDatePicker, MudTimePicker: Add localized ARIA …
1d3c0d3 
…labels

Part of MudBlazor#8901. They still need to be checked for keyboard navigation and other accessibility opportunities.
@danielchalmers danielchalmers mentioned this issue May 20, 2024
Merged
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accessibility enhancement New feature or request epic help wanted Issue that can be implemented by the community
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@henon @danielchalmers @ScarletKuro