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

[acespace90]

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

Thanks

[adamduncan]

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]

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.

[adamduncan]

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]

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]

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]

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]

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