GraphiQL not screen-reader friendly

[francipvb]

Dear developers,

I'm writing this issue because I am a blind developer. So I have to run a screen reader to use my computer.

I've found GraphQL very useful for my development and I want to play with it. Unfortunately, I cann't use the GraphQL IDE (GraphiQL) with my screen reader. When I navigate with the keyboard, NVDA doesn't read anything from the text boxes.

I've read in the RADME that you're integrating the monaco editor and if you want some testing from my perspective I can help you a bit.

Do you know about some alternatives to the actual IDE? Is there a VSCode extension or something similar to replace the GraphiQL browser-based IDE?

Cheers,

[acao]

hello @francipvb ! would love to do whatever we can to help improve the GraphQL developer experience for folks using screen readers.

we implemented as much as we could at the time without being able to change CodeMirror itself, though there may be improvements that we can add to that for now. since a major effort was completed there have been several follow on PRs

from what i understand, monaco editor has better native screen reader accessibility, correct?

here is a demo of our monaco-graphql:
https://monaco-graphql.netlify.app/

there are other tools such as altair, apollo studio, insomnia, even postman that may have improved screen reader support

[francipvb]

hello @francipvb ! would love to do whatever we can to help improve the GraphQL developer experience for folks using screen readers.

And we'll thank you so much. Personally I think that back-end development is the best field of professional programming we can work on. These tools help us a lot!

we implemented as much as we could at the time without being able to change CodeMirror itself, though there may be improvements that we can add to that for now. since a major effort was completed there have been several follow on PRs

from what i understand, monaco editor has better native screen reader accessibility, correct?

You're right. I use VSCode as my primary development tool without any problem. I don't know if there's another javascript rich text editor with it's screen reader support.

here is a demo of our monaco-graphql:
https://monaco-graphql.netlify.app/

I've tested it and it works perfect for me. I can read the entire query and the variables editor, run the query and see results without any problem.

there are other tools such as altair, apollo studio, insomnia, even postman that may have improved screen reader support

I've tested postman and insomnia but these two tools aren't screen-reader friendly. I have to test the two remaining.

Thanks again!

Cheers,

[acao]

@francipvb thank you so much for giving this feedback, it is so important to have. I think this is enough reason to move forward with 2.x without a plugin API, because adopting monaco-editor will be essential for accessibility. GraphiQL is the official IDE reference implementation tool for GraphQL, so everyone should be able to use it!

[francipvb]

Hello,

Can I build my own monaco-based browser client?

[acao]

yes! the source for the demo above is available here:

https://github.com/graphql/graphiql/blob/main/examples/monaco-graphql-webpack/src/index.ts

you can use any number of libraries and/or compile to plain javascript like in the demo

[acao]

a more advanced example, using react, is available here:
https://github.com/graphql/graphiql/tree/main/packages/graphiql-2-rfc-context

this repo i just tweaked because of a wordpress bug, and now it still builds a 2.x partial rewrite using monaco

[francipvb]

Hi,

I am still interested in this issue. Are there any news on this?

Thanks,

[acao]

there have been too many legacy issues to have time to work on the monaco mode, unfortunately. haven't had anyone show interest in helping with it yet either. i will let you know more as it advances!