Safari: Editor component is not getting focus when there is a placeholder text

[hb250131]

Description
On safari browser we are unable to focus editor component using keyboard tabbing which is not accessible by screen reader users. Issue doesn't exist when editor has content or an editor without a placeholder text.

Steps

1. Open a page with an empty Plate Editor with "Placeholder" text
2. Use keyboard tabbing to focus the editor text box

Sandbox

Expectation
Keyboard / Screen reader users should be able to focus the editor text box by using tabbing.

Environment
Tested with
"@udecode/plate-headless": "20.5.1",
"slate": "0.91.4",
"slate-history": "0.86.0",
"slate-hyperscript": "0.77.0",
"slate-react": "0.92.0"

Notes:
When I set the below styles, it seems to be working on Safari but Chrome is having issues with same styles

'span[data-slate-placeholder="true"]': {
        WebkitUserModify: 'inherit' or 'read-write'
      }

also removing contentEditable attribute from span[data-slate-placeholder="true"] seems to be working ok on Safari but not on Chrome though.

I'm sure some of you know better fix for this.

Thanks in advance!

[12joan]

@hb250131 Thanks for reporting this issue; I hadn't noticed it until now.

Do you have any idea what might be causing this? document.activeElement is being set correctly, but window.getSelection() is all nulls. Failing Playwright test.

[hb250131]

@hb250131 Thanks for reporting this issue; I hadn't noticed it until now.

Do you have any idea what might be causing this? document.activeElement is being set correctly, but window.getSelection() is all nulls. Failing Playwright test.

Thanks for looking into this.
I believe its a Safari browser specific issue. As you may already know contentEditable and its API has different implementation by different browsers and we have these issues across the spectrum. I see that you have it covered most of it except this tiny one. The way I see is focus trying to be set to span[data-slate-placeholder="true" on Safari which is not accessible due to contentEditable: false on the element and -webkit-user-modify: read-only which is same in Chrome too but Safari not working with it, you could find same details on "Notes" section with in the description.

[12joan]

The way I see is focus trying to be set to span[data-slate-placeholder="true" on Safari

That's what I suspected. It looks like focus goes to this element instead in Firefox:

<span data-slate-zero-width="n" data-slate-length="0"><br></span>

I tried to convince Safari to do the same using tabIndex, but it doesn't seem to work.

[12joan]

I think the best solution would be to apply your -webkit-user-modify: inherit workaround in Safari only. The problem seems to be in slate-react, so I'll make a PR to apply it there.