Not able to tab through rich text editor's toolbar

[Emil R]

Hi,

I'm stuck trying in some way to set tabindex to the toolbar buttons of the editor. I've tried using

setAttribute('tabindex', '0') to the buttons html elements. Or put zero tabindex to a a custom template button like the one in this example https://stackblitz.com/edit/o2a2pqay?file=index.js But tabindex keeps returning to '-1' and no tabbing is possible in the toolbar. Please help.

Regards,

Emil

[Bhuvaneshwari Thirunavukarasu]

Hi Emil,

Thank you for reaching out with your inquiry about the tabIndex property in the RichTextEditor toolbar items.

By default, the tabIndex property in the RichTextEditor toolbar is designed to enhance keyboard navigation. It is initially set to -1. When you press Alt+F10, the toolbar gains focus, enabling you to navigate through the toolbar items using the Home and End keys. This ensures smooth movement between the items in the toolbar. This is the intended behavior of our RichTextEditor component, which is why the tabIndex of the toolbar items is dynamically adjusted.

If you are looking to modify the tabIndex behavior, please let us know your specific requirements or use case, and we will be happy to assist you further.

Thanks,

Bhuvaneshwari T

[Emil R]

Hi Bhuvaneshwari,

Thanks for your reply!

I have already made some custom solution for navigating through and hovering over toolbar buttons. I am now working on menu popups for dropdown buttons like background color, font family, etc. Currently I am struggling with 2 problems:

1. For popups with text menus, like font family and font size, when navigating with keyboard through the li elements they are pronounced, but they are not pronounced when you hover over them
2. For popus with span elements, like background color, funnily I've managed to bring pronunciation on hover, but not when navigating through them, it seems they are not really focused or something

I'll be very grateful if you could help with these issues.

Regards,

Emil

[Bhuvaneshwari Thirunavukarasu]

Hi Emil,

Thank you for reaching out to us.

Query 1: For popups with text menus (e.g., font family and font size), you mentioned that the list (li) elements should be announced when navigating with the keyboard.

Screen readers typically do not announce elements on hover since they rely on keyboard navigation. The focused element should be announced correctly when using the keyboard.

Query 2: For popups with span elements (e.g., background color), you noted that pronunciation works when hovering but not during keyboard navigation. It seems that these elements may not be receiving proper focus when navigated through the keyboard.

Ensure that the span elements can receive keyboard focus. By default, span elements are not focusable.

To better assist you, could you please provide the details of the screen reader or narrator you are using? This will help us tailor the solution to work more effectively across different screen readers and ensure proper accessibility.

We are look forward to your response and am happy to assist further.

Regards,

Bhuvaneshwari T