5

I am working with accessible the website using keyboard and while tab press, Dynamic div(with ngIf)conditions is not working as expected.

I do have dynamic element with conditions to display one or other, when i focus on particular div element and click on button to go different element my focus is getting lost.

I have tried with providing the tab index with orders but not found any luck.

   

<!-- begin snippet: js hide: false console: true babel: false -->
a.p. patel
  • 103
  • 4
  • 25

1 Answers1

3

The main issue the template which is being applied dynamically. You are trying to access the element which is not yet generated by angular.

In other words we cannot access the element which is not yet generated.

So I have removed the ng-template and applied the [hidden] attribute.

Working copy is available here - https://stackblitz.com/edit/angular-s8gvp9

Sunil Singh
  • 11,001
  • 2
  • 27
  • 48
  • 1
    If you have a solution, please post the details in your answer of what you changed. – slugolicious Oct 11 '18 at 17:09
  • I have tried to use the one you provided, the focus of button is still losing for same.. i have added one more div to check focus please see updated question – a.p. patel Oct 11 '18 at 17:28
  • 1
    Answer is updated and working copy is available here https://stackblitz.com/edit/angular-s8gvp9 – Sunil Singh Oct 11 '18 at 18:08