-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 #11125
Comments
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 ( o_link1.mp4 |
@FilipTokarski Updated repro steps ,please refer the above |
@FilipTokarski is there any update on this ticket ? |
@FilipTokarski please provide the latest update |
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 0_link1.mp4Please provide a sample screen recording or precise steps to reproduce with screencast, so that we can investigate this issue properly. |
@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:
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?. |
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. |
@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. |
📝 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.
The text was updated successfully, but these errors were encountered: