Getting keyboard focus on modal once open without JavaScript

Question

Once I click on a button on the main page a modal opens up with a list of items for the user to select from. The content within my modal is not getting focus when the modal is opened instead when I press tab - I see it tabbing through the rest of the items on the homepage (background) before actually getting into the modal.

How can I get my modal content to get focus once open rather than having to tab through the main page before reaching the modal?

Here is my code for the modal:

<div role="dialog" aria-modal="true" class="modal">
    <div class="modal-dialog override">
        <div class="modal-content">
            <div class="section">
                <header class="section-header">
                    <button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
                </header>
                <div class="section-body">
                    <ng-content select=".modal-body"></ng-content>
                </div>
            </div>
        </div>
    </div>
</div>

This is my method for opening the modal:

 public open() {
        this.modal.open();
        this.myService.getUsers()
            .subscribe((data: ClassRoster[]) => {
                this.classData = data;
            });
    }

score 2 · Answer 1 · answered Oct 22 '17 at 07:50

2

You can use the autofocus attribute

answered Oct 22 '17 at 07:50

I tried adding autofocus to my outermost div but i am still not getting focus on it when the modal opens - i still have to tab through the rest of the page before reaching modal content. – bluePearl Oct 22 '17 at 07:56

score 2 · Answer 2 · answered Oct 22 '17 at 09:21

The autofocus attribute is a boolean attribute. When present, it specifies that an element should automatically get focus when the page loads.

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

The issue that i am facing with this is i have refresh the page after each use to use it again after initial load — bluePearl, Oct 22 '17 at 20:08

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Without JavaScript

Give your button the autofocus attribute:

<div role="dialog" aria-modal="true" class="modal">
    <div class="modal-dialog override">
        <div class="modal-content">
            <div class="section">
                <header class="section-header">
                    <button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
                </header>
                <div class="section-body">
                    <ng-content select=".modal-body"></ng-content>
                </div>
            </div>
        </div>
    </div>
</div>

The reason that you have to do it to the button and cannot apply it straight to the div because autofocus only works on input, textarea, select and button. It's not ideal, but it works.

With JavaScript

Make your modal opening function like this:

 public open() {
        this.modal.open();
        document.querySelector('.modal').focus();
        this.myService.getUsers()
            .subscribe((data: ClassRoster[]) => {
                this.classData = data;
            });
    }

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 22 '17 at 08:03

Ethan

3,410
1
28
49

I got it to work based on your suggestion but i noticed that when i open the dialog the focus goes to the closing button and if i was to close the dialog and open it again i don't get the focus on the button anymore... why is that? – bluePearl Oct 22 '17 at 08:11
@bluePearl It is because the button has already been autofocused on, and cannot be re-focused automatically without JavaScript. – Ethan Oct 22 '17 at 08:16
and if i where to add javascript how much of an impact/code would it be? I have included my modal open method in my post. – bluePearl Oct 22 '17 at 08:18
adding this line i get an error message stating: Property `.getQuerySelector` does not exist on type `Document`. Did you mean `querySelectorAll()` When i tried using querySelectorAll i then get `focus()` underlined as an error stating: `Property focus does not exist on type NodeListOf` – bluePearl Oct 22 '17 at 08:41
@bluePearl Sorry, I made a mistake - I've updated the answer, it should work now. – Ethan Oct 22 '17 at 08:46
Also don't forget to upvote if you like the answer :) – Ethan Oct 22 '17 at 08:49
now i get an underlined error for `focus()` stating: Propery focus does not exist on type Element. – bluePearl Oct 22 '17 at 08:49
Is the function in JavaScript running on the page? – Ethan Oct 22 '17 at 08:54
This is when i compile the code that i am seeing this error. As for what i am using i am using TypeScript – bluePearl Oct 22 '17 at 08:55
Compile or run in the browser? Maybe the compiler just doesn't like it for some reason. It should work according to [this](https://stackoverflow.com/a/31728939/5374560) – Ethan Oct 22 '17 at 09:06

Getting keyboard focus on modal once open without JavaScript

3 Answers3

Without JavaScript

With JavaScript