ngbModal after open focus on close button

[13bit]

Bug description:

When I open modal window I see focus on close button.

Demo:

stackblitz

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 6.1.9

ng-bootstrap: 3.3.0

Bootstrap: 4.0.0

[pkozlowski-opensource]

When I open modal window I see focus on close button.

Great, this is the intended behaviour! What would you expect otherwise?

[pkozlowski-opensource]

As commented, we need to move focus to within modal for accessibility reasons / proper keyboard navigation. By default we focus the first focusable element within modal, which in your case is a close button. If you want to focus another element within modal you can add the ngbAutofocus attribute to it. Check https://ng-bootstrap.github.io/#/components/modal/examples#focus for more info.

[13bit]

I think this behaviour (when we open modal and see focus on close button) added excess UI.
When I open modal I wait focus on inputs if modal with form or control button or without focus.
But When I open modal and see focus on close button looks like not good UI.

After some research I was found ngbAutofocus directive but I should all time add it to every modal.

I found selector description in focus-trap.ts

[
  'a[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])',
  'select:not([disabled])', 'textarea:not([disabled])', '[contenteditable]', '[tabindex]:not([tabindex="-1"])'
].join(', ') 

And function getFocusableBoundaryElements() All time return close button like a first element even if there is input or something else.

I think it is not correct behaviour.

[KalenGibbons]

I have to agree with @13bit. Not all modal windows should require a focused element. I have a window that provides a list of links to the user, and after upgrading from version 2.x the first link in the list is now highlighted. This does not make sense, I do not want to force the user's attention to one part of the window over another. A focused element indicates a prioritized action to the user, and this is not always desired.

It should be the developer's option to apply focus to one element or another using the ngbAutofocus attribute, it shouldn't be mandatory.

[UniQP]

I also agree that opening a modal without focusing an element should be possible.

Does focusing the modal itself solve the accessibility issues?

[benouat]

Does focusing the modal itself solve the accessibility issues?

@UniQP nope

---

But When I open modal and see focus on close button looks like not good UI.

@13bit One of the first thing that blind users need to know when landing on a modal is how to exit this modal.

---

It should be the developer's option to apply focus to one element or another using the ngbAutofocus attribute, it shouldn't be mandatory.

@KalenGibbons this is exactly what this is about. The behaviour is not mandatory at all, it's just the default one which is configurable with usage of ngbAutofocus.

[qqaimh]

显得不圆润

[canbax]

I think not focusing on any element at the beginning is more fair. I also think it is easier for both of users and developers of this library.

[justingolden21]

I think that for accessibility, the close button should be the default item focused. However, the option to change this should be available for developers.

I actually got to this thread by the opposite case: my close buttons don't focus when the modal opens. I'm on Bootstrap 4.3.1, and when a button to open a modal is clicked, that button stays focused. This is fine default behavior, however, I cannot figure out how to change it.

I currently have this event listener set in the onload function, per the docs:

$('.modal').on('shown.bs.modal', ()=> { $(this).children('.modal-dialog').children('.modal-content').children('.modal-header').children('.close').focus(); });

Edit: I should note that keeping the focus on the button that opens it works as a pseudo close button, because when it's clicked again the modal is closed. However, visually focusing the close button for accessibility would be preferred, and I'd like tab navigation to continue within the modal, if any elements have a tabindex attribute (such as buttons, links, checkboxes, etc.).

[adamcbuckley]

The Bootstrap 5 example does not auto-focus the close button https://getbootstrap.com/docs/5.1/components/modal/#live-demo

[borisBelloc]

When I open modal window I see focus on close button.

Great, this is the intended behaviour! What would you expect otherwise?

I really don't like it 😑

I think it would be better with nothing selected when I open a modal :

[maxokorokov]

Bootstrap has many a11y issues, it doesn't mean we have to reproduce them.
"The first focusable element in the modal is focused on opening" → this will stay as a default behavior for reasons mentionned above.

If you need to change this, please use the ngbAutoFocus attribute → https://ng-bootstrap.github.io/#/components/modal/examples#focus

Just put the focus wherever you need to → <div class="modal-header" ngbAutoFocus> for example.