Make hidden contenteditable also hidden for screenreaders

[jmuheim]

I added tabindex="-1" and aria-hidden="true" to make screenreaders ignore the hidden contenteditable.

Output before (in "browse mode"): blank. Output before (in "focus mode"): section editable. blank.

Both outputs are gone with the 2 attributes above.

Tested with NVDA screenreader.

Still, there is a nasty output after pasting a screenshot: section editable. blank. I guess it's because the element receives focus by JavaScript when pasting. I tried adding .attr 'aria-label', 'screenshot pasted' but the result isn't much better: screenshot pasted. section editable. blank.. Maybe there is a way to "do the magic stuff" without setting the focus on the contenteditable div?

Anyways, great work, very useful! :+1:

[layerssss]

@jmuheim thanks! there is no way to do without setting the focus on [contenteditable] since some hacks are based on it, but we can try to exit the focus status (previous focused element or no focus at all) after we got the image data, i ll try it :+1:

[jmuheim]

Great, thank you! :smiley:

[jmuheim]

I think you haven't put this online for the demo yet...

http://micy.in/paste.js/

[layerssss]

sorry, buddy, it'll be there in a minute

[jmuheim]

And I just noticed that the div in your example can be focused using the tab key, but you don't have any tabindex on it. How do you do that?

[jmuheim]

...because when I try your script in a website of mine, I can only give focus using the mouse clicking on the element, and not using tab.

[layerssss]

because there is a contenteditable attributes on that div, then the browser made it available for the tab key :)

[jmuheim]

But on the first div there's no contenteditable!?

But still it is in the tab sequence...

[layerssss]

oh yes, for the first div (non-inputable), how the paste event works is actually insert a hidden div[contenteditable] in advance, so when everyou click on the visible div, the hidden one actually got focused, what you see on the visible one is just a styling (adding css class pastable-focuse), when you press tab again, the hidden div got de-focused, and the next focusable item got focused.

if you started with pressing a tab key, the hidden div just got focused directly (because it is a [contenteditable]), and causing the same effect

[jmuheim]

This somehow didn't work for me. But it's ok, I'm using it on a textarea anyway.

Thanks for explaining!

[layerssss]

no worry, buddy