Bug: Text cursor indicator not following cursor

[a11yHolli]

OS: Windows 10 Browser: Chrome 88 AT: NVDA 2020.4, Text Cursor indicator

I have text cursor indicator turned on in windows and I noticed the indicator was not following the cursor when using up and down arrows to navigate between two paragraphs.

To turn on text cursor indicator:

• Hit Windows Key
• Type accessibility
• Open the ease of access center
• Navigate to "text cursor"
• select the switch to "Turn on text cursor indicator"
• adjust settings to make it easily to see, I attached a screenshot of mine

Test Steps Write two paragraphs Use the up arrow to navigate to the space between both paragraphs

Expected Results The cursor indicator should follow the cursor

Actual Results the cursor indicator stays in place and the cursor moves to the space between the paragraphs

Notes

• hitting the up arrow a second time will rejoin the cursor with the cursor indicator
• I noticed this is also an issue in github's text editor so it may be browser or OS related.

Screenshot I couldn't find a way to actually screenshot the cursor so the red line shows where the cursor was when I took the screenshot.

[trueadm]

Thanks for reporting this :)

our if curiosity, does this happen on FB with Draft? Also does it happen on other editors like Gmail or Quip?

I wonder if this is an OS bug (maybe it works better with Edge?).

[a11yHolli]

@trueadm I use the text cursor indicator all the time and I have never noticed this before. It's really obvious when it happens because you aren't sure where your typing will happen. But I will check in a few other places and see if I can make it happen.

[a11yHolli]

@trueadm Quick tests

• Facebook : no
• Quip : no
• Gmail : yes
• Google Docs : doesn't actually show my cursor indicator

[trueadm]

So I just tried on the Outline Playground on Github (the one you run locally) on my personal Windows machine. The text cursor seems to appear and work correctly. I'll see if I can get my Windows laptop working and see if it's maybe related to the CSS on the Outline Playground on intern.

[yangshun]

I'll see if I can get my Windows laptop working and see if it's maybe related to the CSS on the Outline Playground on intern.

I use Windows as a work laptop and can't repro this issue on the Outline Playground on intern.

https://user-images.githubusercontent.com/1315101/110050596-351fbd80-7d8f-11eb-9993-23b3e7e90391.mp4

P.S. The indicator isn't captured in the video but it matches the cursor position.

[trueadm]

I can repro in plain text mode, but this doesn't happen in rich text mode. I also have to be at the end of the text (cursor at the end) for it to happen to.

[yangshun]

Right, I can reproduce in plain text mode too.

[trueadm]

My hunch is that this is because we use \n character rather than <br>.

[trueadm]

I think the simplest and probably most logical solution here is to come up with a LinkBreakNode that extends TextNode. Its value would be \n so text content continues to work properly, with the exception of having a custom createDOM that renders a br element. Thoughts on that @yangshun?

[yangshun]

Sounds reasonable but I wouldn't say I know enough about Outline to be sure. I'm not exactly sure why we need Outline for plaintext mode though. Wouldn't a <textarea> do the same?

[trueadm]

@yangshun its not really full plain text. It still has custom emojis, mentions, text delights, hashtags etc

[yangshun]

Thanks that's helpful :)

[trueadm]

Fixed in https://github.com/facebookexternal/Outline/pull/160.

[a11yHolli]

@trueadm I found another example of this while testing emojii. Is this separate? should I open a separate issue for it?

https://user-images.githubusercontent.com/78975337/110149997-b6d21400-7dac-11eb-9622-dbdba218ad34.mp4

[trueadm]

@a11yHolli Yeah it looks related. A fix for that has gone up, it should be live in the next few hours. Let's see if that fixes this problem.