Accessibility Issue need Help on Add User Modal Window using Angular 2

Issue 1:  Focus is going out of the modal window while it is still open. 

I have a Add user Model window, when I use tab key by running screen reader, tab foocus is going our of the model popup

AddUser model window.JPG

Browser:**  **IE 11

Operating System:**  **Windows 10

Screen Reader Version:  Jaws 18

UI : angular2

Issue 2:  Add User Modal Window: Screen reader is reading about all the elements in the modal window when the focus is on the “Close” button.

  1. When the focus is on “Add User” button, press Enter.

  2. Observe that a popup appears.

  3. Using tab key, navigate until focus goes to the “Close” button in the modal window.

  4. Observe what the screen reader reads.

When the focus is on the “Close” button screen reader reads about all the elements in the modal window as shown in the screenshot.

Browser:**  **IE 11

Operating System:**  **Windows 10

Screen Reader Version:  Jaws 18

UI  : angular2

Issue3:  Screen reader does not announce anything when the error messages appear as shown in the screenshot.

 Screen reader users will face difficulty if they are not notified of the error messages. 

MAS Standard Fa** iled : 3.3.1 - Error Identification**

Add User" button, press Enter.

  1. Observe that a popup appears.

  2. Using tab key, navigate through the modal window.

  3. Observe that there are error messages associated to each form field.

Error:  Screen reader does not announce anything when the error messages appear as shown in the screenshot.

Browser:**  **IE 11

Operating System:**  **Windows 10

Screen Reader Version:  Jaws 18

Issue 4:  Error messages should not appear until the focus leaves the form field.

  1. “Add User” button, press Enter.

  2. Observe that a popup appears.

  3. Using tab key, navigate through the modal window.

  4. When the focus is on the “close” button of the popup, press tab.

  5. When the focus is on the “First Name” textbox,  observe that there is an error message appearing.

  6. Issue also exists for “Last Name” and “Email” textboxes.

Error:  As soon as the form fields receive focus, the error messages are getting invoked as shown in the screenshot.

Hi @ravindranathsaib,

As it looks like your post is relating to a project that you are working on and not GitHub itself, this post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our Community organized so users can more easily find information.

As you’ll notice, your Topic is now in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

If I am incorrect and you desire to submit an accessability report to GitHub, you will want to contact GitHub Support directly.

Let me know if you have any other questions or if I can help with anything else.

Cheers!