Enabling accessibility on prosemirror

Show
1

Hi Team, I have using prosemirror for quite some time now and its really easy it use and pretty cool too.

however, there is one thing I am unable to perform over a prose mirror instance is that keyboard navigation, in order to support accessibility on my webpage.

I searched the docs, didnā€™t find any suitable info for enabling accessibility, can somebody help me out here.

Any Quick help would be really appreciated :slight_smile:

2

The core library should be accessible by default. The menu module is pretty terrible, in terms of keyboard access and screen-reader support, but easy enough to replace.

3

Hi @marijn,

thanks for replying.

I had some issues even with core library, probably i will create a demo code and post it here for better clarity

btw,what do you mean by ā€œThe menu module is pretty terrible, in terms of keyboard access and screen-reader support, but easy enough to replace.ā€?

Are you saying to replace this menu module with something else ? do you have anything in mind, that might work with prose mirror lib ?

4

The prosemirror-menu package isnā€™t part of the core, and should be taken more as an example of how a menu can work than a production-quality package. Most serious integrations display commands in a custom way.

5

Hey @marijn, i have a requirement as part of keyboard navigation that I need to exit out of the currently focussed editor when i press the key ā€œescapeā€ while the focus is inside the editor.

I have added an event handler for the keypress event to capture the ā€˜escapeā€™ key , but however I am not sure how to remove the focus from current editor, because I donā€™t see any ā€˜blur()ā€™ on EditorView instance.

handleKeyDown: (view, event) => {
            console.log('key Down event', event);
            // when escape key is pressed, move the focus away from canvas
            if (event.key === 'Escape') {
                // view.blur(); // unfortunately there is no blur() method on EditorView
            }

            return false;
        },

any quick help would be really appreciated :slight_smile:

6

You should be able to call view.dom.blur()

1 Like
7

Thanks a ton, @marijn :slight_smile:

I was searching blur() under view object just like focus(). btw, any specific reason why focus() & blur() methods are not under view object ?

8

focus() will restore the DOM selection from the state, which .dom.focus() wonā€™t do. For blur() there is no such requirement.

1 Like
9

hmmm, make sense.

@marijn Also, do you know how I can ignore certain keys from being entered into editor. eg. tab key looks irrelevant to us in our editor, so we want to ignore it altogether.

how can we prevent this key from ever being feeded to the editor?

10

If you register a DOM event handler that returns true without preventDefault-ing the event, ProseMirror will not further handle it.

That being said, you have pretty much full control over what keys are bound, so unless you bind Tab, you shouldnā€™t worry about the editor handling it.

1 Like
11

@marijn yup, I figured this out from the docs after posting this reply :smiley:

however, my next obstacle is to identify this TAB key within specific dom inside the editor, which is where I would need your expertise.

here is the new topic I have created to showcase this next issue. Get actual target dom element on edit