Skip to content
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.

Sign up for GitHub

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

Jump to bottom

The selected language in code block dropdown is not visible #5859

Closed
jodator opened this issue Nov 28, 2019 · 3 comments · Fixed by #12003
Closed

The selected language in code block dropdown is not visible #5859

jodator opened this issue Nov 28, 2019 · 3 comments · Fixed by #12003
Labels
domain:accessibility This issue reports an accessibility problem. domain:ui/ux This issue reports a problem related to UI or UX. package:code-block squad:features Issue to be handled by the Features team. type:bug This issue reports a buggy (incorrect) behavior.
Milestone
iteration 55 (v35...

Comments

@jodator
Copy link
Contributor

jodator commented Nov 28, 2019

📝 Provide detailed reproduction steps (if any)

  1. Open code block feature guide
  2. Place caret in either JavaScript or HTML/XML block
  3. Open code block dropdown

✔️ Expected result

A selected language is visible (is scrolled to if possible)

❌ Actual result

The active dropdown action is not visible.

📃 Other details

Selection_075

  • Browser: Safari, Firefox probably Chrome also
  • CKEditor version: latest master

If you'd like to see this fixed sooner, add a 👍 reaction to this post.
@jodator jodator added type:bug This issue reports a buggy (incorrect) behavior. domain:ui/ux This issue reports a problem related to UI or UX. module:ux package:code-block labels Nov 28, 2019
@jodator
Copy link
Contributor Author

jodator commented Nov 28, 2019

It's worse on Safari as they don't render the scrollbar there and the list looks like finite:

Zrzut ekranu 2019-11-28 11 55 25

@Reinmar Reinmar added the domain:accessibility This issue reports an accessibility problem. label Dec 2, 2019
@Reinmar Reinmar added this to the nice-to-have milestone Dec 2, 2019
@Reinmar Reinmar removed the module:ux label Jan 15, 2020
@pomek pomek removed this from the nice-to-have milestone Feb 21, 2022
@bbenjamin
Copy link

Something to note, that may mean this is easier to solve: This is a problem on pages that have loaded with existing code blocks. If a new code block is added, or the language in an existing code block is changed, then the active language is automatically scrolled to when the select is opened. This can be reproduced on https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html

@wimleers
Copy link

FYI: tracking this at https://www.drupal.org/project/drupal/issues/3283801 😊

@Reinmar Reinmar added the squad:features Issue to be handled by the Features team. label Jun 24, 2022
@mlewand mlewand mentioned this issue Jun 28, 2022
Closed
@Reinmar Reinmar mentioned this issue Jul 4, 2022
Closed
@Reinmar Reinmar mentioned this issue Jul 13, 2022
Merged
oleq added a commit that referenced this issue Jul 13, 2022
@oleq
Merge pull request #12003 from ckeditor/ck/11838-placement-of-focus-a…
a95ad5c 
…fter-opening-dropdowns

Fix (ui): Opening a dropdown should focus the first item (or the first active item) for easier navigation and accessibility. Closes #11838. Closes #2000. Closes #11568. Closes #3215. Closes #5859.

MINOR BREAKING CHANGE (ui): Until now, `preventDefault()` was called on the `mousedown` event to prevent the [`ButtonView`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_button_buttonview-ButtonView.html) from "stealing" the focus from the editing root. Starting from this editor version, to improve the accessibility of the editor, all instances of the [`ButtonView`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_button_buttonview-ButtonView.html) class (and child classes) will automatically focus in DOM when clicked. It is recommended that features that use buttons to manage the content call `editor.editing.view.focus()` after the button was [executed](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_button_buttonview-ButtonView.html#event-execute) in order to bring the DOM focus back to the editing root to allow users type right away. 
@Reinmar Reinmar added this to the iteration 55 milestone Jul 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
domain:accessibility This issue reports an accessibility problem. domain:ui/ux This issue reports a problem related to UI or UX. package:code-block squad:features Issue to be handled by the Features team. type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Milestone
iteration 55 (v35.0.0)
Development

Successfully merging a pull request may close this issue.

Implemented focusing first item after opening a dropdown ckeditor/ckeditor5
5 participants
@wimleers @Reinmar @jodator @bbenjamin @pomek