Fix visual bug in media library where active-tab highlight applied to non active tab

Created on 9 August 2019, over 5 years ago
Updated 14 August 2023, over 1 year ago

See #2994699-71: Create a CKEditor plugin to select and embed a media item from the Media Library β†’

When using the icon to open Media Library, there's a visual bug in that Image is selected by default (+1) but Audio is also highlighted, causing a visual regression:

@phenaproxima explained that this is because there's code somewhere for accessibility reasons to automatically select the first item in a list. That's good, except that because Image isn't the first thing in the list, it's selecting both.

A workaround was introduced for this in #2994699: Create a CKEditor plugin to select and embed a media item from the Media Library β†’ , see :
\Drupal\media_library\Plugin\CKEditorPlugin\DrupalMediaLibrary::getConfig

    if (in_array('image', $media_type_ids, TRUE)) {
      // Due to a bug where the active item styling and the focus styling
      // create the visual appearance of two active items, we'll move
      // the 'image' media type to first position, so that the focused item and
      // the active item are the same.
      // This workaround can be removed once this issue is fixed:
      // @see https://www.drupal.org/project/drupal/issues/3073799
      array_unshift($media_type_ids, 'image');
      $media_type_ids = array_unique($media_type_ids);
    }

So this behaviour can only be seen if the workaround is removed.

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component
MediaΒ  β†’

Last updated about 12 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States oknate Greater New York City Area

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡·πŸ‡΄Romania bbu23

    Actually this bug is quite interesting. I have the following scenario on CLARO theme:

    On two environments, let's call them:
    - LOCAL
    - REMOTE

    The environments have the same codebase. One of them has the bug, the other one doesn't if we use the non-zero key:

    e.g.

    unset($media_type_ids['image']);
    $media_type_ids = ['image' => 'image'] + $media_type_ids;
    

    What I noticed in REMOTE environment is that the media_library_allowed_types array parameter that is sent to MediaLibraryState gets its keys reordered alphabetically. In MediaLibraryState in construct, even though the parameters are set in the correct order just before, they arrive sorted by keys alphabetically. In the LOCAL environment, the order is kept.

    If array_unshift($media_type_ids, 'image'); is used in both environments, then the order is not altered anymore because the key 0 will be in the top of the array no matter what.

    On the remote environment, I changed the image key to be

    unset($media_type_ids['image']);
    $media_type_ids = ['aaimage' => 'image'] + $media_type_ids;
    

    and then

    unset($media_type_ids['image']);
    $media_type_ids = ['bbimage' => 'image'] + $media_type_ids;
    

    which showed that the parameters are sorted by keys and placed the Image tab first for the first case, and second for the second case.

    This concludes that it is not related to the Claro theme, but I don't know if it's a server issue, or anything else. But since the LOCAL parameters are not sorted at all when they arrive in the MediaLibraryState construct for the exact same code, it could be something else outside of Drupal.

Production build 0.71.5 2024