search

MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
8.13k stars 1.28k forks source link

MudFIleUpload Accessibility Issues #9668

Open fevans-tamus opened 2 months ago

fevans-tamus commented 2 months ago

Feature request type

Enhance component

Component name

MudFileUpload

Is your feature request related to a problem?

We've experienced problems with keyboard navigation and visually showing the tabbed item. The problem was the actual control that you can tab to has opacity 0. If you turn the opacity to 1 then you basically reveal the standard FIlePicker and its text rather than utilize the MudFileUpload and its ability to have a somewhat custom look and feel.

Describe the solution you'd like

We would like the component to support keyboard navigation. When the component is selected it should be easily visible by some form of focused highlighting.

Have you seen this feature anywhere else?

No response

Describe alternatives you've considered

We had to get around it by having a div wrapped around it that adds a border when there was focus within it.

Pull Request

Code of Conduct

danielchalmers commented 2 months ago

What do you think, @igotinfected ?

igotinfected commented 2 months ago

@fevans-tamus

The internal HTML input is hidden, so cannot be tabbed to by default (because it should only be used internally). The control to trigger your file picker is whatever you put in your ActivatorContent, so you can adjust focus style for that control like so: https://try.mudblazor.com/snippet/GOQIYCmbPNzBCwUM

MudButtons already have standard focus/hover styling, I just added the focus classes in the snippet to make it more obvious.

Tabbing to those buttons and pressing space should trigger the file picker with v7, but didn't work with v6 afaik.

igotinfected commented 1 month ago

@fevans-tamus can you recheck based on my previous comment and drop a comment if all is good?