diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css index d2ad73eac0..72a4411138 100644 --- a/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -480,6 +480,7 @@ .media-library-add-form__remove-button.button:disabled:active, .media-library-add-form__remove-button.button:focus { color: #787878; + border: 0; background: transparent url(../../../misc/icons/787878/ex.svg) right 2px no-repeat; /* LTR */ } [dir="rtl"] .media-library-add-form__remove-button:focus, diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php index 1b5cb192b9..007788f99c 100644 --- a/core/modules/media_library/src/Form/AddFormBase.php +++ b/core/modules/media_library/src/Form/AddFormBase.php @@ -3,7 +3,6 @@ namespace Drupal\media_library\Form; use Drupal\Core\Ajax\AjaxResponse; -use Drupal\Core\Ajax\AnnounceCommand; use Drupal\Core\Ajax\InvokeCommand; use Drupal\Core\Ajax\ReplaceCommand; use Drupal\Core\Entity\Entity\EntityFormDisplay; @@ -196,22 +195,6 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo 'media-library-add-form__media', ], ], - 'remove_button' => [ - '#type' => 'submit', - '#value' => $this->t('Remove'), - '#name' => 'media-' . $delta . '-remove-button' . $id_suffix, - '#attributes' => [ - 'class' => ['media-library-add-form__remove-button'], - 'aria-label' => $this->t('Remove @label', ['@label' => $media->getName()]), - ], - '#ajax' => [ - 'callback' => '::updateFormCallback', - 'wrapper' => 'media-library-add-form-wrapper', - ], - '#submit' => ['::removeButtonSubmit'], - // Ensure errors in other media items do not prevent removal. - '#limit_validation_errors' => [], - ], 'preview' => [ '#type' => 'container', '#attributes' => [ @@ -231,6 +214,22 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo // to build the entity form fields. '#parents' => ['media', $delta, 'fields'], ], + 'remove_button' => [ + '#type' => 'submit', + '#value' => $this->t('Remove'), + '#name' => 'media-' . $delta . '-remove-button' . $id_suffix, + '#attributes' => [ + 'class' => ['media-library-add-form__remove-button'], + 'aria-label' => $this->t('Remove @label', ['@label' => $media->getName()]), + ], + '#ajax' => [ + 'callback' => '::updateFormCallback', + 'wrapper' => 'media-library-add-form-wrapper', + ], + '#submit' => ['::removeButtonSubmit'], + // Ensure errors in other media items do not prevent removal. + '#limit_validation_errors' => [], + ], ]; // @todo Make the image style configurable in // https://www.drupal.org/node/2988223 @@ -366,11 +365,18 @@ public function removeButtonSubmit(array $form, FormStateInterface $form_state) // button. $triggering_element = $form_state->getTriggeringElement(); $delta = array_slice($triggering_element['#array_parents'], -2, 1)[0]; - // Update the list of added media items in the form state. + $added_media = $form_state->get('media'); + $removed_media = $added_media[$delta]; + + // Update the list of added media items in the form state. unset($added_media[$delta]); + // Re-key the media items before setting them in the form state. $form_state->set('media', array_values($added_media))->setRebuild(); + + // Show a message to the user to confirm the media is removed. + $this->messenger()->addStatus($this->t('The media item %label has been removed.', ['%label' => $removed_media->label()])); } /** @@ -410,14 +416,6 @@ public function updateFormCallback(array &$form, FormStateInterface $form_state) $response->addCommand(new ReplaceCommand("#$wrapper_id", $form)); } - // Announce the updated content to screen readers. - if (end($triggering_element['#array_parents']) === 'remove_button') { - $response->addCommand(new AnnounceCommand($this->t('Media removed.'))); - } - else { - $response->addCommand(new AnnounceCommand($this->t('Media added.'))); - } - // Move the focus to the first tabbable element in the add form. $response->addCommand(new InvokeCommand('#media-library-add-form-wrapper :tabbable:first', 'focus')); return $response; diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php index a9ad1c5650..2418681e82 100644 --- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -827,8 +827,6 @@ public function testWidgetUpload() { $assert_session->assertWaitOnAjaxRequest(); $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri)); $assert_session->assertWaitOnAjaxRequest(); - // Assert the add action is announced to screen readers. - $this->assertNotNull($assert_session->waitForText('Media added.')); // Assert the focus is set on the updated media field. $this->assertJsCondition('jQuery("#media-library-add-form-wrapper :tabbable:first").is(":focus")'); // Assert the media item fields are shown and the vertical tabs are no @@ -839,8 +837,9 @@ public function testWidgetUpload() { // library. $assert_session->elementExists('css', '.media-library-add-form__remove-button')->click(); $assert_session->assertWaitOnAjaxRequest(); - // Assert the remove action is announced to screen readers. - $this->assertNotNull($assert_session->waitForText('Media removed.')); + // Assert the remove message is shown. + $filename = $png_image->filename; + $assert_session->pageTextContains("The media item $filename has been removed."); // Assert the focus is set on the updated media field. $this->assertJsCondition('jQuery("#media-library-add-form-wrapper :tabbable:first").is(":focus")'); $assert_session->elementNotExists('css', '.media-library-add-form__fields'); @@ -954,8 +953,6 @@ public function testWidgetOEmbed() { $page->fillField('Add Type Five via URL', $video_url); $page->pressButton('Add'); $assert_session->assertWaitOnAjaxRequest(); - // Assert the add action is announced to screen readers. - $this->assertNotNull($assert_session->waitForText('Media added.')); // Assert the focus is set on the updated media field. $this->assertJsCondition('jQuery("#media-library-add-form-wrapper :tabbable:first").is(":focus")'); // Assert the media item fields are shown and the vertical tabs are no @@ -966,8 +963,8 @@ public function testWidgetOEmbed() { // library. $assert_session->elementExists('css', '.media-library-add-form__remove-button')->click(); $assert_session->assertWaitOnAjaxRequest(); - // Assert the remove action is announced to screen readers. - $this->assertNotNull($assert_session->waitForText('Media removed.')); + // Assert the remove message is shown. + $assert_session->pageTextContains("The media item $video_title has been removed."); // Assert the focus is set on the updated media field. $this->assertJsCondition('jQuery("#media-library-add-form-wrapper :tabbable:first").is(":focus")'); $assert_session->elementNotExists('css', '.media-library-add-form__fields');