Issue #3089745 by aleevas, larowlan, dipakmdhrm, pameeela, seycom, jo…

…ey-santiago, xjm, seanB, rooby: Add focus behaviour for media widget with max elements (cherry picked from commit fb46d2747fa64a6f0cfc0e96817665638586024c)
drupal · Jul 16, 2020 · 3f38d4b · 3f38d4b
1 parent 4dbf30a
commit 3f38d4b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 3 deletions.
diff --git a/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php b/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
@@ -508,8 +508,19 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
     // JavaScript by adding the 'data-disabled-focus' attribute.
     // @see Drupal.behaviors.MediaLibraryWidgetDisableButton
     if (!$cardinality_unlimited && $remaining === 0) {
-      $element['open_button']['#attributes']['data-disabled-focus'] = 'true';
-      $element['open_button']['#attributes']['class'][] = 'visually-hidden';
+      $triggering_element = $form_state->getTriggeringElement();
+      if ($triggering_element && ($trigger_parents = $triggering_element['#array_parents']) && end($trigger_parents) === 'media_library_update_widget') {
+        // The widget is being rebuilt from a selection change.
+        $element['open_button']['#attributes']['data-disabled-focus'] = 'true';
+        $element['open_button']['#attributes']['class'][] = 'visually-hidden';
+      }
+      else {
+        // The widget is being built without a selection change, so we can just
+        // set the item to disabled now, there is no need to set the focus
+        // first.
+        $element['open_button']['#disabled'] = TRUE;
+        $element['open_button']['#attributes']['class'][] = 'visually-hidden';
+      }
     }
 
     // This hidden field and button are used to add new items to the widget.

diff --git a/modules/media_library/tests/src/FunctionalJavascript/EntityReferenceWidgetTest.php b/modules/media_library/tests/src/FunctionalJavascript/EntityReferenceWidgetTest.php
@@ -14,14 +14,21 @@ class EntityReferenceWidgetTest extends MediaLibraryTestBase {
    */
   protected static $modules = ['field_ui'];
 
+  /**
+   * Test media items.
+   *
+   * @var \Drupal\media\MediaInterface[]
+   */
+  protected $mediaItems = [];
+
   /**
    * {@inheritdoc}
    */
   protected function setUp() {
     parent::setUp();
 
     // Create a few example media items for use in selection.
-    $this->createMediaItems([
+    $this->mediaItems = $this->createMediaItems([
       'type_one' => [
         'Horse',
         'Bear',
@@ -48,6 +55,31 @@ protected function setUp() {
     $this->drupalLogin($user);
   }
 
+  /**
+   * Tests that disabled media items don't capture focus on page load.
+   */
+  public function testFocusNotAppliedWithoutSelectionChange() {
+    // Create a node with the maximum number of values for the field_twin_media
+    // field.
+    $node = $this->drupalCreateNode([
+      'type' => 'basic_page',
+      'field_twin_media' => [
+        $this->mediaItems['Horse'],
+        $this->mediaItems['Bear'],
+      ],
+    ]);
+    $this->drupalGet($node->toUrl('edit-form'));
+    $open_button = $this->assertElementExistsAfterWait('css', '.js-media-library-open-button[name^="field_twin_media"]');
+    // The open button should be disabled, but not have the
+    // 'data-disabled-focus' attribute.
+    $this->assertFalse($open_button->hasAttribute('data-disabled-focus'));
+    $this->assertTrue($open_button->hasAttribute('disabled'));
+    // The button should be disabled.
+    $this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").is(":disabled")');
+    // The button should not have focus.
+    $this->assertJsCondition('jQuery("#field_twin_media-media-library-wrapper .js-media-library-open-button").not(":focus")');
+  }
+
   /**
    * Tests that the Media library's widget works as expected.
    */

diff --git a/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTestBase.php b/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTestBase.php
@@ -25,8 +25,12 @@ abstract class MediaLibraryTestBase extends WebDriverTestBase {
    *
    * @param array $media_items
    *   A nested array of media item names keyed by media type.
+   *
+   * @return \Drupal\media\MediaInterface[]
+   *   An array of media entities keyed by the names passed in.
    */
   protected function createMediaItems(array $media_items) {
+    $created_items = [];
     $time = time();
     foreach ($media_items as $type => $names) {
       foreach ($names as $name) {
@@ -39,8 +43,10 @@ protected function createMediaItems(array $media_items) {
           ->getSourceFieldDefinition($media->bundle->entity)
           ->getName();
         $media->set($source_field, $name)->setCreatedTime(++$time)->save();
+        $created_items[$name] = $media;
       }
     }
+    return $created_items;
   }
 
   /**