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

Updating title. Clarifying that this bug is about the highlight used to indicate a selected tab. The term "focus" gets misused, or is kind-of overloaded.

Hello, I am not able to reproduce the behavior from the screenshot. Could you please share more details of what you are doing to get this result? Thx

Updated the IS with notes to the existing workaround that prevents you from reproducing this behaviour currently.

This issue is not reproduced in Claro 9.4.1 theme.
landing from issue https://www.drupal.org/project/drupal/issues/3303889#comment-14655475 to here.

I have found that in patch #91
from https://www.drupal.org/project/drupal/issues/2994699#comment-13214946

array_unshift($media_type_ids, 'image');
$media_type_ids = array_unique($media_type_ids);

the above code prepends the image at first position but as it is an associative array the first pair becomes 0 => "image" instead of "image" => "image"
so to fix it we can use the below code

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

as I said earlier this issue is not coming in Claro theme we can remove this code block.

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.

If this is not controllable from Drupal, maybe it would be better to send the parameters to MediaLibraryState with numeric keys instead of alpha keys. This will definitely not require the "image" fix that we currently have. (unless they are required later in the code). E.g.

$state = MediaLibraryState::create(
  'media_library.opener.editor',
  array_values($media_type_ids), // Numeric keys here.
  reset($media_type_ids),
  1,
  ['filter_format_id' => $editor->getFilterFormat()->id()],
);