[Improvement] Improve accessibility for screen reader users

• Insomnia Version: latest, 6.4.3
• Operating System: Windows 10 1809__

Insomnia works fairly well out of the box, since most elements read correctly, but there are some things that could be improved.

All testing done with the NVDA screen reader.

Offscreen content is still visible to screen readers

There is some content that is visually hidden that still shows up for me with NVDA. After the preview pane that shows the received response, I’m seeing the following:

1. A <h2>loading</h2>, followed by a “cancel request button”
2. Some sort of find dialog that shows “No match 😦” if no matches are found. This field also keeps stealing keyboard focus periodically, making it harder to use the app.
3. Some extra information about recently received responses, e.g “The request has succeeded. 1203.000 milliseconds Read 73.4 KB Content”

Contents of editable fields can’t be read

Nothing is announced when using the arrows while moving about through editable fields such as when entering url, or when reading the received response, which looks like a problem caused by how CodeMirror uses the DOM

[zersiax]

@ajtran303 Versions of CodeMirror that aren’t the most recent v6 suffer from an accessibility issue that makes screenreaders unable to properly read the contents of the editor, which makes working with those editors to look at responses and fill in request params extremely annoying. I have no idea if CodeMirror is still even being used , but if so, that will likely mean the edit fields are still not properly readable. The only way is to copy-paste the contents out of the field and into a notepad window or similar, which is a bit of a productivity hit.

[ajtran303]

Hey @zersiax so there has been a UI update since I have last used this client. #3183 #3178

I think I have figured out how to address the issue of adding aria-expanded attributes to the drop-down components but overall I feel discouraged now since there are even more navigation problems with the app.

I’ve been searching for an accessible HTTP client that I can comfortably recommend to people to download and use and I’m not sure if I will recommend Insomnia anymore. In the meantime, I can write down instructions for how to try out my branch and navigate to the parts of the app that have drop-downs – can you test to check if the aria-expanded attribute is helping to indicate that there is a drop-down?