List block and screen readers: greatly inconsistent behavior

[afercia]

Seems contenteditable on a list element doesn't make screen readers so happy.

I've prepared a quick codepen, and I'd greatly appreciate some help and testing: https://codepen.io/afercia/full/aYamBy/

VoiceOver: announces the list but doesn't announce the list items content. It just reads out "group with 2 items editable":

NVDA: doesn't read the list item content in forms mode.

Contrary to what I thought, see #4074, seems the only way to address this issue is to reset the list semantics and use a role="textbox" for the list. In #4074 we've explicitly excluded lists and tables to get a role="textbox".

Instead, using a role="textbox" should, more or less, provide the same experience users get with the classic editor. More testing and research is definitely necessary.

[aardrian]

Per our WCEU chat (and assuming I understand the problem well enough), I made a fork of the pen to put role=textbox on the final list: https://codepen.io/aardrian/pen/zadBwe?editors=1000 (debug view: https://s.codepen.io/aardrian/debug/zadBwe for SR testing).

The final list on the page will at least announce the text in each bullet (NVDA), though it will not announce the count. If we have to choose between hearing the text or hearing the count, I vote for hearing the text.

[afercia]

Adding back the role=textbox is a quick fix, see below: it gets applied on the <ul> element though, which is a bit against what ARIA recommends, as we're overriding a native role. Pretending no one sees that 🙂I'd agree it's the best option we have.

There's one more block editable area where Gutenberg doesn't use the role=textbox and it's the Table block 😱It's rendered with a contenteditable <table> element. Unsure what to do with the table, @aardian any idea? Worth nothing the Table block has several accessibility quirks still to address.

[afercia]

Will split the table thing in a separate issue, if needed.