Comment/Issue editor textareas are not accessible #389

vladimyr commented 2021年01月25日 06:33:02 +01:00

First, a background story... I'm one of many happy Grammarly users and I frankly got used to seeing that sweet green circle in the right corner below my writings. As a Github user, I also got used to using it during PR review sessions and issue report submissions so seeing it doesn't work here was kinda a bummer.

So I started digging to figure out what prevents their browser extension from working on Codeberg. Turns out that I'm writing this issue report using CodeMirror v5.12.1. I figured that out by executing the following javascript snippet in the browser console:

$('.CodeMirror')[0].CodeMirror.constructor.version

Additionally, it turns out that CodeMirror is just a sub dependency of another editor package: SimpleMDE

As suspected this is an upstream thing so I continued my exploration inside the go-gitea codebase. There I found this interesting PR: https://github.com/go-gitea/gitea/pull/13333 that replaces SimpleMDE with EasyMDE (IIRC it is a fork of SimpleMDE). Weirdly enough it ended with this issue https://github.com/go-gitea/gitea/issues/13888
So if understood everything correctly, as of writing this:

1. current version of Gitea (v1.13.0) comes with SimpleMDE & CodeMirror v5.12.1
2. upcoming version Gitea (v1.14.0) comes with EasyMDE & CodeMirror v5.58.2

Either way, it is CodeMirror v5 we are dealing with so I took another jump and went to https://codemirror.net just to realize that Grammarly doesn't work there too.

In the meantime, while playing with browser inspector on Codeberg I figured out that Grammarly actually works but behind the scenes. What I mean by that is extension attaches expected controls to <textarea/> receiving keystrokes but CodeMirror uses javascript to keep it hidden behind the editor area. OFC that has nothing to do with Codeberg and exact the same things happens on https://codemirror.net

While there I couldn't fail to notice the top banner advertising CodeMirror v6 so I went there and check. The first feature they advertise is accessibility! OFC that means no javascript shenanigans with <textarea/> but using contenteditable <div/> instead. Unsurprisingly Grammarly browser extension had no trouble finding the target element and my tools got working again. 🎉

Although I spent a great deal of this essay talking about Grammarly aside from free marketing I'm providing them with 🙃 it has nothing to do with it specifically.
Big issue here is that by using CodeMirror all accessibility features are gone! That means real trouble for people relying on assistive technologies and that's far worse than my pet peeve!

Now, I'm not even sure how to resolve this thing. 😰

1. Clearly it is not Codeberg's fault but I'm reporting it here for sake of raising awareness
2. Supplain chain goes through Gitea, Simple/EasyMDE back to the CodeMirror
3. Trying to address it by updating EasyMDE to CodeMirror v6 is probably a bad idea because it is a completely new project, still in the beta phase and it already went trough some tectonic changes 3 days ago! by switching from https://npm.im/@codemirror/next to https://npm.im/@codemirror/view

At this stage, I'm running out of ideas and starting to giving up 🤷‍♂️
Any ideas? What would be the best way forward?

---

PS Usual formatting shortcuts like Ctrl+B for bold and Ctrl+I are also broken although they do work in both Simple & EasyMDE 🤔

First, a background story... I'm one of many happy [Grammarly](https://grammarly.com) users and I frankly got used to seeing that sweet green circle in the right corner below my writings. As a Github user, I also got used to using it during PR review sessions and issue report submissions so seeing it doesn't work here was kinda a bummer. So I started digging to figure out what prevents their browser extension from working on Codeberg. Turns out that I'm writing this issue report using [CodeMirror](https://codemirror.net) `v5.12.1`. I figured that out by executing the following javascript snippet in the browser console: ```js $('.CodeMirror')[0].CodeMirror.constructor.version ``` Additionally, it turns out that CodeMirror is just a sub dependency of another editor package: [SimpleMDE](https://simplemde.com) As suspected this is an upstream thing so I continued my exploration inside the `go-gitea` codebase. There I found this interesting PR: https://github.com/go-gitea/gitea/pull/13333 that replaces SimpleMDE with [EasyMDE](https://easy-markdown-editor.tk) (IIRC it is a fork of SimpleMDE). Weirdly enough it ended with this issue https://github.com/go-gitea/gitea/issues/13888 So if understood everything correctly, as of writing this: 1. current version of Gitea (`v1.13.0`) comes with SimpleMDE & CodeMirror `v5.12.1` 2. upcoming version Gitea (`v1.14.0`) comes with EasyMDE & CodeMirror `v5.58.2` Either way, it is CodeMirror `v5` we are dealing with so I took another jump and went to https://codemirror.net just to realize that Grammarly doesn't work there too. In the meantime, while playing with browser inspector on Codeberg I figured out that Grammarly actually works but _behind the scenes._ What I mean by that is extension attaches expected controls to `<textarea/>` receiving keystrokes but CodeMirror uses javascript to keep it hidden behind the _editor_ area. OFC that has nothing to do with Codeberg and exact the same things happens on https://codemirror.net While there I couldn't fail to notice the top banner advertising CodeMirror `v6` so I went [there](https://codemirror.net/6/) and check. The first feature they advertise is accessibility! OFC that means no javascript shenanigans with `<textarea/>` but using `contenteditable` `<div/>` instead. Unsurprisingly Grammarly browser extension had no trouble finding the target element and my tools got working again. 🎉 Although I spent a great deal of this _essay_ talking about Grammarly aside from free marketing I'm providing them with 🙃 it has nothing to do with it specifically. **Big issue here is that by using CodeMirror all accessibility features are gone! That means real trouble for people relying on assistive technologies and that's far worse than my pet peeve!** Now, I'm not even sure how to resolve this thing. 😰 1. Clearly it is not Codeberg's fault but I'm reporting it here for sake of raising awareness 2. Supplain chain goes through Gitea, Simple/EasyMDE back to the CodeMirror 3. Trying to address it by updating EasyMDE to CodeMirror `v6` is probably a bad idea because it is a completely new project, still in the beta phase and it already went trough some tectonic changes 3 days ago! by switching from https://npm.im/@codemirror/next to https://npm.im/@codemirror/view At this stage, I'm running out of ideas and starting to giving up 🤷‍♂️ Any ideas? What would be the best way forward? --- **PS** Usual formatting shortcuts like <kbd>Ctrl</kbd>+<kbd>B</kbd> for bold and <kbd>Ctrl</kbd>+<kbd>I</kbd> are also broken although they do work in both Simple & EasyMDE 🤔

fnetX commented 2021年01月25日 22:20:24 +01:00

Hey there, thank you for the quite detailed research 🙃

You're right, this is a really technical thing that is to be discussed on Gitea's side. The issue about the editor has had some interesting history, they just did the SimpleMDE → EasyMDE migration because the old editor was unmaintained and contained severe issues.

About CodeMirror 6: The project is actually usable by now and libraries already switch to it. It's in beta, they say there might still be breaking changes, but those will be easy to fix. Also see https://discuss.codemirror.net/t/codemirror-6-status-update/2792

To the awareness point: Oh sh*t, I also noticed that my language checker doesn't work in the text box, but I didn't think of accessibility yet. I think there should be increased effort to get this into Gitea, the software is way too popular to not care about that, especially because everyone should care about that topic everywhere. I fear that a solution from Codeberg's side is, well, a bit too much for our resources.

I hope that the migration to EasyMDE makes this better and that they switch to CM 6 as soon as it's officially released.

Hey there, thank you for the quite detailed research 🙃 You're right, this is a really technical thing that is to be discussed on Gitea's side. The issue about the editor has had some interesting history, they just did the SimpleMDE → EasyMDE migration because the old editor was unmaintained and contained severe issues. About CodeMirror 6: The project is actually usable by now and libraries already switch to it. It's in beta, they say there might still be breaking changes, but those will be easy to fix. Also see https://discuss.codemirror.net/t/codemirror-6-status-update/2792 To the awareness point: Oh sh\*t, I also noticed that my language checker doesn't work in the text box, but I didn't think of accessibility yet. I think there should be increased effort to get this into Gitea, the software is way too popular to not care about that, especially because everyone should care about that topic everywhere. I fear that a solution from Codeberg's side is, well, a bit too much for our resources. I hope that the migration to EasyMDE makes this better and that they switch to CM 6 as soon as it's officially released.

vladimyr commented 2021年01月26日 02:01:21 +01:00

You are welcome. 😃

About CodeMirror 6: The project is actually usable by now and libraries already switch to it. It's in beta, they say there might still be breaking changes, but those will be easy to fix. Also see https://discuss.codemirror.net/t/codemirror-6-status-update/2792

Thank you for the pointers. Reading through the discussion it seems that it is actually a good moment for conducting a quick EasyMDE on CodeMirror 6 experiment 🧑‍🔬

I hope that the migration to EasyMDE makes this better and that they switch to CM 6 as soon as it's officially released.

Me too 🤞

You are welcome. 😃 >About CodeMirror 6: The project is actually usable by now and libraries already switch to it. It's in beta, they say there might still be breaking changes, but those will be easy to fix. Also see https://discuss.codemirror.net/t/codemirror-6-status-update/2792 Thank you for the pointers. Reading through the discussion it seems that it is actually a good moment for conducting a quick EasyMDE on CodeMirror 6 experiment 🧑‍🔬 >I hope that the migration to EasyMDE makes this better and that they switch to CM 6 as soon as it's officially released. Me too 🤞

fnetX commented 2021年05月12日 17:12:45 +02:00

EasyMDE is about to be replaced with textarea https://github.com/go-gitea/gitea/pull/15394 & https://github.com/go-gitea/gitea/issues/10729

This might be a big improvement in accessibility already, but we should double-check this.

EasyMDE is about to switch to CodeMirror 6 later (https://github.com/Ionaru/easy-markdown-editor/issues/324), but I assume this won't be necessary then?

@vladimyr do you have an opinion on this? Can you estimate if there are other regions of Codeberg where accessibility is a big problem?

EasyMDE is about to be replaced with textarea https://github.com/go-gitea/gitea/pull/15394 & https://github.com/go-gitea/gitea/issues/10729 This might be a big improvement in accessibility already, but we should double-check this. EasyMDE is about to switch to CodeMirror 6 later (https://github.com/Ionaru/easy-markdown-editor/issues/324), but I assume this won't be necessary then? @vladimyr do you have an opinion on this? Can you estimate if there are other regions of Codeberg where accessibility is a big problem?

fnetX commented 2021年12月05日 16:07:10 +01:00

That's a spam comment. (removed)

That's a spam comment. (removed)

idnoi9 commented 2023年01月25日 00:49:33 +01:00

firefox related seems to be fixed, thanks for that. (working for me)

@vladimyr thanks Columbus for the huge effort you put into investigating the source of the issue.

#909

apparently it does not work for safari currently...

dam web standards and browsers

firefox related seems to be fixed, thanks for that. (working for me) @vladimyr thanks Columbus for the huge effort you put into investigating the source of the issue. https://codeberg.org/Codeberg/Community/issues/909 apparently it does not work for safari currently... dam web standards and browsers

wxiaoguang commented 2023年08月24日 15:58:10 +02:00

It should have been fixed by using native textarea

It should have been fixed by using native textarea

n0toose commented 2023年08月24日 16:12:39 +02:00

It should have been fixed by using native textarea

Yep, that's right, thanks!

> It should have been fixed by using native textarea Yep, that's right, thanks!