div role="textbox" elements are not spell checked

[wapsi]

I noticed that Element (Matrix client) does use <div role="textbox"> elements with its input text fields:
<div class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar" tabindex="0" aria-label="Send a message…" role="textbox" aria-multiline="true" aria-autocomplete="both" aria-haspopup="listbox" aria-expanded="false" dir="auto" spellcheck="true" style="" contenteditable="true"><div>Input text comes here</div></div>

And even I try to put:
div[role=textbox]
In "Spellchecked Elements" inside the Fin Spell settings it won't perform spell checking for those elements. It correctly disables the Firefox spell checking functionality for those elements when I turn the Fin Spell ON but it does not perform the Finnish (Voikko) spell checking against those fields.

More information about those div type="textbox" elements can be found from here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role

[fluks]

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.

[fluks]

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.

[fluks]

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.

[wapsi]

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.

[fluks]

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.