Hacker News Reader

Comment by progval | Hacker News Reader

They probably reimplement entirely from scratch by getting the position of the mouse and listening to click events.

Meaning they're creating text dynamically with the click event? I'd assume that'd be chicken-and-egg where the browser wouldn't respond to the click event if there's no text to select?

No, I mean they would draw the selection themselves on the canvas. And they would get the event simply because the user clicked on the canvas.

But that's not happening, as I'm able to select text on iOS Safari and have it give me the copy/paste options above it. If the text wasn't available, it would also completely break any kind of screen reader / accessibility feature so something has to be supporting this at a native-browser level.

I don't know about iOS, but on Firefox Desktop, the right-click menu is emulated by the canvas, and it uses the clipboard API to copy it.

> If the text wasn't available, it would also completely break any kind of screen reader / accessibility feature so something has to be supporting this at a native-browser level.

When using a screen reader, it tells you you press Ctrl+Alt+Z, which loads an iframe containing (only?!) the first paragraph of the text, so it is made available to screen readers independently.

I have no idea if this would work for editing though.

It looks like on Safari on macOS they also hijack right-click menu, but text selection works such that I can go to Edit>Copy and it works.

What tells you to press Ctrl+Alt+Z? That's not a great experience for you to interactively edit a document if you have accessibility needs.

> What tells you to press Ctrl+Alt+Z?

Invisible text inserted in the DOM with Javascript (forgive the French, it ignores browser settings and seems to use geolocation):

    <div id="docs-aria-speakable" class="docs-offscreen-z-index" aria-live="assertive" role="region" aria-atomic="true" aria-hidden="false">Pour activer la compatibilité avec le lecteur d'écran, appuyez sur Ctrl+Alt+Z&nbsp;Pour connaître les raccourcis&nbsp;clavier, appuyez sur&nbsp;Ctrl+barre oblique</div>

Wonder what happens in a mobile device context, where you can't execute such a shortcut.

But that's interesting, especially the class="docs-offscreen-z-index". This to me suggests that they do have shadow elements underneath the canvas to support various functionality.

Thanks for the find!

And this is not new, they already do that with the current dom renderer. One div for each wrapped line of text, divs for selection, cursor is a CSS animated div, etc

Reply on news.ycombinator.com