Keyboard Navigation : User unable to access 'Insert link' alert dialog which is displayed by invoking 'Insert Link' control present in 'Rich text editor toolbar using CKEDitor5

[IyyappanRam2]

📝 Provide detailed reproduction steps (if any)

Using Keyboard Controls (Tab key) Navigate to rich textbox editor , observe keyboard tab key focus not going to below highlighted areas.

User unable to access 'Insert link' and other links/buttons controls present in 'Rich text editor toolbar.(CKEditor5)

Refer sample codepen : https://codepen.io/amneerajm/pen/OJjepxj

✔️ Expected result

Using keyboard navigation -User should be able to access control present in 'Rich text editor toolbar. Ex: Once the dialog is displayed, keyboard focus should land on the edit field present in the dialog.

❌ Actual result

User unable to access control present in 'Rich text editor toolbar. Ex: 1.Once the dialog is displayed, keyboard focus is landing on close(X) button in the Given Feedback dialog. 2.Keyboard focus is not at all moving to the bttons/links present in the richtexteditor.

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

Browser: MIcrosoft Edge (Chromium) & Google Chrome OS: Windows 10 CKEditor version: @ckeditor/ckeditor5-react : 3.0.0 Installed CKEditor plugins: @ckeditor/ckeditor5-build-decoupled-document : 25.0.0

Please refer the below codepen sample and we updated version details , by default keyboard Tab focus not going to CK editor controls.

https://codepen.io/amneerajm/pen/OJjepxj

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[FilipTokarski]

Hi, I'm not sure I fully understood what you mean by not being able to access link dialog. Could you add precise steps to reproduce this and a screencast/screenshot?

I was able to add a link with toolbar button using only keyboard (Alt+F10 to access toolbar first):

https://user-images.githubusercontent.com/34380544/149910276-3bb45062-47a8-4b96-bd99-1e958f2d20ac.mp4

[IyyappanRam2]

@FilipTokarski Updated repro steps ,please refer the above

[IyyappanRam2]

@FilipTokarski is there any update on this ticket ?

[IyyappanRam2]

@FilipTokarski please provide the latest update

[FilipTokarski]

Hi, sorry but I still don't understand what is the precise problem here. I'm able to add, edit and remove link using only keyboard. First you need to use alt + f10 (or alt + fn + f10 on mac) to access the editor's toolbar. Then you can navigate inside the toolbar using arrow keys.

https://user-images.githubusercontent.com/34380544/152936160-766efc7a-b959-4706-a5be-2f8ef0522d53.mp4

Please provide a sample screen recording or precise steps to reproduce with screencast, so that we can investigate this issue properly.

[gfxahmed]

@FilipTokarski - Thanks for the answer let me try to explain the issue.

When a screen reader(assistive technology) user uses this Rich text editor with a keyboard, the toolbar options are not accessible to him, and the tab through Keyboard takes the user to the content box(textarea) and it does not guide or tell the user that you are in a text editor and you need to press (alt + f10 (or alt + fn + f10) these keys to select an option in the toolbar. Also (alt + f10 (or alt + fn + f10) works only when you do default tabbing on the page but if you are using Voice over and tabbing through the keyboard for screen reader these (alt + f10 (or alt + fn + f10) not working.

So, the expected behaviour should be this:

1. First when a screen reader is in the content area of the rich text editor, it should tell user you need to press these keys (alt + f10 (or alt + fn + f10) to access the option in rich text toolbar.
2. by default non-screen reader and a keyboard user first the keyboard focus should be on text/content area and then all interactive elements (i.e links, buttons etc) within the content and at the end it should take the focus of the keyboard to the toolbar options.

So, first user can read or edit the content and then user can also access the Toolbar options with the keyboard for edits.

But, I personally feel, the Rich text editor it not that smart in many cases to use with keyboard only because it will be really hard to maintain the keyboard focus when user is editing multiple things in the editor and accessing the toolbar in the same time not sure how the keyboard focus will work sequentially?.

[gfxahmed]

I have tried adding the title text with JS on textarea so, when the keyboard focus is on the editor text-area, its now reading out 'press shortcut keys to access the toolbar', but as I have said above with the voice-over enabled for screen reader these shortcut keys are not working.

https://codepen.io/gfxahmed/pen/NWyeRoL

[FilipTokarski]

@gfxahmed Thank you for the explanation. We've recently started working on accessibility improvements and any feedback on this matter is highly appreciated, but please keep in mind that this might take some time to get fixed and we cannot promise any specific date.