div role="textbox" elements are not spell checked about fin-spell HOT 5 OPEN

I think the correct selector is div[role=textbox] div in this case but it doesn't activate spell checking either. Fin Spell's code did add spellcheck="false" as it should but there's no highlighting or spell checking. The add-on probably doesn't detect the div as editable. I'll see if I can do anything but I doubt there's anything I can do when the input isn't input or textarea element.

from fin-spell.

One thing is that div won't have a value attribute and I'm using it to read the input's text. Maybe I could check if value isn't defined, then try to use textContent. I'll test this.

from fin-spell.

One thing is that div won't have a value attribute and I'm using it to read the input's text. Maybe I could check if value isn't defined, then try to use textContent. I'll test this.

It didn't work in the Element's browser client just by adding to see if textContent has a value. The text input area was changed but it was garbage. This trick might work on some other sites that don't work otherwise currently.

from fin-spell.

Hmm, OK. Is it possible to read what's between div tags? I mean: <div role="textbox">The text from here</div> or something like that?

Hmm, and actually there is the same kind of issue with the Microsoft Teams as well: The input text appears inside of the <div></div> element:
<div class="cke_wysiwyg_div cke_reset cke_enable_context_menu cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" hidefocus="true" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-multiline="true" aria-label="Start a new conversation. Type @ to mention someone." data-tid="ckeditor-newConversation" kbshort-ignore="25,26"><div>Tämä on testitekstiä</div></div>

So there are: role="textbox" and also: spellcheck="true" that can be used to determine if the element must be spell checked? And I think it should check the div elements recursively as in the Microsoft Teams there is <div> element inside that <div role="textbox> element where the input text actually goes into.

from fin-spell.

Hmm, OK. Is it possible to read what's between div tags? I mean: <div role="textbox">The text from here</div> or something like that?

Yes, you can read it with textContent attribute.

Hmm, and actually there is the same kind of issue with the Microsoft Teams as well: The input text appears inside of the <div></div> element:
<div class="cke_wysiwyg_div cke_reset cke_enable_context_menu cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" hidefocus="true" contenteditable="true" tabindex="0" spellcheck="true" role="textbox" aria-multiline="true" aria-label="Start a new conversation. Type @ to mention someone." data-tid="ckeditor-newConversation" kbshort-ignore="25,26"><div>Tämä on testitekstiä</div></div>

So there are: role="textbox" and also: spellcheck="true" that can be used to determine if the element must be spell checked?

spellcheck="true" is already used as selector by default. But yes, they can be used.

And I think it should check the div elements recursively as in the Microsoft Teams there is <div> element inside that <div role="textbox> element where the input text actually goes into.

That wouldn't be necessary in this case. You could use div[role=textbox] div selector like in the Element's case.

Sometimes they even add dynamically more elements in the div as you write. I didn't think about going through them recursively but you are right, if the div is used as a textbox, the elements it contains, will probably only contain text and can be read.

While the text can be read, other needed features might not work. There should be a selectionStart attribute in the div for suggestions, I don't think divs have it. And the highlighting code doesn't work as is, it handles only input and textarea elements. I haven't written it and I'm not that familiar with it.

It's very difficult or impossible to handle all the cases with only web APIs. There should be a webextension API for best result.

from fin-spell.