facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
17.37k stars 1.43k forks source link

Bug: `contentEditable` does not properly announce deletions when using `a11y` screen readers on Safari #5874

Open cpero opened 2 weeks ago

cpero commented 2 weeks ago

Bug Description

When using Safari and a screen reader (such as Mac Voice Over), content deletion is not properly announced. When typing in an input, it is expected that a screen reader will announce each character (and word) as they are typed and also does the same for deletion. Instead, the screen reader only works with Lexical's contentEditable when going left-to-right and it simply goes silent when deleting words and characters from the input. It also does not always announce the first (and sometimes second) character after a deletion. This is an accessibility problem for visually impaired users who rely on screen readers and assistive technology to navigate.

Lexical contentEditable

https://github.com/facebook/lexical/assets/31071014/9a2185dc-db9b-481f-86a6-6c800602da1d

Vanilla contentEditable

https://github.com/facebook/lexical/assets/31071014/f1dbf65b-0bad-48e1-9e99-e1213d9893af

Lexical version: All

Steps To Reproduce

  1. Turn on screen reader (On Mac, this is Cmd + F5)
  2. Navigate to the Lexical Playground
  3. Start typing and deleting and notice the discrepancies.

The current behavior

Screen readers using Safari cannot hear content being deleted.

The expected behavior

The screen reader should announce all characters like shown in this example: https://github.com/facebook/lexical/assets/31071014/5e7c280b-227a-46a2-b73a-2a288e3bd64a