diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css index 1efcb9e844..fbbb015c75 100644 --- a/core/modules/media_library/css/media_library.theme.css +++ b/core/modules/media_library/css/media_library.theme.css @@ -95,6 +95,10 @@ margin: 0 0 1em; } +.media-library-add-form-media { + outline: none; +} + /* Style the media add upload form. */ .media-library-add-form--upload.media-library-add-form--without-input .form-item-upload { margin-bottom: 0; @@ -105,7 +109,7 @@ } .media-library-add-form-description { - margin-top: 0; + margin: 0; } /* Style the media add oEmbed form. */ diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php index 0f9679a074..1589d1f9ae 100644 --- a/core/modules/media_library/src/Form/AddFormBase.php +++ b/core/modules/media_library/src/Form/AddFormBase.php @@ -146,7 +146,18 @@ public function buildForm(array $form, FormStateInterface $form_state) { else { $form['#attributes']['class'][] = 'media-library-add-form--with-input'; - $form['description'] = [ + $form['media'] = [ + '#type' => 'container', + '#attributes' => [ + 'class' => [ + 'media-library-add-form-media', + ], + 'tabindex' => -1, + 'aria-label' => $this->t('Added media items'), + ], + ]; + + $form['media']['description'] = [ '#type' => 'html_tag', '#tag' => 'p', '#value' => $this->formatPlural(count($added_media), 'The media item has been created. Fill in any required fields and save to add it to the media library.', 'The media items have been created. Fill in any required fields and save to add them to the media library.'), @@ -157,7 +168,6 @@ public function buildForm(array $form, FormStateInterface $form_state) { ], ]; - $form['media'] = ['#type' => 'container']; foreach ($added_media as $delta => $media) { $form['media'][$delta] = $this->buildEntityFormElement($media, $form, $form_state, $delta); } @@ -309,6 +319,7 @@ protected function buildCurrentSelectionArea(array $form, FormStateInterface $fo 'class' => [ 'media-library-add-form-selection', ], + 'aria-label' => $this->t('Selected media items'), ], ]; foreach ($pre_selected_items as $media_id => $media) { @@ -460,17 +471,24 @@ protected function prepareMediaEntityForSave(MediaInterface $media) { * The form render array or an AJAX response object. */ public function updateFormCallback(array &$form, FormStateInterface $form_state) { + $triggering_element = $form_state->getTriggeringElement(); + $wrapper_id = $triggering_element['#ajax']['wrapper']; + + $response = new AjaxResponse(); + // When the source field input contains errors, replace the existing form to // let the user change the source field input. If the user input is valid, // the entire modal is replaced with the second step of the form to show the // form fields for each media item. if ($form_state::hasAnyErrors()) { - $response = new AjaxResponse(); $response->addCommand(new ReplaceCommand('#media-library-add-form-wrapper', $form)); return $response; } - return $form; + // Update the form and shift focus to the added media items. + $response->addCommand(new ReplaceCommand("#$wrapper_id", $form)); + $response->addCommand(new InvokeCommand('#media-library-add-form-wrapper .media-library-add-form-media', '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 eb05531d48..f2a4afafbe 100644 --- a/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php +++ b/core/modules/media_library/tests/src/FunctionalJavascript/MediaLibraryTest.php @@ -670,7 +670,9 @@ public function testWidgetUpload() { $assert_session->elementNotExists('css', '.media-library-add-form--with-input'); $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_image->uri)); $assert_session->assertWaitOnAjaxRequest(); + $this->assertJsCondition('jQuery("#media-library-add-form-wrapper .media-library-add-form-media").is(":focus")'); $assert_session->pageTextContains('The media item has been created. Fill in any required fields and save to add it to the media library.'); + $this->assertSame('Added media items', $assert_session->elementExists('css', '.media-library-add-form-media')->getAttribute('aria-label')); $assert_session->elementExists('css', '.media-library-add-form--with-input'); $assert_session->elementNotExists('css', '.media-library-add-form--without-input'); // We do not have a pre-selected items, so the container should not be added @@ -741,6 +743,7 @@ public function testWidgetUpload() { $assert_session->pageTextContains('Add or select media'); $page->clickLink('Type Three'); $assert_session->assertWaitOnAjaxRequest(); + // Select a media item to check if the selection is persisted when adding // new items. $existing_media_name = $file_system->basename($png_uri_2); @@ -756,6 +759,7 @@ public function testWidgetUpload() { $page->attachFileToField('Add files', $this->container->get('file_system')->realpath($png_uri_3)); $assert_session->assertWaitOnAjaxRequest(); $selection_area = $assert_session->elementExists('css', '.media-library-add-form-selection'); + $this->assertSame('Selected media items', $selection_area->getAttribute('aria-label')); $assert_session->checkboxChecked("Select $existing_media_name", $selection_area); $page->fillField('Name', 'Unlimited Cardinality Image'); $page->fillField('Alternative text', $this->randomString());