search

PerfectMemory / ngx-contextmenu

A context menu component for Angular
https://perfectmemory.github.io/ngx-contextmenu
MIT License
42 stars 12 forks source link

Unable to navigate to context menu through keyboard with screen reader on #28

Closed innov-richa76 closed 11 months ago

innov-richa76 commented 1 year ago

Describe the bug I have context menu at multiple buttons. When I am trying to navigate to context menu through keyboard using tab key with screen reader like NVDA, I am not able to do so. The context menu navigation with screen reader only happens when all the buttons are clicked(at the end). This issue is existing in the current repo as well. https://stackblitz.com/edit/ngx-contextmenu-example-amtp2n?file=src%2Fapp%2Fapp.component.html

To Reproduce Steps to reproduce the behavior:

  1. Take the repo of https://github.com/PerfectMemory/ ngx-contextmenu in local and Do npm install and do npm start of the repo or just visit https://stackblitz.com/edit/ngx-contextmenu-example-amtp2n?file=src%2Fapp%2Fapp.component.html
  2. Visit the application opened in the localhost or the stackblitz example link.
  3. Open screen reader(NVDA).
  4. Try the Keyboard shortcut(shift+f10) to open the context menu and press tab key or side arrow key to go to the context menu item. 5.The tab key or side arrow key doesn't do the work.

Expected behavior Navigation should happen through keyboard with screen reader on to context menu items.

Stackblitz Example Please fork this base example to see the issue.

innov-richa76 commented 1 year ago

Hi @sroucheray,

Can you please let us know if I can use some properties for achieving this result?

sroucheray commented 1 year ago

Hi @innov-richa76,

I don't have NVDA as I don't use Windows. Do you specifically need to use side arrows ? Are up and down arrows working ?

innov-richa76 commented 1 year ago

Hi @sroucheray, Thank you for getting back to me. yes, we are using side arrows to go to context menu and then up and down arrow keys for the navigation. So, the main problem here is if we use any screen reader while performing this actions, nothing works. Have you worked with any screen reader and tried the navigation at your end.

sroucheray commented 1 year ago

No never, shame on me. I would need to have a Windows machine to test NVDA. Do you know if Orca as the same problem ? https://help.gnome.org/users/orca/stable/index.html.en

innov-richa76 commented 1 year ago

Hi @sroucheray, We are using only Windows as of now. So, we might not be able to test this with Orca but in case if you try with Orca please let us know the feedback for the same and also if there is any kind of hack or alternative solution that we can try for windows system for this issue, please let us know that as well.

sroucheray commented 1 year ago

I am going on holidays for some weeks, so I will not be able to look at this for now. If you are interested in fixing the problem, you could make a PR. Otherwise, I'll try to look at it in late August or September.

innov-richa76 commented 1 year ago

Hi @sroucheray, Happy Vacation to you! Please note that we are trying few alternatives from our end and if we find any solution for it, we will let you know. We can wait until August or September for this as well.

innov-richa76 commented 1 year ago

Hi @sroucheray, Hope you are doing well. Please let us know if you have found any solution for the above issue.

Thanks.

sroucheray commented 1 year ago

Hi @innov-richa76,

Hope you are doing well too. I did not find a solution as I was not able to test on a Windows machine (I have to find one first). Could you try debugging on your side ? See when NVDA is activated, if keyboard callbacks are called https://github.com/PerfectMemory/ngx-contextmenu/blob/16e5ab6a10d9c5ab163d3fbe787b1337ce98fcf6/projects/ngx-contextmenu/src/lib/components/context-menu-content/context-menu-content.component.ts#L163 or if it is not at all ?

innov-richa76 commented 1 year ago

Hi @sroucheray, As suggested, I tried debugging with NVDA on and have observed that all the keyboard callbacks are getting called. I believe there might be some issue with the text not getting focused when we try navigating using Keyboard shortcut and that is when the NVDA is not able to dictate it.

innov-richa76 commented 1 year ago

Hi @sroucheray, Hope you are doing well. Can you please let us know what we can do for our next steps? Thanks.

sroucheray commented 1 year ago

Hi @innov-richa76,

I am working on it. I managed to setup a virtual box with windows and NVDA. I don't have a solution yet though. I will come back to you.

innov-richa76 commented 1 year ago

Sounds Great @sroucheray. Thank you for the update.

sroucheray commented 1 year ago

Hi @innov-richa76,

I tried a fix, could you test it here https://stackblitz.com/edit/ngx-contextmenu-example-bjzzqr and tell me if it fixed your problem.

BTW the stackblitz you sent in your first message uses ngx-contextmenu package (which I am not the maintainer of) instead of @perefectmemory/ngx-contextmenu (which is my fork).

innov-richa76 commented 1 year ago

Hi @sroucheray, Thank you so much for the solution. This works completely fine with NVDA. I am using tab once the menu appears to navigate between the menu options. I believe this is the recommended key for navigation or should we use arrow keys for the same.

Also, my apology for sending the ngx-contextmenu menu package. It was mistakenly done.

innov-richa76 commented 1 year ago

Hi @sroucheray,

Hope everything is working fine with above solution. If that is so, please let us know when we can expect the solution for this issue.

Thanks

sroucheray commented 1 year ago

Normally, you should not have to press tab. As soon as the menu appears, arrow key down/up should be enough to start focusing menu items.

To be frank, I am not totally satisfied with the solution. I realized using NVDA that the component is not accessible enough. The above version fixes the problem you had, but there are still issues that would require deeper changes, especially on HTML structure. One of the problem I identified is that menu items are not announced by NVDA which is useless for disabled people. I would need to release a major version for this though because it would be a breaking change, especially for styling.

I think I am going to release the current alpha as a minor version and make other changes in next major coming with next Angular major version. I also need to find some time to do that.

innov-richa76 commented 1 year ago

Hi @sroucheray, Thank you for getting back to me. As you mentioned, the menu items are not announced by NVDA which is the major problem we are facing right now. For now we will take this alpha version and will wait for next major version for complete fix.

sroucheray commented 1 year ago

Hi @innov-richa76,

I have reworked the HTML structure and ARIA attributes. Can you test it here https://stackblitz.com/edit/ngx-contextmenu-example-bjzzqr

Can you tell me if this is better in terms of accessibility in your point of view.

Note: As those are breaking changes, it will be released in next major version along with angular 17.

innov-richa76 commented 1 year ago

Hi @sroucheray, The above example works completely fine with respect to accessibility. Now, using the arrow keys, we can be able to hear the text from NVDA. The Major problem seems to be solved now.

Thanks.

sroucheray commented 11 months ago

I'll close the issue as soon as the version 17 of the library is released.

sroucheray commented 11 months ago

Angular 17 support is published https://www.npmjs.com/package/@perfectmemory/ngx-contextmenu/v/17.0.0