Open wapsi opened 3 years ago
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.
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.
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.
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.
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.
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