CODEWITHSUNDEEP
javascriptangularfocusaccessibility
bunny
bunny

Reputation: 2037

focus does not change after new component load angular

I am trying to fix an accessibility bug for screen reader in an Angular2 web application. In Chrome, when componentA(code under Before) gets loaded, the focus is the whole browser window and screen reader narrator announces the title of the componentA's page. However, in Edge, the focus stays the same as previous page which results in the title is not announced. The goal is no matter in which browser, the title should be announced once and only once.

I tried the solution by modifying componentA.html (code under After) and set focus to componentA-id in ngOnInit(). i.e.:

document.getElementById('componentA-id').focus();

Now in Edge, the narrator can correctly foucus on the whole componentA and announce the title of componentA. However in Chrome, the whole window is focused and the componentA is also focused, which results in the title is annouced twice. Is there any way I can disable the Chrome focus or is there any other ways to solve this problem to achive my goal?

Before: componentA.html 

<div>
    <div title="ComponentA Title" role="banner">ComponentA Title</div>        
    ...
    ...
</div>

After: componentA.html 

<div aria-label="ComponentA Title" id="componentA-id" tabindex="-1">
    <div title="ComponentA Title">ComponentA Title</div>        
    ...
    ...
</div>

Upvotes: 1

Views: 1556

Answers (1)

slugolicious
slugolicious

Reputation: 17563

Do you have a single page app? You said:

"...the focus stays the same as previous page"

which makes me think you're loading new content into the current page, such as a single page app.

If you are updating the page title (which is a good thing to do for screen readers for single page apps), the new page title will not necessarily be announced because the screen reader doesn't know you updated some of the contents of the page. If the page were reloaded, the title would be read.

To get the page title read, you'd need to update an element that has aria-live set to "polite". The element can be visually hidden so that only screen readers know about it.

<div class="sr-only" aria-live="polite"></div>

(See What is sr-only in Bootstrap 3? for info on the "sr-only" class)

When you update your page, insert the page title text into the <div> so it looks like:

<div class="sr-only" aria-live="polite">ComponentA Title</div>

The screen reader will read the new text and you won't have to move your focus to it.

Upvotes: 1

Related Questions