search

OData / odataorg.github.io

Staging site and collaboration repository for http://www.odata.org
MIT License
63 stars 101 forks source link

Allow response code in popup modals to be tabbed and scrolled via keyboard #216

Closed habbes closed 4 years ago

habbes commented 4 years ago

Original Issue:

Repro steps:

1)Hit the URL "https://www.odata.org/" to open Odata website​ 2)Tab till 'Developers' link and press enter​ 3)Tab till 'Getting Started' option and press enter​ 4)Tab till 'Understand OData in 6 steps' link and press enter​ 5)Tab till 'View the response' button and press enter​ 6)Verify we are able to view the content present in the response popup using keyboard arrow keys or not​ ​

Actual Result: ​​​

Unable to view the content present in the response popup using keyboard​ ​

Expected Result:​

Users should be able to view the content present in the response popup using keyboard​ ​

​User Impact: ​​

Keyboard users will face problems if they are unable to view any content​ using keyboard

Actually, using the keyboard and following the repro steps, you would be able to view the response content. However, if the content does not fit the dialog, you can tab to it or scroll it.

I've added a tabindex=0 to the .modal-body that contains the response content in each dialog on the page so that you can tab to it using the keyboard, then you can scroll down/up using arrow keys to view the entire response content.

The reason I set the tabindex using JS instead of just adding the attribute directly via html is because when I used html, it messed up the css of the modal, removing the margins or padding of the modal body for some reason.

habbes commented 4 years ago

I've added the tabindex to the pre elements inside the modal body, this allows the narrator to read the text inside the modal-body when the user presses the arrow keys. If the narrator is not running, then the arrow keys simply scroll the modal-body. This seems to work well and Chrome and Firefox. However, in Edge, the scrolling works but the narrator does not read the content.

I've tried adding the tabindex to the pre elements, and even to the code inside the pre, but still did not work under Edge. I also tried to add aria-labels to all the span elements inside the code element, but still the Narrator does not read the content under Edge. So it seems to be an issue with edge. Any suggestions?

habbes commented 4 years ago

Adding a tabindex and aria-label to the span elements inside code does get the Narrator to read in IE when you use tab to navigate the elements. However this has the side-effect that you have tab through each word in the response content before you can exit the modal-body. I believe this is a bad experience for people using keyword with or without narrator.

habbes commented 4 years ago

I've resorted to the following hack/workaround that seems to get the screen reader to read the response content in the model dialog even under Edge:

So I've gone with a less egregious hack. I've extracted the code from the syntax highlighter portion and injected a new p element with sr-only class so that it's only accessible when using a screen reader, and I've set its text to be the extracted code text

It works on edge and the other browsers. On Chrome it has the effect of reading the response twice, once when it hits the injected `p.sr-only` paragraph, and next when you navigate to the original syntax highlighted response body using arrow keys.