NVDA reads "blank" when line is a single custom node with no other content

ProseMirror / prosemirror

The ProseMirror WYSIWYM editor

http://prosemirror.net/

MIT License

7.53k stars 334 forks source link

NVDA reads "blank" when line is a single custom node with no other content #1428

Closed krmayer closed 8 months ago

krmayer commented 8 months ago

Hello!

We are trying remediate an a11y issue where a custom node does not properly announce if it is the only content on a line.

Possible workarounds:

Adding a space (or any content anywhere on the line) in PM fixes the issue (see video below)
contenteditable="true" fixes the issue, but introduces a host of other issues. We don't expect our users to be able to change the content of these custom nodes directly.

Our dependencies:

  prosemirror-model: 1.19.3
  prosemirror-state: 1.4.3
  prosemirror-view: 1.32.2

This repros in Dinos in the document:

video

Note the "blank" that reads out unless I insert content next to the dino.

NVDA settings we use for compliance testing:

marijnh commented 8 months ago

Does adding an alt or aria-label attribute help? The fact that the problem goes away when there is any text makes this sound like an NVDA bug. Finding workarounds for those can be tricky. Sometimes a user-select: text style can also affect stuff like this.

krmayer commented 8 months ago

Thanks for getting back to me so quickly. It's definitely possible that this is an NVDA issue!

No success so far. For reference, I tried:

alt / arial-label attributes
"user-select: text" style applied to every and all components in the hierarchy for this node

One workaround I am exploring:

Detect the nodes in question using cursor position / pm-view state
Silence pm NVDA announcements entirely until another pm action occurs
Read relevant details using a separate announce region

A bit hacky but maybe the best we can do here.

marijnh commented 8 months ago

I've spent some more time trying to find a workaround for this, but didn't find any that actually helped, except making the node editable (adding a contenteditable=true attribute), which, for most types of node representation, would be a terrible idea, since it allows the user to move their cursor into it and start typing.

I did confirm that Firefox doesn't have this problem, so I am pretty confident that it is a bug in Chrome's (and thus Edge's) accessibility tree implementation, not an NVDA issue.

In any case, I'm afraid this isn't something that can be fixed on the side of ProseMirror, so I'm going to close this issue.