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!

[francipvb]

Hello,

Now that I have some experience with react and Node.JS in general, I want to contribute with this issue in particular.

Is #2122 the reference for this? Thank you.

[acao]

@francipvb yes that's the roadmap though I'm not sure if folks are keeping it updated. 2.0.0 is going out with the redesign but still codemirror 5. Once we can upgrade to codemirror 6 and/or switch to monaco-graphql in 3.0.0 we will be able to support.

@thomasheyenbrock is able to work on the redesign for his job at stellate, however monaco-graphql implementation was something I offered to do but haven't had time to get to with everything else I've been working on in the repo, though @jonathanawesome has already implemented both it and the re-design in a POC, y'all should join forces!

https://jonathanawesome.github.io/graphiql-v2-prototype/?mode=preview&story=reference--reference

[thomasheyenbrock]

Hi @francipvb 👋 when planning the path ahead recently, Tim and me we were looking more at #2328. @acao we should go through #2122 in one of our next triaging sessions and see how we can clean that up a bit, there's probably quite some duplication.

[acao]

Indeed, or why not just close #2122 and unpin it since you've created a new roadmap? We've changed direction a bit so I understand.

[jonathanawesome]

Hello @francipvb 👋! As @acao mentioned, I've been working on a prototype of the new GraphiQL design. The primary goal of the prototype is to test and validate the new GUI query builder, but so much work had been completed on monaco-graphql that I went ahead and implemented that as well. Your insight and contribution would be very welcome!

Join us on the #graphiql-development Discord channel to discuss.

[francipvb]

Hello @jonathanawesome,

I've been testing your deployment on github pages.

It works great for me. There are some things to do, but the main required functionality is working, at least for me.

Regarding accessibility, there can be added an aria-live to the results area to notify screen readers when new results come on.

I will clone your repo to look at it. I'm so interested in this.

[acao]

That's so awesome to hear! monaco editor takes accessibility really really seriously and I love it. This is one of the main reasons I have persistently called for adopting monaco-editor and created monaco-graphql!

here is a useful a11y guide for us as implementers, and then this guide is useful for screen-reader users themselves. also, this gitter is a good place to provide a11y feedback & ask questions of the monaco/vscode team themselves!