search

frend / frend.co

Frend — A collection of accessible, modern front-end components.
http://frend.co
MIT License
635 stars 25 forks source link

Is it possible to disable the auto focus on first element? #108

Open acespace90 opened 6 years ago

acespace90 commented 6 years ago

Is it possible to disable the auto focus on first element? It would be nice if there was an option.

Thanks

adamduncan commented 6 years ago

Hey @acespace90, thanks for the question. Which component(s) are you referring to?

In order to be properly accessible, it's often recommended that focus is shifted to the newly activated element or a child. See Modal WAI focus guidelines, for example.

If you can let me know the behaviour you're hoping for (or what you're trying to avoid), we can try to suggest some approaches.

acespace90 commented 6 years ago

Hi @adamduncan, I refer to the dialog component. I noticed that if I have a select as the first element of the modal, followed by some text, the screen reader does not interact properly with the select and continues with the reading of the text. But if I manually force the tab on select, then the screen reader reads it correctly. I hope I explained myself.

schermata 2018-02-16 alle 09 51 06
adamduncan commented 6 years ago

Interesting. What screenreader/browser combo are you using?

What elements are being used for the custom select menu? I wonder whether it might be related to that. The modal will automatically look for these focusable child elements. (The Authoring Practices modal example does a similar thing, but in a more programmatic way.)

If the select is a native select element (or has a non-negative tabindex) and it precedes any other focusable elements in the modal, then it should receive focus correctly.

acespace90 commented 6 years ago

I’m using Chrome on Mac with system screen reader. The select is 100% native and has no negative tabindex, only the external container is styled.

adamduncan commented 6 years ago

Ah, right. That's great then.

Voiceover announces the modal title and dictates all modal content before announcing the focused element. Here's an example - after the content, Voiceover will announce Option 1, Make a selection, collapsed, popup button, and finally context, You are currently on a pop up button, inside of a frame.... Are you experiencing the same with yours?

acespace90 commented 6 years ago

Mmmh, no because it reads the text after the select. It should stop when is on the select and not continue to read text? No?

ZoeBijl commented 6 years ago

@acespace90 can you provide a code example? That way we can test exactly what happens. Also note that VoiceOver doesn’t support Chrome; it may work in certain cases, but it’s not supported from within Apple.

As for the focusables, the close button should be first in that order. Alternatively you can set focus on the dialog itself.