Let's make Slate accessible!

[bkilrain]

Do you want to request a feature or report a bug?

Feature Request

Currently, the only accessibility Slate supports is the role prop. This works fine when the editor is a stand alone component... but when it's working as a part of a larger composite component (ComboBox, Autocomplete, Dropdown, etc) there isn't a good way apply aria tags to the contentEditable element. I'm forced to put them on a wrapping dive and what I end up with (rendered) is:

<div aria-autocomplete=“true”>
  <div contenteditable role=“textbox” />
</div>

I'm not an a11y wizard... maybe someone who knows more can chime in. But I'd like all my `aria-* attributes to pass through to the contentEditable element.

[ericedem]

It looks like the editor has props for applying arbitrary styles to the content editable, as well as an aria role. I wonder if there should just be an object prop on <Editor> that allows arbitrary prop passing to the content editable element. Something like:

<Editor contentEditableProps={..myProps} />

Either that or there could be an explicit render method for rendering the content editable element.

[bkilrain]

That could work... a general prop like that would be useful if you need to add data- attributes for E2E testing or metrics-reporting as well.

[ofrank123]

Might be worth closing this issue, I stumbled across it because I was trying to figure out out to pass through aria-* props to the contenteditable div, but I figured out Editable already does that. I think the documentation on this could be a bit clearer though (or I just missed something).

[bkilrain]

That’s fair. I think I cut this ticket before the re-write.