frend.co icon indicating copy to clipboard operation
frend.co copied to clipboard

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

Open acespace90 opened this issue 8 years ago • 7 comments

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

Thanks

acespace90 avatar Feb 15 '18 16:02 acespace90

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.

adamduncan avatar Feb 15 '18 19:02 adamduncan

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

acespace90 avatar Feb 16 '18 08:02 acespace90

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.

adamduncan avatar Feb 17 '18 10:02 adamduncan

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.

acespace90 avatar Feb 17 '18 11:02 acespace90

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?

adamduncan avatar Feb 17 '18 12:02 adamduncan

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?

acespace90 avatar Feb 17 '18 16:02 acespace90

@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.

ZoeBijl avatar Feb 20 '18 10:02 ZoeBijl